Home > Developer > Web Develop
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
AutoPlayAuto Play
<AutoPlay >or{"autoplay": true}Pre-load Resources
<preload >or{"preload": "Auto"}Video thumbnail image
< poster= "Myposter.jpg" ...>or{"poster": "Myposter.jpg"} Auto Cycle
<loop ... >or{"loop": "True"}The width attribute sets the display width of the video.
<width= "640" ... >or{"width": 640} The height attribute sets the display height of the video.
<height= "480" ... >or{"height": 480} 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
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
