suchen

Heim  >  Artikel  >  Web-Frontend  >  Beispiel für ein HTML5-Videowiedergabe-Tutorial

Beispiel für ein HTML5-Videowiedergabe-Tutorial

零下一度
零下一度Original
2017-07-16 15:35:302410Durchsuche

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 39000f942b2545a5315c57fa3276f220-Tag plus die src-Link-Adresse des Videos, um das Video abzuspielen, was für Entwickler wirklich „cool“ ist (im „The Myth“-Klassiker). Zeilen).

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>

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!

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Einführung in h5-Formulare und Beispiele für Probleme bei der FormularvalidierungNächster Artikel：Einführung in h5-Formulare und Beispiele für Probleme bei der Formularvalidierung

In Verbindung stehende Artikel

Mehr sehen