Home > Article > Web Front-end > HTML5 video playback tutorial

HTML5 video playback tutorial

小云云Original: 2017-11-28 09:51:254677browse

Regarding video playback, we often encounter it in our development world. In this article, we will share with you the html5 video playback solution. I hope that after learning this chapter, everyone will have a better knowledge of html5 and can also write in html5. Exit video playback function.

As we all know, there are two types of application development: one is the native app and the other is the web app, which is an application accessed through a browser.
html5 has its unique place in the mobile Internet era. Although it has many advantages, it cannot completely replace the native APP. Although the development cost of the native APP is high, its good user experience and API, existing The development of ecological chains, etc. will maintain its long-term prosperity. The two APPs will complement each other and coexist. The cost of learning HTML5 is not high. The essence of H5 is HTML. Programmers who have done web development can master it with a little study.

The main research here is to solve the problem of video playback by applying html5. Adobe has neglected the mobile Internet due to strategic mistakes. Mobile terminals do not support flash well, especially Apple terminals do not support flash (Apple computers and notebooks support flash). Most flash applications on the PC side,
streaming media can have a good interactive experience. In order to play and display videos on mobile devices, we have studied and researched HTML5 in depth. We use HTML5 to play videos directly without plug-ins, and can also play them across platforms.

1. Technical advantages of html5
1 Regarding video playback without plug-ins, you can watch it by clicking
2 Cross-platform, easy to upgrade, easy to maintain, and the development cost is much lower than that of native APP
3 Yes It has good mobile support, supports 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
PC side still uses flash playback, but the mobile side uses html5 way to do it.
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><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" alt="HTML5 video playback tutorial" ></div> 
<div class="startBar"><img  src="Images/stop.jpg" border="0" id="imgStatus" alt="HTML5 video playback tutorial" ></div>
 <div class="nextBar"><img  src="Images/next.jpg" border="0" id="next" alt="HTML5 video playback tutorial" ></div>
 <div class="voiceContent"> <div class="voice"> <img  src="Images/voice.jpg" id="voiceImg" border="0" alt="HTML5 video playback tutorial" > </div> 
<div class="voiceline"> <div class="voicekuai">
</div> </div> </div> </div> </div>
 <!--播放器代码结束--></div> 
</body>
 </html>

4. HTML5 development
Html5 browser support
Most browsers support html5 (except opera mini)

HTML5 video playback tutorial

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

mp4 video support
The mainstream supports mp4 (except opera)

HTML5 video playback tutorial

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

The above content is about the html5 video playback solution, I hope Can help everyone.

Related recommendations:

How to write a teaching video player

html5 video playback tutorial example

Detailed introduction to HTML5 video playback

The above is the detailed content of HTML5 video playback tutorial. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Several useful HTML5 mobile development frameworksNext article：Several useful HTML5 mobile development frameworks

See more

HTML5 video playback tutorial

Related articles