Shulou(Shulou.com)05/31 Report--

In this article Xiaobian for you to introduce in detail "how to use the video.js video playback plug-in in HTML5", the content is detailed, the steps are clear, and the details are handled properly. I hope this article "how to use the video.js video playback plug-in in HTML5" can help you solve your doubts.

Take a look at the default example:

Controls represents the control bar, prload: preloaded, and poster represents the initially displayed picture. Data-set supports setting some parameters with json. Source needless to say, track refers to subtitles.

This will come out, but in practice we have other needs.

No subtitles:

The js of novtt needs to be applied, which is in the alt file of demo. In this way, the selection of letters will not appear in the video control bar. Of course, you no longer need the track element in the page.

Width and height adaptation:

I started to set it up with css, and found that it didn't work anyway. Different from ordinary elements, video elements need to be responsive to width and height by setting the ratio of internal elements. Video.js provides two ways.

Js: set a fluid to true.

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

But this also needs to set a starting width and height for the video element, otherwise the initial image will not be visible.

Css: you can add styles directly. There are three kinds. Vjs-fluid,.vjs-4-3. VjsMur16-9. The first one is calculated automatically, and the latter two specify the ratio. The style also needs to set the starting width and height to display the picture.

You need to enable JavaScript to play videos. It is recommended to use browsers that support HTML5.

Event focus:

We are generally concerned about the start, pause and end of these three events

Var player = videojs ('video', {}, function () {console.log (' Good to goggles'); / / this.play (); / / if you don't trust autoplay for some reason}); player.on ('play', function () {console.log (' start / resume playback');}) Player.on ('pause', function () {console.log (' pause playback');}); player.on ('ended', function () {console.log (' end playback');})

There are also update events:

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

You can judge whether the video ends by judging whether the current time is equal to the total time:

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

Some predecessors pointed out that the ended event was not triggered correctly on Android devices.

MIME type settings

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

Common video formats:

Flv format is to add association extension: .flv, content type: application/octet-stream

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

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

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

Webm format is the extension: .webm, content type: video/webm

Restart iis will not take effect until it is set up.

Style customization

Officials have given an address for codepen http://codepen.io/heff/pen/EarCt to edit and play with. Mainly play button, control bar and progress bar. The default is the above.

Flash Settin

Playback technology is used to play video or audio files in browsers or plug-ins, using video or audio elements in case of H6, and defining a flash player in case of flash. Not only flash, but also Silverlight, Quicktime and other technologies are supported for playback. Data-setup can be defined directly in the element. Specify the supported technologies.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.