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= "264"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" < a href= "/HTTP/ videojs.com/html5-video-support/" Target=" _blank " Span style= "color: #0000ff;" >>supports HTML5 video</a ></p> </video></ body>
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/><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.
function () { console.log (' Good to go! ' // 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-skinVjs-fluid "Poster= "Http://vjs.zencdn.net/v/oceans.png"Width= "375"Height= "200"Controls preload= "None"Data-setup= ' {"HTML5": {"Nativetexttracks": false}} '><SourceSrc= "@Model. Url"Type= "Video/mp4"> <p class= "Vjs-no-js" > play video requires JavaScript enabled, recommended <a href= "/HTTP/ videojs.com/html5-video-support/" Target=" _blank " Span style= "color: #0000ff;" >> supports Html5</a</p> </video> Event concerns:
We generally focus on starting, pausing, and ending these three events
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 () {cons Ole.log (' Start/Resume play '); }); Player.on (' pause ', function () {console.log (' pause play ');}); 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 () = = =// 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= "$" Controls preload= "None"</video>
Or
function () { console.log (' Good to go! ' ); / /this.play ();//Insurance You can also invoke 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) { function (e) {Console.log (' playback has started! ' // register Videojs.plugin (' Exampleplugin '//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
Your attention and support are my greatest motivation for writing.
Book Hill has a road group: 452450927
Source: http://www.cnblogs.com/stoneniqiu/
Github:https://github.com/stoneniqiu
"Oriental Wealth Recruitment" "Internet finance"-more than three years of web front end,. NET, test, application operations. Interested resume can be delivered [email protected], you can add QQ contact.
This article is copyrighted by the author and the blog Park, welcome reprint, but without the consent of the author must retain this statement, and on the article page
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
