HTML5 's vedio video playback

OriginalTalking about HTML5 video tag embeddingpinned May 18, 2015 16:01:26Hits: 13296

In front of the page how to embed Flash video, think of another problem, Flash format video on the phone to play, need to install Flash playback plug-in phone, and flash video absolutely can not play on the Apple phone, because Apple does not support Flash, Cause the flash foreground is worrying now. There are, of course, some plugins that can support Flash video on Apple phones.

We're going to talk about HTML5 's video tag. The power of HTML5 is beyond doubt, and as an apple-tailored front-end technology, now HTML5 support for the browser is getting better, and the support on the mobile side also makes me feel that nothing can be compared.

Embedding video in HTML5 is simple, just the following code:

<video id= "Media" width= "720" height= "+" controls>
<source src= "Http://minkbooks.com/content/trailer.mp4" >
<source src= "Http://minkbooks.com/content/trailer.ogg" >
</video>

Properties of the HTML5 tag:

• AutoPlay AutoPlay If this property appears, the video plays as soon as it is ready.
• Controls controls if this property appears, the control is displayed to the user, such as the play button.
• Height pixels settings for the video player.
• Loop loop If this property occurs, the media file starts playing again when it finishes playing.
• Muted muted specifies that the audio output of the video should be muted.
• The poster URL Specifies the image that is displayed when the video is downloaded, or the image that is displayed before the user clicks the play button.
• Preload preload if this property appears, the video loads when the page loads and prepares to play. If you use "autoplay", the property is ignored.
• src URL The URL of the video to play.
• Width pixels Sets the size of the video player.

 of course, what if you want to have a beautiful playback appearance? Then you can use the HTML5 player, there are many HTML5 players, such as http://www.cnblogs.com/lhb25/archive/2011/06/27/7- Great-html-5-video-player-scripts.htmlI think Videojs is a very good choice, the following is the introduction of the use of this player. Step one: Download Video.js and Video-js.css and video-js.swf in the official website The second step: introducing the head tag [HTML]View PlainCopyPrint?

2. <!--video.js HTML5 video player --
4. < Link  rel="stylesheet" type="text/css" href="assets/lib/css/video-js.css">
6. < Script src="assets/lib/js/jquery.js"></ Script>
8. T;script src="assets/lib/js/movive/video.js"></Script >
12. <!--IE Low version support -   
14. T;script src="assets/lib/js/movive/html5media.js"></ script >

   <!--video.js HTML5 video Player--    <link rel= "stylesheet" type= "Text/css" href= "Assets/lib/css/video-js.css" >  <script src= "assets/lib/js/jquery.js" ></script><script src= "assets/lib/js/movive/ Video.js "></script>    

Can see there is a Html5media.js class library, this class library is the support of the low version of IE, we all know that the support of IE to HTML5 is not very good, this look at the project needs can join. It can be downloaded directly online. Step three: Add the video tag in the body [HTML]View PlainCopyPrint?

2. < Video  id="Html5video" class="Video-js  Vjs-default-skin " preload controls autoplay width=" 100% "
4. Poster = "Assets/images/movie/poster.jpg" >    
6.              < source   id = "Src1"   src = "Assets/movie/video.mp4"   type = ' video/mp4; codecs= "avc1.42e01e, mp4a.40.2" '   />   
8.             < source   id = Span class= "Attribute-value" > "Src2"   src = Span class= "Attribute-value" > "ASSETS/MOVIE/ZHIYAN.OGV"   type = ' video/ogg; codecs= "Theora, vorbis" '   />   
10. < Source id="src3" src="ASSETS/MOVIE/LINYOUJIA.WEBM" type = ' video/webm; codecs= "VP8, Vorbis" '/>   
12. Your browser does not support the video tag.
14. </ Video >   

<video id= "Html5video" class= "Video-js Vjs-default-skin" preload controls AutoPlay  width= "100%" poster= "    Assets/images/movie/poster.jpg ">             <source id=" Src1 "src=" Assets/movie/video.mp4 "type=" VIDEO/MP4; codecs= "avc1.42e01e, mp4a.40.2" '/>            <source id= "Src2" src= "ASSETS/MOVIE/ZHIYAN.OGV" type= "Video/ogg; codecs=" Theora, Vorbis "'/>            <source id=" SRC3 "src=" ASSETS/MOVIE/LINYOUJIA.WEBM "Type= ' video/webm; codecs=" VP8, Vorbis "'/>    your browser does not support the video tag. </video>

HTML5 supports three formats of video: MP4,OGV, and WEBM. The first thing to do is to prepare a MP4 format video (H264), which can be used on an Apple device, second, to prepare a video in OGV format, to be used in Firefox, and finally to prepare a video of WEBM format, which can be used in Google Chrome. This ensures that almost all major browsers are supported. Here also to say a little more, may be the reason for the development of technology, a variety of browsers for the three format of support is not so absolute, such as: MP4 format of video, Google, Sogou, Firefox, mobile phone, etc. can play normally, the other two formats is generally the case. Also, the video tag support for videos is not so absolute, at least I put in the Wmv,avi format of the video can be played, interested students can try it, here I will not talk more.
Here to emphasize the point is the video preparation, we prepare MP4,OGV,WEBM format of the video, may meet the video is obviously MP4 format, why not play it? And some transcoding software transcoding video to MP4,OGV,WEBM format video is also unable to play, here may be the problem of transcoding, such as: MP4 requirements is h246, but according to the requirements of transcoding, may still not play. Here to the Heroes recommend a video conversion software, specifically tailored for HTML5: Freemake video Converter. Transcoding directly to HTML5 video translates to video in the MP4,OGV.WEBM three format and generates the corresponding code. Fourth Step: JS [HTML]View PlainCopyPrint?

1. < Script > _v_.options.flash.swf = "assets/lib/js/movive/video-js.swf"; </ Script >   

<script> _v_.options.flash.swf = "assets/lib/js/movive/video-js.swf";</script>

By adding this code, you can automatically switch to flash playback in an unsupported browser. Finally, after the server is deployed, the video may not play because we do not have the MIME type support configured in IIS, and the support for the MP4,OGV,WEBM three formats is configured so that the video will play properly. As to how to configure, Baidu search to know, there are many, and the best configuration of the file type to conform to the corresponding format, but I tried, found that the file type has no effect ... If after the configuration, still cannot play, then probably is the file type is wrong, depends on the situation.

Article Tags:VIDEOHTML5 Video Video-js Multi-platform video embeddingPersonal Category:Front-end Video

HTML5 's vedio video playback