Heim >Web-Frontend >H5-Tutorial >Tutorial zur HTML5-Videowiedergabe

Tutorial zur HTML5-Videowiedergabe

小云云Original: 2017-11-28 09:51:254771Durchsuche

In Bezug auf die Videowiedergabe stoßen wir in der Welt der Entwicklung häufig darauf. In diesem Artikel werden wir die HTML5-Videowiedergabelösung vorstellen. Wir hoffen, dass jeder nach dem Studium dieses Kapitels bessere Kenntnisse über HTML5 hat Schreiben Sie auch in HTML5. Beenden Sie die Videowiedergabefunktion.

Wie wir alle wissen, gibt es zwei Arten der Anwendungsentwicklung: eine ist die native App und die andere ist die Web-App, also eine Anwendung, auf die über einen Browser zugegriffen wird.
HTML5 hat seinen einzigartigen Platz im Zeitalter des mobilen Internets, obwohl es viele Vorteile hat, obwohl die Entwicklungskosten der nativen APP hoch sind, ihre gute Benutzererfahrung und API vorhanden sind Die ökologische Kette usw. wird ihren langfristigen Wohlstand aufrechterhalten. Die beiden APPs werden sich gegenseitig ergänzen und nebeneinander existieren. Die Kosten für das Erlernen von HTML5 sind nicht hoch. Die Essenz von H5 besteht darin, dass Programmierer, die sich mit der Webentwicklung befasst haben, es mit ein wenig Studium beherrschen können.

Die Hauptforschung hier besteht darin, das Problem der Videowiedergabe durch die Anwendung von HTML5 zu lösen. Adobe hat das mobile Internet aufgrund strategischer Fehler vernachlässigt. Mobile Endgeräte unterstützen Flash nicht gut, insbesondere Apple-Terminals unterstützen Flash nicht (Apple-Computer und Notebooks unterstützen Flash). Flash wird in den meisten PC-seitigen Anwendungen verwendet und
Streaming-Medien können ein gutes interaktives Erlebnis bieten. Um Videos auf mobilen Geräten abzuspielen und anzuzeigen, haben wir uns eingehend mit HTML5 befasst und können mit HTML5 Videos direkt ohne Plug-Ins abspielen und können diese auch plattformübergreifend abspielen.

1. Technische Vorteile von HTML5
1 Für die Wiedergabe von Videos ist kein Plug-In erforderlich. Klicken Sie einfach, um sie anzusehen.
2 Plattformübergreifend, einfach zu aktualisieren, einfach zu warten und das Die Entwicklungskosten sind viel niedriger als bei nativen APPs
3 Ja Es verfügt über eine gute mobile Unterstützung, unterstützt Gesten, lokale 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
Der PC verwendet weiterhin Flash zum Abspielen, das mobile Endgerät verwendet jedoch HTML5 Es.
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 % der Formate belegt Videomarkt. 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.

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="Tutorial zur HTML5-Videowiedergabe" ></div> 
<div class="startBar"><img  src="Images/stop.jpg" border="0" id="imgStatus" alt="Tutorial zur HTML5-Videowiedergabe" ></div>
 <div class="nextBar"><img  src="Images/next.jpg" border="0" id="next" alt="Tutorial zur HTML5-Videowiedergabe" ></div>
 <div class="voiceContent"> <div class="voice"> <img  src="Images/voice.jpg" id="voiceImg" border="0" alt="Tutorial zur HTML5-Videowiedergabe" > </div> 
<div class="voiceline"> <div class="voicekuai">
</div> </div> </div> </div> </div>
 <!--播放器代码结束--></div> 
</body>
 </html>

4. HTML5-Entwicklung
Html5-Browser-Unterstützung
Die meisten Browser unterstützen HTML5 (außer Opera Mini)

Tutorial zur HTML5-Videowiedergabe

Datenquelle: http://caniuse.com/#cats=HTML5

MP4-Videounterstützung
Mainstream-Unterstützung mp4 (außer Oper)

Tutorial zur HTML5-Videowiedergabe

Datenquelle: http://caniuse.com/#feat=video

Der obige Inhalt bezieht sich auf die HTML5-Videowiedergabelösung, ich hoffe, sie kann allen helfen.

Verwandte Empfehlungen:

So schreiben Sie einen Lehrvideo-Player

Beispiel für ein HTML5-Videowiedergabe-Tutorial

Detaillierte Einführung in die HTML5-Videowiedergabe

Das obige ist der detaillierte Inhalt vonTutorial zur HTML5-Videowiedergabe. 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：Mehrere nützliche HTML5-Frameworks für die mobile EntwicklungNächster Artikel：Mehrere nützliche HTML5-Frameworks für die mobile Entwicklung

In Verbindung stehende Artikel

Mehr sehen