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

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>

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>

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('iPhone') > -1 || u.indexOf('Mac') > -1) {  //苹果
                $("#vid" + Num).css("width", "100%");
                document.getElementById('vid' + Num).style.display = 'block';
                document.getElementById('vid' + Num).play();
            } else {  //安卓
            $("#vid" + Num).css({
                "width": $(".wrapperW").width(),
                "height": $(".wrapperW").height(),
                "left": ( $(".m_wraper").width() - $(".wrapperW").width() ) / 2
            });
                document.getElementById('vid' + Num).style.display = 'block';
                setTimeout(function () { document.getElementById('vid' + Num).play(); }, 1000);
            }

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

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

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>

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)!