An open source free cross-browser video player--videojs usage Introduction

Source: Internet
Author: User

The video features in the recent project need to be fully compatible with the browser, so the video functions previously implemented with HTML5 need to be transformed. Over the internet, try to try, in all the video player, the number of its most practical. First, let's look at its advantages:

1. It is open source free and you can easily get its latest code on GitHub.

2. It's very easy to use it, just take a few seconds to rack up a video playback page.

3. It is almost compatible with all browsers, and HTML5 is preferred, and in unsupported browsers It is automatically played using Flash.

4. The interface can be customized, pure JavaScript and CSS built. The description document is also very detailed.

Here is a simple way to use the website:

<!DOCTYPE HTML><HTML><Head>  <title>Video.js Test Suite</title><Linkhref= "//vjs.zencdn.net/4.10/video-js.css"rel= "stylesheet"><Scriptsrc= "//vjs.zencdn.net/4.10/video.js"></Script> </Head><Body> <VideoID= "Example_video_1"class= "Video-js Vjs-default-skin"Controlswidth= "640"Height= " the">
<src="Http://video-js.zencoder.com/oceans-clip.mp4type=' video/mp4'/>  
</ Video >
</ Body >
</ HTML >

Such an example is enough for a movie site to be used for it. But our needs are often not just that simple. For example, I now want to force the use of Flash playback on the PC to how to set?

There are two ways of doing this:

First of all, set by the Data-setup property of HTML.

<VideoID= "Example_video_1"class= "Video-js vjs-default-skin vjs-big-play-centered"controls preload= "Auto"width= "640"Height= " the"Poster= "Http://video-js.zencoder.com/oceans-clip.png"Data-setup= ' {techorder: ["Flash", "HTML5"]} '>  ...</Video>

The second is the use of javascript:

  Videojs (' #example_video_1 ', {    techorder: ["Flash", "HTML5"]  },function() {    })

Of course, the official documentation says it automatically detects if HTML5 is supported and automatically uses Flash playback when not supported.

With the popularity of single-page applications, many times, when we initialize VIDEOJS, there is no node on the page to store video. This time, Videojs also thought for us, we only need to set empty Data-setup properties on it. Then make the following statement in JS:

function () {  // This is functionally the same as the previous example.});

In other words, the first position, we can directly pass the DOM node reference is also possible.

At this point we found that the play button is in the upper-left corner by default, and the official says it does not obscure the wonderful parts of the content, but if we want to put it in the middle, it's easy to handle. Adding a vjs-big-play-centered style to the video tag is fine.

<VideoID= "Example_video_1"class= "Video-js vjs-default-skin vjs-big-play-centered"controls preload= "Auto"width= "640"Height= " the"Poster= "Http://video-js.zencoder.com/oceans-clip.png"Data-setup= ' {' example_option ': true} '>  ...</Video>

If we want it to play automatically, it is very easy to add a autoplay on it, or data-setup= ' {"AutoPlay": true} ', through JS is the same truth. It's very simple and doesn't show up. Officially, because of the HTML5 standard, it is not recommended to write autoplay= "true" or controls= "true", which is used in previous versions of HTML5. When initializing, the following parameters are commonly used:

Https://github.com/videojs/video.js/blob/stable/docs/guides/options.md

AutoPlay

Auto Play

<AutoPlay >or{"autoplay": true}
preload

Pre-load Resources

<preload >or{"preload": "Auto"}
Poster

Video thumbnail image

< poster= "Myposter.jpg" ...>or{"poster": "Myposter.jpg"}  
Loop

Auto Cycle

<loop ... >or{"loop": "True"}
width

The width attribute sets the display width of the video.

<width= "640" ... >or{"width": 640}  
Height

The height attribute sets the display height of the video.

<height= "480" ... >or{"height": 480}  
Component Options

Functional Components (example shows how to remove the mute button)

You can set the "options for any" single player component. For instance, if wanted to remove muteToggle the button, which are a child controlBar of, you can just set that component to FA Lse

= Videojs (' Video-id', {  children: {ControlBar: {children: {Mutetogglefalse}}});  

The above code is equivalent to:

= Videojs (' Video-id', {  ControlBar: {Mutetogglefalse}});   

VIDEOJS has many components, such as sounds, play buttons, subtitles, time, progress bars, and so on, and their structure in HTML is similar to this:

Player    posterimage    texttrackdisplay    loadingspinner    bigplaybutton    controlbar        playtoggle        Fullscreentoggle        Currenttimedisplay        timedivider        durationdisplay        remainingtimedisplay        Progresscontrol            SeekBar              loadprogressbar              playprogressbar              seekhandle        volumecontrol            volumebar                Volumelevel                volumehandle        mutetoggle

This facilitates our own rewriting of styles and JS for control. Of course, most of the cases we do not need their own wheels, the official default skin has been done very beautiful.

Usually the HTML5 will load faster than flash, so we usually prefer to use HTML5, and write what we want to do in the callback. Like what:

Videojs ("Example_video_1"). Ready (function() {  varthis;   // Example:start playing the video.   Myplayer.play ();});

It should be stressed that if you use Flash first, then you in the local mode, you want to use HTTP access, otherwise you can not see anything.

For more API calls see here HTTPS://GITHUB.COM/VIDEOJS/VIDEO.JS/BLOB/STABLE/DOCS/API/VJS.PLAYER.MD

 methodsautoplaybufferedbufferedendbuf Feredpercentcancelfullscreen Deprecatedcontrolscurrentsrccurrenttimecurrenttypedisposedurationendederrorexitfullscreeninitisfullscreen  Deprecatedisfullscreenlanguageloadloopmutedpausepausedplayplaybackrateposterpreloadremainingtimerequestfullscreen Deprecatedrequestfullscreenseekingsrcvolumeaddchild Inheritedaddclass Inheritedbuildcssclass Inheritedchildren Inheritedcontentel inheritedcreateel inheriteddimensions Inheritedel inheritedenabletouchactivity inheritedgetChild Inheritedgetchildbyid inheritedhasclass inheritedheight inheritedhide inheritedid InheritedinitChildren Inheritedname inheritedoff Inheritedon inheritedone inheritedoptions inheritedplayer inheritedready Inheritedremovechild inheritedremoveclass inheritedshow Inheritedtrigger inheritedtriggerready inheritedwidth Inherited  

Here I say a few common methods: Clean dispose,hide () hide, show () display, play () play, pause () pause a few books on the almost.

The last thing to say is the event. The official alert events are as follows:

Eventsdurationchangeendedfirstplayfullscreenchangeloadedalldataloadeddataloadedmetadataloadstartpauseplayprogressseekedse Ekingtimeupdatevolumechangewaitingresize inherited

We often have play,pause,ended, which can help us deal with it when it is necessary. However, in practice, I find there are some inconsistencies between flash mode and HTML5 mode.

In flash mode, after the player pauses or hides, call the paused () method to error: VIDEOJS:Video.js:paused unavailable on Flash playback technology element.

After calling Hide (), the show () method is called, and in flash mode, playback is automatically called, and the HTML5 mode does not. For this, the workaround is to specify Autoplay:false in option so that the behavior is consistent.

An open source free cross-browser video player--videojs usage Introduction

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.