HTML5 video playback solution

Time:2021-3-3

HTML5 always feels mysterious before learning. Recently, through learning and researching HTML5, I have some achievements, which I would like to summarize and share with you.
As we all know, there are two kinds of application development: one is native app, the other is web app, which is the application accessed through browser.
HTML5 has its unique role in the era of mobile Internet. Although it has many advantages, it can not completely replace the native app. Although the development cost of native app is high, its good user experience, API and existing development ecological chain will maintain its long-term prosperity. The two kinds of 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 using HTML5. Adobe company ignored the mobile Internet because of its strategic mistakes. Mobile terminals do not support flash well, especially Apple terminals do not support flash (Apple computers and laptops support flash). Flash for most PC applications,
Streaming media can have a good interactive experience. In order to play the display on the mobile terminal, we deeply studied HTML5. Using HTML5, we can play the video directly without plug-ins, and also play it across platforms.

1、 Advantages of HTML5 Technology
About the video without plug-in play, click to see
2. It is cross platform, easy to upgrade and maintain, and the development cost is much lower than that of native app
3 good support for mobile, support gesture, local storage and video continuation, etc. you can move your website through H5.
4 more concise code, better interaction
5 support game development

2、 HTML5 playing video
Flash is still used in PC, but HTML5 is used in mobile.
The video tag of HTML5 only supports three formats: MP4, WebM and Ogg

H. 264 has occupied 80% of the video market. If the mobile application video, it is recommended to compile into 264 format, with good high compression ratio and high image quality.
H. 264 is a new digital video coding standard jointly developed by the joint video group (JVT) of two organizations. It is not only ITU-T’s H.264, but also the 10th part of ISO / IEC’s MPEG-4 advanced video coding (AVC). Therefore, both MPEG-4 AVC, MPEG-4 Part 10 and ISO / IEC 14496-10 refer to H.264.

3、 HTML 5 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 > testing mobile terminals
</head>
<body>
< div id = "a" > < p > this is an Android phone < / P > < / div >
< div id = "B" > < p > this is apple < / P > < / div >
< div id = "C" > < p > this is iPad < / P > < / div >
This is a computer
<div style="width:700px;margin:auto;">
    <! -- player code start -- >
    <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>
    <! -- end of player code -- >
</div>
 
</body>
 
</html>

4、 Development of HTML5
HTML 5 browser support
Most browsers support HTML5 (except Opera Mini)

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

Mp4 video support
Mainstream all support MP4 (except Opera)

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

Recommended Today

Use of Android WebView (super detailed usage)

1.1 overview of WebView Android WebView is a special view on the Android platform. It can be used to display web pages. This WebView class can be used to display only one online web page in the app. Of course, it can also be used to develop browsers. The internal implementation of WebView uses WebKit […]