HTML5實戰與剖析之媒體元素(1、video標籤與audio標籤簡介)-H5教程-PHP中文網

HTML5實戰與剖析之媒體元素(1、video標籤與audio標籤簡介)

黄舟

發布： 2017-02-13 13:26:05

原創

1772 人瀏覽過

　　隨著HTML5的到來，flash在手機端全部不能得到支持，這就使一項以flash製作的音樂播放和視頻播放只能用HTML5中的媒體標籤video標籤和audio標籤來製作了。很巧的是，行動端對HTML5中的媒體標籤video標籤和audio標籤支援的非常好。這就使HTML5在行動端很流行。

　　video標籤和audio標籤也提供了很實用的JavaScript API，允許建立自訂的控制項。兩個標籤的用法如下。

　　HTML代碼

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

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

登入後複製

　　使用video標籤和audio標籤的時候，要包含src屬性，指向要載入的媒體檔案。也可以設定寬度(width)和高度(height)屬性用來指定播放器大小。在載入影片內容期間顯示一幅圖像可以在poster屬性指定圖像的URI。另外標籤中有controls屬性，這個屬性意味著瀏覽器應該顯示UI控件，可以方便使用者直接操作媒體。位於開始和結束標籤之間的任何內容都是作為後備內容，在瀏覽器不支援這兩種媒體元素的情況下顯示。

　　正因為不是所有瀏覽器支援的媒體來源不一樣，所以要用多個source標籤進行分別寫。小例子如下。

　　HTML代碼

<!-- 音频标签 -->
<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>

登入後複製

　　支援video標籤和audio標籤的瀏覽器有Firefox 3.5+、Oper　支援video標籤和audio標籤的瀏覽器有Firefox 3.5+、Oper　支援video標籤和audio標籤的瀏覽器有Firefox 3.5+、Opera 10.5+、TIE9+iS、WebK、cEp、TES.

　　HTML5實戰與剖析之媒體元素(1、video標籤和audio標籤簡介)就為大家介紹完了，媒體標籤在HTML5中算是得到了很好的支持，所以用的比較多。更多有關HTML5的相關知識盡在夢龍小站，感謝大家的支持。

新加入的影片播放方法

JavaScript程式碼

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%");
        }

登入後複製

HTML 程式碼

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

登入後複製

簡介與標籤

HTML 程式碼

rrreee

文標籤的標籤

內容，更多相關內容請關注PHP中文網（m.sbmmt.com）！

🎜🎜