Videojs Trailer Plugin

One time fee € 10.00

Add to cart Buy now

Trailer plugin for Videojs

Trailer plugin is what you can often see on TV. It shows small video preview window in bottom right corner with trailer of upcoming film, video or a show.
Trailer preview is mute. Trailer preview window appears at the time defined by the user, counting from the end time of main video. User can define video title and URL to go for "Watch now" button. By default preview video is looped.
Chack options below:
  • src - media file url (mp4, webm) - required
  • url - url to go on button click
  • title - trailer video title
  • start - time in seconds to show trailer video. Read more below.
Code snippet

// Load player and trailer plugin css stylesheet file
<link href="https://vjs.zencdn.net/7.11.5/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/7.11.5/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>

About trailer start time

If you do not set start option for trailer video, the time to show trailer will be calculated from the end of main videos and the length of trailer video.
If main video is live stream, trailer will not show if start option not defined.
Trailer video is closed automatically when main video is ended.