Home > Developer > Web Develop
Video.js is a popular HTML5 video player plugin. It is ideal for playing video on mobile (such as Web pages), powerful, and support downgrade to Flash, compatible with IE8. Official website: http://videojs.com/git&demo:http://files.cnblogs.com/files/stoneniqiu/video-js-5.11.4.zip
Take a look at the default example:
<Head> <title>Video.js | HTML5 Video Player</title> <Linkhref= "Http://vjs.zencdn.net/5.0.2/video-js.css"rel= "stylesheet"> <Scriptsrc= "Http://vjs.zencdn.net/ie8/1.1.0/videojs-ie8.min.js"></Script> <Scriptsrc= "Http://vjs.zencdn.net/5.0.2/video.js"></Script></Head><Body> <VideoID= "Example_video_1"class= "Video-js Vjs-default-skin"controls preload= "None"width= "640"Height= " the"Poster= "Http://vjs.zencdn.net/v/oceans.png"Data-setup="{}"> <Sourcesrc= "Http://vjs.zencdn.net/v/oceans.mp4"type= "Video/mp4"> <Sourcesrc= "HTTP://VJS.ZENCDN.NET/V/OCEANS.WEBM"type= "VIDEO/WEBM"> <Sourcesrc= "HTTP://VJS.ZENCDN.NET/V/OCEANS.OGV"type= "Video/ogg"> < TrackKind= "captions"src=".. /SHARED/EXAMPLE-CAPTIONS.VTT "Srclang= "en"label= "中文版"></ Track> <!--Tracks need an ending tag thanks to IE9 - < TrackKind= "Subtitles"src=".. /SHARED/EXAMPLE-CAPTIONS.VTT "Srclang= "en"label= "中文版"></ Track> <!--Tracks need an ending tag thanks to IE9 - <Pclass= "Vjs-no-js">To view this video, enable JavaScript, and consider upgrading to a Web browser that<ahref= "http://videojs.com/html5-video-support/"Target= "_blank">Supports HTML5 video</a></P> </Video></Body>View Code
Controls represent the control bar, Prload: Preload, poster represents the original displayed picture. Data-set supports setting some parameters with JSON. Source Needless to say, track refers to subtitles.
That's the way it is, but in practice we have other needs.
No subtitles:Need to apply Novtt JS, in the Alt file of the demo. In this way, there is no choice of letters in the video control bar. Of course you no longer need the track element in the page.
Wide-Height Adaptive:<href= "~/js/video-js-5.11.4/alt/video-js-cdn.min.css" rel= " Stylesheet "/><src=" ~/js/video-js-5.11.4/alt/ Video.novtt.min.js "></script>
Start using CSS to set your own, and find out how it has no effect. The video element is different from the normal element, and it is necessary to achieve the response width by setting the ratio of the intrinsic elements. Video.js is available in two ways.
JS: Set a fluid to true.
var true function () { console.log (' Good to go! ') ); This // If you don ' t trust AutoPlay for some reason })But this also needs to set a starting width of the video element, otherwise the beginning of the picture is not visible.
CSS: You can add styles directly. There are three kinds of. Vjs-fluid,.vjs-4-3,.vjs-16-9 the first of which it automatically calculates, followed by two specified ratios. Styles also need to be set to start wide to display pictures
<VideoID= "Video"class= "Video-js vjs-default-skin vjs-fluid"Poster= "Http://vjs.zencdn.net/v/oceans.png" width= "375" height= "$" controls preload= "None"Data-setup= ' {"HTML5": {"Nativetexttracks": false}} '> <Sourcesrc= "@Model. Url"type= "Video/mp4"> <Pclass= "Vjs-no-js">Video playback requires JavaScript enabled, recommended use<ahref= "http://videojs.com/html5-video-support/"Target= "_blank">Support HTML5</a>Browser access.</P> </Video>Event concerns:
We generally focus on starting, pausing, and ending these three events
varPlayer = 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 playback '); }); Player.on (' Pause ',function() {Console.log (' Pause playback '); }); Player.on (' Ended ',function() {Console.log (' End Play '); });
There are also update events:
function () { console.log (Player.currenttime ()); });You can determine whether the video ends by judging whether the current time is equal to the total time:
function () { // if currenttime () = = = Duration (), the video has finished playing if (player.duration ()! = 0 && player.currenttime () = = = player.duration () ) {// end of play } });There are predecessors who pointed out that the ended event did not trigger correctly on the Android device (first prepared).
MIME type settingsThe default IIS MIME settings do not increase the MP4 type, there is no problem with local playback, but there is a 404 error on the server. This requires MIME to be set in IIS:
Common video formats:
The FLV format is joined by the associated extension:. flv, Content type: Application/octet-stream
F4V format is extension:. F4V, Content type: Application/octet-stream
MP4 format is extension:. mp4, Content type: Video/mp4
OGV format is extension:. OGV, Content type: Video/ogg
WEBM format is extension:. WEBM, Content type: VIDEO/WEBM
Restart IIS to take effect after setup.
The official gave a Codepen address http://codepen.io/heff/pen/EarCt can edit to play. The main is the play button, control bar and progress bar. The default is the above.
And this one: Http://codepen.io/zanechua/pen/GozrNe sublimevideo.
Flash settingsPlayback technology is used to play a video or audio file in a browser or plug-in, and if it is H5 will use video or music elements, and if it is flash, a Flash player will be defined. Not only flash, but also support Silverlight, QuickTime and other technology playback. Data-setup can be defined directly in the element. Specifies the supported technologies.
<data-setup["HTML5", "flash", "Other supported Tech"]} '
or use javascript:
Videojs ("VideoID", { techorder: ["HTML5", "flash", "Other supported Tech"]});The default rule here is that it will be played with the first technique, no longer using the options that follow. For example, above HTML5 is written in the first place, will play all the video with HTML5. If we want flash first, put it in front:
Data-setup= ' {"Techorder": ["Flash", "HTML5"]} 'In the page element you will find that Video.js gives us the use of Flash objects.
Auto Play:Add the AutoPlay attribute to the video element, or add autoplay:true to JS
<id= "video" autoplay poster= "/images/bk.png" Width= "375" height= " All" controls preload= "None" > </video>
Or
var function () { console.log (' Good to go! ') ); // This.play ();//Insurance You can also actively call play () });AutoPlay is always annoying, and vice versa is to delete the AutoPlay property or set it to false.
Other:Video.js support extension, easy to use.
// defines a plug-in function Exampleplugin (options) { th is on (' Play ', function (e) {cons Ole.log ( ' playback has started! ' ); }); // register videojs.plugin (' Exam Pleplugin ' // use Player.exampleplugin ({ Exampleoption: true }); The API for the player can be called directly inside the plugin. There is a playlist plug-in that can be researched, if you need a playlist. Https://github.com/brightcove/videojs-playlist and http://videojs.com/advanced/have the same effect:
Official documents:
Http://docs.videojs.com/docs
Reference blog:
Http://www.tuicool.com/articles/7jYvQrR
http://blog.videojs.com/Video-js-5-s-fluid-mode-and-playlist-picker/
Http://alistapart.com/article/creating-intrinsic-ratios-for-video
video.js--great H5 Video player
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
