HTML5 Video Playback Solution

HTML5 always feel mysterious before studying. Recently through study and research HTML5 a bit of results, special summary share to everyone.
It is well known that application development is divided into two types: one is the native native app and the other is web app, which is a browser-accessible app.
HTML5 in the era of mobile interconnection, there is his unique use, although he has many advantages but it is not possible to completely replace the original app, the original app development cost is high, but its good user experience and API, the development of ecological chain, and so on, will maintain its long-term exuberant two apps will be complementary coexistence. The cost of learning HTML5 is not high, H5 is the essence of HTML has done Web development programmer, a little learning can be mastered.

The main research here is to solve the problem of video playback by applying HTML5. Because of the strategic error of the Adobe company, ignoring the mobile internet this piece, the mobile terminal on the flash support is not good, especially the Apple terminal does not support Flash (Apple Computer and notebook is support Flash). Most applications flash on the PC side,
Streaming media can also have a good interactive experience. In order to be able to play the display on the mobile side, we studied the HTML5 in depth, using HTML5 to play the video directly without the plugin, and to achieve playback across the platform.

First, HTML5 technology advantages
1 about video without plugin playback, click to see
2 cross-platform, good upgrade, good maintenance, development cost is much lower than native app
3 good support for mobile, support gestures, local storage and video continuation, etc., can be H5 to move their own website.
4 more concise code, better interaction
5 Support game development

Second, HTML5 play video
PC-side or flash playback, but the mobile side through the HTML5 way to do.
and HTML5 's video tag only supports MP4, WEBM, OGG three formats. All major browsers currently support the latest version of HTML5 (except Opera)

H. 80% already occupies the video market. If mobile app video, it is recommended to compile into 264 format, with good high compression ratio, high image quality.
H. Two is a new digital video coding standard jointly developed by the Joint Video Group (JVT), which is co-formed by a consortium of up to five organizations, which is the 10th part of ITU-T's H. x and ISO/IEC MPEG-4 Advanced Video Coding (advance CODING,AVC). Therefore, both MPEG-4 AVC, MPEG-4 Part 10, or ISO/IEC 14496-10, are referred to as H.

Third, HTML5 code demo

<! doctype html> < html >      < meta http-equiv=Content-Type content="text/html;charset=utf-8">      < script src="JavaScript/jquery-1.7.2.min.js"></ script >      < script src="JavaScript/jsPlayer.js"></ script >      < script src="JavaScript/dtooltip-min.js"></ script >      < link href="CSS/play.css?var=1121" rel="stylesheet" type="text/css">      < script type="text/javascript"> function browserRedirect() { var sUserAgent= navigator.userAgent.toLowerCase(); var bIsIpad= sUserAgent.match(/ipad/i) == "ipad"; var bIsIphoneOs= sUserAgent.match(/iphone os/i) == "iphone os"; var bIsMidp= sUserAgent.match(/midp/i) == "midp"; var bIsUc7= sUserAgent.match(/rv:1.2.3.4/i) == "rv:1.2.3.4"; var bIsUc= sUserAgent.match(/ucweb/i) == "ucweb"; var bIsAndroid= sUserAgent.match(/android/i) == "android"; var bIsCE= sUserAgent.match(/windows ce/i) == "windows ce"; var bIsWM= sUserAgent.match(/windows mobile/i) == "windows mobile"; if(bIsAndroid){ document.getElementById("a").style.display="block"; document.getElementById("b").style.display="none"; document.getElementById("c").style.display="none"; document.getElementById("d").style.display="none"; } else if (bIsIphoneOs || bIsMidp || bIsUc7 || bIsUc || bIsCE || bIsWM) { document.getElementById("b").style.display="block"; document.getElementById("d").style.display="none"; document.getElementById("a").style.display="none"; document.getElementById("c").style.display="none"; } else if(bIsIpad) { document.getElementById("c").style.display="block"; document.getElementById("a").style.display="none"; document.getElementById("b").style.display="none"; document.getElementById("d").style.display="none"; } else { document.getElementById("d").style.display="block"; document.getElementById("a").style.display="none"; document.getElementById("b").style.display="none"; document.getElementById("c").style.display="none"; } } window.onload=function(){browserRedirect();}      $(document).ready(                  function(){                      var ps=new jsPlayer("700","500","myVideo");                  }          ); </ script >      < head > < title >测试移动终端</ title > </ head > < body > < div id="a">< p >这是安卓手机</ p ></ div > < div id="b">< p >这是苹果手机</ p ></ div > < div id="c">< p >这是ipad</ p ></ div > < div id="d">< p >这是电脑</ p ></ div > < div style="width:700px;margin:auto;">      <!--播放器代码开始-->      < div class="playContent">          < div class="playScreen">              < video id="myVideo">                  < source src="Movie/th264.mp4" type="video/mp4">              </ video >          </ div >          < div class="proLines">              < div id="origin" class="arial">00:00:00</ div >              < div class="line">                  < div class="isPlayLine">                      < div class="currentCircle">                      </ div >                  </ div >              </ div >              < div id="duration" class="arial"></ div >          </ div >          < div class="playBars">              < div class="prevBar">< img src="Images/prev.jpg" border="0" id="prev"></ div >              < div class="startBar">< img src="Images/stop.jpg" border="0" id="imgStatus"></ div >              < div class="nextBar">< img src="Images/next.jpg" border="0" id="next"></ div >              < div class="voiceContent">                  < div class="voice">                      < img src="Images/voice.jpg" id="voiceImg" border="0">                  </ div >                  < div class="voiceline">                      < div class="voicekuai"></ div >                  </ div >              </ div >          </ div >      </ div >      <!--播放器代码结束--> </ div > </ body > </ html >

iv. development of HTML5
HTML5 Browser Support situation
Most browsers support HTML5 (except Opera Mini)

Data source: http://caniuse.com/#cats =HTML5

MP4 Video Support situation
Mainstream support MP4 (except Opera)


Data source: http://caniuse.com/#feat =video

References:
H. Eight won the video format war has been ten, four-fifths of the video used in this format
Http://www.36kr.com/p/70116.html

HTML5 Video Solution: Support ipad Safari, Firefox, Chrome, IE9876
Http://www.cnblogs.com/sink_cup/archive/2011/04/21/html5_video_ipad_firefox_chrome_ie9876_flash.html

Big browser Safari, Chrome, Firefox, Ie,opera support for HTML5 video
http://www.deepleo.com/archives/636
The latest versions of Safari, Chrome, Firefox, and Opera support some HTML5 features. Internet Explorer 9 will support some HTML5 features.

Mobile browser HTML5 Support status survey
Http://www.williamlong.info/archives/3075.html

How to check if the user's browser supports HTML5 video:
http://www.deepleo.com/archives/636

Tup Series Activity Eighth: HTML5 Technology Application Sharing
Http://tech.sina.com.cn/it/2011-03-22/19465317662.shtml

Analyze Youku HTML5 Address
http://blog.xiaohai.co/archives/youku-html5/

http://m.youku.com/
http://labs.3g.youku.com/ipad/Youku Open HTML5
Youku Mobile Web page design is more suitable for mobile browser viewing, concise atmosphere, program information comprehensive. Due to the strong application of HTML5 technology, save local resources, and do not have to load Flash plug-ins, click on the video can quickly watch.
and the perfect implementation of the immediate update, users no longer need to manage the application, re-download, there are any features of the application of the update, just open the browser, login can be easily implemented.
At the same time, with the full support of the HTML5 mobile website, also has the auto-resume function, that is, users can access the remote Storage in the "cloud" of various content, not limited by the location and equipment, anytime and anywhere to enjoy their favorite video program.

HTML5 Video Playback Solution