Videojs Trailer Plugin

One time fee € 10.00

Buy now

Trailer plugin for Videojs

Trailer plugin is an effect that you can often see on TV. It shows a small video preview window in the bottom right corner with a trailer of the upcoming film, video or a show.
A trailer preview is muted. A trailer preview window appears at the time defined by the user, counting from the end of the main video. User can define video title and URL to go for "Watch now" button. By default preview video is looped.
Chack the options below:

src - media file url (mp4, webm) - required
url - url to go on button click
title - trailer video title
loop - set false to disable trailer playback in loop
start - custom time in seconds to show trailer video.

Code snippet

// Load player and trailer plugin css stylesheet file
<link href="https://vjs.zencdn.net/8.2.0/video-js.css" rel="stylesheet">
<link href="//www.domain.com/videojs/plugins/videojs.trailer.css" rel="stylesheet" type="text/css">

// Load player and trailer plugin javascript files
<script src='https://vjs.zencdn.net/8.2.0/video.min.js'></script>
<script src="//www.domain.com/videojs/videojs.trailer.js"></script>
// Setup video tag with media file(s)
<video id="video_1" class="video-js vjs-fluid" controls preload='auto' width="640" height="264"> poster="VIDEO_POSTER.jpg"
<source src="VIDEO.mp4" type="video/mp4">
</video>

// Initialize player and trailer plugin
<script>
var player = videojs('video_1');
player.trailer({
src: 'my_trailer.mp4',
title: 'trailer_title',
url: 'website url to go'
});
</script>

By default trailer video starts to play (is showing) at the time position calculated based on main video length - trailer video length.
The user may find "start" option more useful, to start trailer video at custom start time position (seconds). "start" option is also required if the main video is a live stream.

Code snippet

player.trailer({
src: 'my_trailer.mp4',
title: 'trailer_title',
url: 'website url to go',
start: 170
});

By default trailer video is playing in a loop. The user may disable loop playback by setting appropriate "loop" option to false.

Code snippet

player.trailer({
src: 'my_trailer.mp4',
title: 'trailer_title',
url: 'website url to go',
start: 170,
loop: false
});