Home > Article > Web Front-end > HTML5 video playback tutorial example
The pc side mainly uses flash playback, and the mobile side uses html5. This article mainly introduces the relevant information of html5 video playback, which has certain reference value.
I remember a few months ago, there was news that YouTube supports HTML5 video embedding tag video. Well, I just heard about it, because I am not a person who is good at circumventing the firewall. How can I unknown.
I won’t say much about HTML5 things that are not related to the theme. Everyone has heard about the video tag. The function of this tag is the same as the img tag## in the current HTML language.
#1. Technical advantages of html5
2 Cross-platform, easy to upgrade, easy to maintain , the development cost is much lower than that of native APP
3 Good support for mobile, supporting gestures, local storage and video replay, etc. You can make your website mobile through H5.
4 More concise code, better interaction
5 Support game development
2. HTML5 video playback
The video tag of html5 only supports three formats: mp4, webm, and ogg. Currently, the latest versions of all mainstream browsers support html5 (except Opera)
H.264 has occupied 80% of the video market. If you use video for mobile applications, it is recommended to compile it into 264 format, which has a good high compression ratio and high image quality.
H.264 is a new digital video coding standard jointly formulated by the Joint Video Team (JVT) jointly established by two organizations. It is both ITU-T's H.264 and ISO/IEC's MPEG-4 Advanced Part 10 of Advanced Video Coding (AVC). Therefore, whether it is MPEG-4 AVC, MPEG-4 Part 10, or ISO/IEC 14496-10, it all refers to H.264.
3. 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> <p id="a"><p>这是安卓手机</p></p> <p id="b"><p>这是苹果手机</p></p> <p id="c"><p>这是ipad</p></p> <p id="d"><p>这是电脑</p></p> <p style="width:700px;margin:auto;"> <!--播放器代码开始--> <p class="playContent"> <p class="playScreen"> <video id="myVideo"> <source src="Movie/th264.mp4" type="video/mp4"> </video> </p> <p class="proLines"> <p id="origin" class="arial">00:00:00</p> <p class="line"> <p class="isPlayLine"> <p class="currentCircle"> </p> </p> </p> <p id="duration" class="arial"></p> </p> <p class="playBars"> <p class="prevBar"><img src="Images/prev.jpg" border="0" id="prev"></p> <p class="startBar"><img src="Images/stop.jpg" border="0" id="imgStatus"></p> <p class="nextBar"><img src="Images/next.jpg" border="0" id="next"></p> <p class="voiceContent"> <p class="voice"> <img src="Images/voice.jpg" id="voiceImg" border="0"> </p> <p class="voiceline"> <p class="voicekuai"></p> </p> </p> </p> </p> <!--播放器代码结束--> </p> </body> </html>
The above is the detailed content of HTML5 video playback tutorial example. For more information, please follow other related articles on the PHP Chinese website!