Heim > Web-Frontend > H5-Tutorial > Hauptteil

HTML5-Übung und Analyse von Medienelementen (1. Einführung in Video-Tags und Audio-Tags)

黄舟
Freigeben: 2017-02-13 13:26:05
Original
1754 Leute haben es durchsucht

Mit der Einführung von HTML5 kann Flash auf Mobiltelefonen nicht mehr unterstützt werden. Dies bedeutet, dass in Flash erstellte Musik- und Videowiedergabe nur mit den Medien-Tags Video-Tag und Audio-Tag in HTML5 erfolgen kann. Zufälligerweise unterstützt das mobile Endgerät die Medien-Tags Video-Tag und Audio-Tag in HTML5 sehr gut. Dies macht HTML5 auf mobilen Geräten sehr beliebt.

Das Video-Tag und das Audio-Tag bieten außerdem eine sehr nützliche JavaScript-API, die die Erstellung benutzerdefinierter Steuerelemente ermöglicht. Die Verwendung der beiden Tags ist wie folgt.

 HTML-Code

<!-- 视频标签 -->
<video src="meng.ogg" id="myVideo">视频不支持</video>

<!-- 音频标签 -->
<audio src="long.mp3" id="myAudio">音频不支持</audio>
Nach dem Login kopieren

Bei Verwendung des Video-Tags und des Audio-Tags müssen Sie das src-Attribut einschließen und zeigen Sie auf Die zu ladende Mediendatei. Sie können auch die Attribute „Breite“ und „Höhe“ festlegen, um die Größe des Players festzulegen. Beim Anzeigen eines Bildes beim Laden von Videoinhalten kann der URI des Bildes im Posterattribut angegeben werden. Darüber hinaus gibt es im Tag ein Steuerelement-Attribut. Dieses Attribut bedeutet, dass der Browser UI-Steuerelemente anzeigen sollte, um Benutzern die direkte Bedienung der Medien zu erleichtern. Alles zwischen den öffnenden und schließenden Tags wird als Fallback-Inhalt verwendet und angezeigt, wenn der Browser keines der Medienelemente unterstützt.

Gerade weil nicht alle Browser unterschiedliche Medienquellen unterstützen, müssen mehrere Quell-Tags separat geschrieben werden. Ein kleines Beispiel ist wie folgt.

 HTML-Code

<!-- 音频标签 -->
<audio id="audio">
	<source id="s1" src="meng.mp3"></source>
	<source id="s2" src="meng.ogg"></source>
	音频不支持
</audio>

<!-- 视频标签 -->
<video id="video">
	<source id="s1" src="meng.mp3"></source>
	<source id="s2" src="meng.ogg"></source>
	视频不支持
</video>
Nach dem Login kopieren

Zu den Browsern, die das Video-Tag und das Audio-Tag unterstützen, gehören Firefox 3.5+ und Opera 10.5+, IE9+, Safari 4+, Chrome, Safari für iOS und WebKit für Android.

Der eigentliche HTML5-Kampf und die Analyse von Medienelementen (1. Einführung in Video-Tags und Audio-Tags) wurden in HTML5 gut unterstützt und werden daher häufiger verwendet. Weitere relevante Informationen zu HTML5 finden Sie auf der Menglong-Website. Vielen Dank für Ihre Unterstützung.


Neu hinzugefügte Videowiedergabemethode

JavaScript-Code

function bofangshipin(Num) {
            var u = navigator.userAgent;
            if (u.indexOf(&#39;iPhone&#39;) > -1 || u.indexOf(&#39;Mac&#39;) > -1) {  //苹果
                $("#vid" + Num).css("width", "100%");
                document.getElementById(&#39;vid&#39; + Num).style.display = &#39;block&#39;;
                document.getElementById(&#39;vid&#39; + Num).play();
            } else {  //安卓
            $("#vid" + Num).css({
                "width": $(".wrapperW").width(),
                "height": $(".wrapperW").height(),
                "left": ( $(".m_wraper").width() - $(".wrapperW").width() ) / 2
            });
                document.getElementById(&#39;vid&#39; + Num).style.display = &#39;block&#39;;
                setTimeout(function () { document.getElementById(&#39;vid&#39; + Num).play(); }, 1000);
            }

        }
        document.getElementById(&#39;vid&#39; + 1).addEventListener("ended", end_playing, false);
        document.getElementById(&#39;vid&#39; + 1).addEventListener("pause", end_playing, false);
        document.getElementById(&#39;vid&#39; + 2).addEventListener("ended", end_playing, false);
        document.getElementById(&#39;vid&#39; + 2).addEventListener("pause", end_playing, false);
        document.getElementById(&#39;vid&#39; + 3).addEventListener("ended", end_playing, false);
        document.getElementById(&#39;vid&#39; + 3).addEventListener("pause", end_playing, false);
        function end_playing() {
            document.getElementById(&#39;vid&#39; + 1).style.display = &#39;none&#39;;
            document.getElementById(&#39;vid&#39; + 2).style.display = &#39;none&#39;;
            document.getElementById(&#39;vid&#39; + 3).style.display = &#39;none&#39;;

            $("#vid" + 1).css("width", "0%");
            $("#vid" + 2).css("width", "0%");
            $("#vid" + 3).css("width", "0%");
        }	
Nach dem Login kopieren


HTML-Code

<video src="images/sanxing.mp4"  id="vid1" controls autoplay  style="position: absolute; z-index:100;  left: 0px; display:none" name="vid1">
     <source src="images/sanxing.mp4"></source>
  </video>
Nach dem Login kopieren



Das Obige ist der Inhalt des tatsächlichen HTML5-Kampfes und der Analyse von Medienelementen (1. Einführung in Video-Tags und Audio-Tags für weitere verwandte Inhalte). Bitte achten Sie auf PHP Chinese Net (www.php.cn)!


Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
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
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!