1. How do I register a video with the Swarmify technology dynamically?
Example:
<div id="main_video" src="path/to/video.mp4" width="800" height="600" poster="path/to/poster.jpg" controls="controls" preload="auto"></div>
Add the Swarmify JavaScript function call to register the video.
swarmify.swarmifyVideo("main_video", <config-options>);
2. What is the "config-options" parameter for the Swarmify SmartVideo player?
This parameter allows the SmartVideo player to be fine-tuned to fit your specific site/video needs. Using simple JSON formatted text, the player uses the supplied configuration to provide a more customized feel to how it looks and behaves for your end-users.
3. How do I enable auto-play?
Example:
<div id="main_video" src="path/to/video.mp4" width="800" height="600" poster="path/to/poster.jpg" controls preload="auto" autoplay></div>
-- OR --
swarmify.swarmifyVideo("main_video", {autoplay:true});
Please note: some browsers/platforms, especially mobile, disable autoplay for videos. If your video is soundless, try adding muted to the tag, as some browsers will only allow autoplay for muted videos.
4. How do I enable ad support?
This can be done in your initial swarmoptions setup, by adding our swarmads plugin and setting your VAST URL.
Example:
var swarmoptions = {
swarmcdnkey: "<<publicAPIKey>>",
plugins: {
swarmads: {
adTagUrl: "YOUR_AD_URL"
}
}
};
It can also be done dynamically by passing it in as an option:
var swarmoptions = {
swarmcdnkey: "<<publicAPIKey>>",
plugins: {
swarmads: {
// NOTE: `swarmads` plugin is still in config
// just with an empty options map
}
}
};
// Dynamically install smartvideo player on video tag
// with custom advertising options
swarmify.swarmifyVideo("main_video", {
plugins: {
swarmads: {
adTagUrl: "YOUR_AD_URL"
}
}
});
Note: To dynamically pass in ad tags, your swarmoptions must still include the swarmads object but with an empty config. Otherwise the needed advertising plugin is not enabled on the page and the dynamic ad tag setting will not function as expected.
5. How do I make a video fluid/responsive?
A smartvideo works like a normal <video>, which is not fluid by default. To fix this, first set the height and width attributes on the tag. (Even if the displayed size is different, this is how we know the aspect ratio.) Finally, add swarm-fluid to the classes. This also works on YouTube iframes.
Here's a basic example:
<smartvideo width="800" height="600" class="swarm-fluid" src="path/to/video.mp4"></smartvideo>
6. How do I add a custom watermark?
Add our watermark plugin, and set file, xpos, ypos, and opacity options.
Example:
/*
** Watermark Options **
file: The URL of the watermark image
xpos: (0-100) The location from left to right in percent (0 = left, 50 = middle, 100 = right)
ypos: (0-100) The location from top to bottom in percent (0 = top, 50 = middle, 100 = bottom)
opacity: (0.0-1.0) The opacity of the image (0 = totally transparent, 0.5 = half transparent, 1.0 = totally opaque)
*/
// This example places yourimage.png in the upper-right corner and makes it 75% opaque
var swarmoptions = {
swarmcdnkey: "<<publicAPIKey>>",
plugins: {
watermark: {
file: "/yourimage.png",
xpos: 100,
ypos: 0,
opacity: 0.75
}
}
};
7. How do I show related videos at the end of the video?
Example:
/*
** Configuration Options **
relatedTitle: Main title display
relatedContent: Array of related videos
- posterImage: The location of the poster image for the related video
- videoUrl: The location of the related video
- title: Title display for the related video
count: Number of seconds before automatically playing related video
*/
swarmify.swarmifyVideo("main_video", {
plugins: {
relatedVideos: {
relatedTitle: "Related Videos",
relatedContent: [
{posterImage: "/related_vid_1.png", videoUrl: "path/to/related_vid_1.mp4", title: "Video_1"},
{posterImage: "/related_vid_2.png", videoUrl: "path/to/related_vid_2.mp4", title: "Video_2"}
],
count: 10
}
}
});
8. How do I switch between multiple video sources?
<div id="main_video" src="path/to/video.mp4" width="800" height="600" poster="path/to/my/poster.jpg" controls="controls" preload="auto">
<source src="path/to/video_hd.mp4" type="video/mp4" data-res="HD" data-default="true">
<source src="path/to/video_sd.mp4" type="video/mp4" data-res="SD">
</div>
-- OR --
swarmify.swarmifyVideo("main_video", {
plugins: {
resolutions: true
}
});
9. How do I add thumbnails to the video?
/*
** Configuration Options **
The first argument is the time in seconds you wish to display the
thumbnails. In this example, this is represented by 0, 10, 20, 30, and 40.
- src: Path to the thumbnail image
- style: CSS style for the thumbnail
*/
// Example 1:
// How to display one thumbnail for the first five seconds of a video and then another for the rest of the time
swarmify.swarmifyVideo("main_video", {
plugins: {
thumbnails: {
0: {
src: 'path/to/thumbnail1.png',
width: '120px'
},
5: {
src: 'path/to/thumbnail2.png'
}
}
}
});
// Example 2:
// How to create multiple thumbnails out of one single image
swarmify.swarmifyVideo("main_video", {
plugins: {
thumbnails: {
0: {
src: 'path/to/yourimage.png',
style: {
left: '-60px',
width: '600px',
height: '50px',
clip: 'rect(0, 120px, 50px, 0)'
}
},
10: {
style: {
left: '-180px',
clip: 'rect(0, 240px, 50px, 120px)'
}
},
20: {
style: {
left: '-300px',
clip: 'rect(0, 360px, 50px, 240px)'
}
},
30: {
style: {
left: '-420px',
clip: 'rect(0, 480px, 50px, 360px)'
}
},
40: {
style: {
left: '-540px',
clip: 'rect(0, 600px, 50px, 480px)'
}
}
}
}
});
10. How do I disable the SmartVideo technology for a specific video?
To exclude individual videos, add swarm-exclude to the list of CSS classes on the element. This works with <iframe>, <video>, and <smartvideo> tags.
<!-- IFrame Example -->
<iframe src="https://youtu.be/pzYepqSPgLY" class="swarm-exclude"></iframe>
<!-- Video Element Example -->
<video src="http://example.com/example.mp4" class="swarm-exclude"></video>
11. How do I disable the SmartVideo technology on a specific page?
This is strongly advised against as this disables the benefits offered by SmartVideo. However, in the event SmartVideo needs to be disabled on a specific page, please see the following example.
swarmify.swarmifyVideo("main_video", {bypassVideo:true});
12. Not seeing what you are looking for?
No worries, you can contact support at [email protected].
Updated about 3 years ago