Introduction to HTML5 video playback plug-in video.js

video.js is a very popular HTML5 video playback plug-in. It is very suitable for playing videos on mobile terminals (such as WeChat web pages). It has powerful functions, supports downgrading to flash, and is compatible with IE8. Official website: http://videojs.com/ git&demo: http://files.cnblogs.com/files/stoneniqiu/video-js-5.11.4.zip

controls represents the control bar, prload: preloading, and poster represents the initial displayed image. data-set supports using json to set some parameters. Needless to say, source refers to subtitles.

This way it comes out, but in reality we have other needs.

You need to apply novtt's js, which is in the alt file of the demo. This way there will be no letter selection in the video control bar. Of course you no longer need the track element in the page.

 <link href=~/js/video-js-5.11.4/alt/video-js-cdn.min.css rel=stylesheet /><script src=~/js/video-js-5.11.4/alt/ video.novtt.min.js></script>

I started setting it up myself using css, but found that nothing worked. Video elements are different from ordinary elements. They need to achieve responsive width and height by setting the ratio of internal elements. video.js provides two methods.

js: Set a fluid to true.

 var player = videojs('video', { fluid: true }, function () { console.log('Good to go!'); this.play(); // if you don't trust autoplay for some reason } )

But this also requires setting a starting width and height for the video element, otherwise the starting image will not be visible.

css: styles can be added directly. There are three types: .vjs-fluid, .vjs-4-3, .vjs-16-9. The first one will be calculated automatically, and the latter two specify the ratio. The style also needs to set the starting width and height to display the image.

 <video id=video class=video-js vjs-default-skin vjs-fluid poster=http://vjs.zencdn.net/v/oceans.png width=375 height=200 controls preload=none data-setup=' { html5 : { nativeTextTracks : false } }'> <source [email protected] type=video/mp4> <p class=vjs-no-js> JavaScript needs to be enabled to play videos. It is recommended to use a <a href=http://videojs.com/html5-video-support/ target=_blank> browser that supports HTML5</a> to access. </p> </video>

Event attention:

We generally focus on the three events of start, pause, and end

 var player = videojs('video', { }, function () { console.log('Good to go!'); //this.play(); // if you don't trust autoplay for some reason }) ; player.on('play', function () { console.log('Start/Resume play'); }); player.on('pause', function () { console.log('Pause play'); }); player.on('ended', function () { console.log('Ended playing'); });

There are also update events:

 player.on('timeupdate', function() { console.log(player.currentTime()); });

You can determine whether the video ends by judging whether the current time and the total time are equal:

 player.on('timeupdate', function () { // If currentTime() === duration(), the video has finished playing if (player.duration() != 0 && player.currentTime() === player .duration()) { // End of playback} });

Some seniors pointed out that the ended event is not triggered correctly on Android devices (be prepared first).

The default iis MIME setting does not add the mp4 type. There will be no problem with local playback, but a 404 error will occur when it reaches the server. This requires setting MIME in iis:

The flv format is added with the associated extension: .flv, content type: application/octet-stream

The f4v format is extension: .f4v, content type: application/octet-stream

The mp4 format is extension: .mp4, content type: video/mp4

The ogv format is extension: .ogv, content type: video/ogg

The webm format is extension: .webm, content type: video/webm

Restart iis after setting to take effect.

The official gave a codepen address http://codepen.io/heff/pen/EarCt which you can edit and play with. Mainly the play button, control bar and progress bar. The default is as above.

There is also this one: http://codepen.io/zanechua/pen/GozrNe SublimeVideo

Playback technology is used to play video or audio files in browsers or plug-ins. If it is h5, it will use video or audio elements. If it is flash, it will define a flash player. Not only flash, but also supports Silverlight, Quicktime and other technologies for playback. Data-setup can be defined directly in the element. Specify supported technologies.

 <video data-setup='{techOrder: [html5, flash, other supported tech]}'

Or use JavaScript:

 videojs(videoID, { techOrder: [html5, flash, other supported tech]});

The default rule here is that the first technology will be used to play, and if it fails, the subsequent options will be used. For example, if html5 is written in the first place above, all videos will be played using html5. If we want flash to take priority, just put it in front:

 data-setup='{ techOrder: [flash,html5] }'

In the page elements you will find that video.js gives us the flash object we use.

Add the autoplay attribute to the video element, or add autoplay:true to js

 <video id=video autoplay poster=/images/bk.png width=375 height=200 controls preload=none > </video>

or

 var player = videojs('video', { autoplay:true }, function () { console.log('Good to go!'); //this.play(); // Insurance, you can also actively call play() });

Autoplay is always annoying, so the opposite is to delete the autoplay attribute or set it to false.

other:

video.js supports extension plug-ins, which is very convenient to use.

 //Define a plug-in function examplePlugin(options) { this.on('play', function (e) { console.log('playback has started!'); }); } //Register videojs.plugin('examplePlugin' , examplePlugin); // Use player.examplePlugin({ exampleOption: true });

The player's API can be directly called inside the plug-in. There is a playlist plug-in that you can study if you need a playlist. https://github.com/brightcove/videojs-playlist and http://videojs.com/advanced/ have this effect:

The above is the introduction of the HTML5 video playback plug-in video.js introduced by the editor. I hope it will be helpful to you. If you have any questions, please leave me a message and the editor will reply to you in time. I would also like to thank everyone for your support of the VeVb martial arts website!