Beispiel für ein HTML5-Videowiedergabe-Tutorial-H5-Tutorial-php.cn

Beispiel für ein HTML5-Videowiedergabe-Tutorial

零下一度

Freigeben： 2017-07-16 15:35:30

Original

2434 Leute haben es durchsucht

Die PC-Seite verwendet hauptsächlich die Flash-Wiedergabe, während die mobile Seite HTML5 verwendet. In diesem Artikel werden hauptsächlich die relevanten Informationen zur HTML5-Videowiedergabe vorgestellt, die einen gewissen Referenzwert haben.

Ich erinnere mich, dass es vor ein paar Monaten eine Neuigkeit gab, die besagte, dass YouTube das Einbetten von HTML5-Video-Tags unterstützt. Nun, ich habe gerade erst davon gehört, weil ich kein Mensch bin, der gut darin ist, die Firewall zu umgehen . Wie kann ich es nicht wissen.

Ich werde nicht viel über HTML5-Dinge sagen, die nichts mit dem Thema zu tun haben. Jeder hat von dem Video-Tag gehört. Die Funktion dieses Tags ist die gleiche wie das img-Tag im aktuellen HTML Sprache

1. Technische Vorteile von HTML5

1 Bezüglich der Videowiedergabe ohne Plug-Ins klicken Sie einfach zum Ansehen
2 Cross- Plattform, einfach zu aktualisieren und zu warten, die Entwicklungskosten sind viel niedriger als die der nativen APP
3. Gute Unterstützung für Mobilgeräte, Unterstützung von Gesten, lokaler Speicherung und Videowiedergabe usw. Sie können Ihre Website über H5 mobil machen .
4 Prägnanterer Code, bessere Interaktion
5 Unterstützung der Spieleentwicklung

2. HTML5-Videowiedergabe

Die PC-Version verwendet weiterhin Flash zum Abspielen, aber das mobile Endgerät verwendet dazu HTML5.
Der Video-Tag von HTML5 unterstützt nur drei Formate: mp4, webm und ogg. Derzeit unterstützen die neuesten Versionen aller gängigen Browser HTML5 (außer Opera).
H.264 hat 80 % des Videomarktes eingenommen. Wenn Sie Videos für mobile Anwendungen verwenden, wird empfohlen, sie im 264-Format zu kompilieren, das eine gute hohe Komprimierungsrate und eine hohe Bildqualität aufweist.
H.264 ist ein neuer digitaler Videokodierungsstandard, der gemeinsam von der Joint Video Group (JVT) formuliert und von zwei Organisationen gegründet wurde. Es handelt sich sowohl um H.264 von ITU-T als auch um MPEG-4 Advanced Part 10 of Advanced von ISO/IEC Videokodierung (AVC). Unabhängig davon, ob es sich um MPEG-4 AVC, MPEG-4 Part 10 oder ISO/IEC 14496-10 handelt, bezieht sich alles auf H.264.

Im Zeitalter von HTML5 braucht man im Grunde nur ein

Wenn jedoch die Realität ins Spiel kommt, müssen wir uns damit auseinandersetzen. Nun gibt es nur sehr wenige Browser, die den HTML5-Video-Tag unterstützen. Ich weiß, dass Chrome2 und Safari unterstützt werden

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>

Nach dem Login kopieren

Das obige ist der detaillierte Inhalt vonBeispiel für ein HTML5-Videowiedergabe-Tutorial. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!