App下載

在前端中使用HTML5加載音頻和視頻的方法分享!實(shí)現(xiàn)代碼分享!

我正好喜歡 2021-08-17 10:31:42 瀏覽數(shù) (2846)
反饋

隨著html5移動(dòng)端的不斷興起我們?cè)谑褂靡曨l和音頻都可以使用html5進(jìn)行實(shí)現(xiàn),那么今天我們就來(lái)說(shuō)說(shuō)有關(guān)于:“在前端中使用HTML5加載音頻和視頻的方法分享!”這方面的相關(guān)內(nèi)容!

【一、前言】

HTML5 特性,包括原生音頻和視頻支持而無(wú)需 Flash。

HTML5 <audio> 和 <video> 標(biāo)簽讓我們給站點(diǎn)添加媒體變得簡(jiǎn)單。我們只需要設(shè)置 src 屬性來(lái)識(shí)別媒體資源,包含 controls 屬性讓用戶可以播放和暫停媒體。

【二、嵌入視頻】

下面是在 Web 頁(yè)面中嵌入視頻文件最簡(jiǎn)單的形式:

<video src="img/sounds/mu04.mp3"  width="300" height="200" controls>

    Your browser does not support the <video> element.   

</video>

目前的 HTML5 規(guī)范草案還沒(méi)有指定瀏覽器應(yīng)該在 video 標(biāo)簽中支持哪種視頻格式。但是最常用的視頻格式是:

Ogg:帶有 Thedora 視頻編碼器和 Vorbis 音頻編碼器的 Ogg 文件。 mpeg4:帶有 H.264 視頻編碼器和 AAC 音頻編碼器的 MPEG4 文件。

我們可以使用帶有媒體類型和其他屬性的 <source> 標(biāo)簽指定媒體文件。video 元素允許使用多個(gè) source 元素,瀏覽器會(huì)使用第一個(gè)認(rèn)可的格式: 

<!DOCTYPE HTML>

<html>

<body>

   <video  width="300" height="200" controls autoplay>

       <source src="img/sounds/3.mp4" type="video/ogg" />

       <source src="img/sounds/3.mp4" type="video/mp4" />

       Your browser does not support the <video> element.

   </video>

</body>

</html>

【三、Video 屬性規(guī)范】

HTML5 video 標(biāo)簽可以使用多個(gè)屬性控制外觀和感覺(jué)以及各種控制功能:(參考百度)

【四、嵌入音頻】

HTML5 支持的 <audio> 標(biāo)簽用于在如下所示的 HTML 或 XHTML 文檔中嵌入語(yǔ)音內(nèi)容。

<audio src="img/sounds/mu04.mp3" controls autoplay>

    Your browser does not support the <audio> element.   

</audio>

當(dāng)前的 HTML 草案規(guī)范還沒(méi)有指定瀏覽器應(yīng)該在 audio 標(biāo)簽中支持哪種音頻格式。但是最常用的音頻格式是 ogg,mp3 和 wav。

我們可以使用帶媒體類型以及其他屬性的的 <source> 標(biāo)簽指定媒體。Audio 元素允許使用多個(gè) source 元素,并且瀏覽器會(huì)使用第一個(gè)認(rèn)可的格式:

<!DOCTYPE HTML>

<html>

<body>

   <video  width="300" height="200" controls autoplay>

       <source src="img/sounds/mu04.mp3" type="video/ogg" />

       <source src="img/sounds/mu04.mp3" type="video/mp4" />

       Your browser does not support the <video> element.

   </video>

</body>

</html>

Audio 屬性規(guī)范

HTML5 audio 標(biāo)簽可以使用多個(gè)屬性來(lái)控制外觀,感受以及各種控制功能:

【五、JavaScript 處理媒體事件】

HTML5 audio 和 video 標(biāo)簽可以用多個(gè)屬性利用 JavaScript 控制各種控制功能:

下面是一個(gè)允許播放給定視頻的示例:

<!DOCTYPE HTML>
<head>
<script type="text/javascript">
function PlayVideo(){
   var v = document.getElementsByTagName("video")[0];  
   v.play(); 
}
</script>
</head>
<html>
<body>
  <form>
   <video  width="300" height="200" src="img/sounds/3.mp4">
       Your browser does not support the <video> element.
   </video>
   <input type="button" onclick="PlayVideo();"  value="Play"/>555555555
   </form>
</body>
</html>

【六、總結(jié)】

本文基于html基礎(chǔ),介紹了對(duì)音頻<audio>標(biāo)簽<video>標(biāo)簽,如何嵌入視頻等一系列操作。進(jìn)行了詳細(xì)的一些講解,通過(guò)豐富的案例讓大家能夠更好的去理解HTML的用法,希望可以幫助大家更好的學(xué)習(xí)。

可以參數(shù)自己根據(jù)教程,自己加入一些屬性,運(yùn)行看看效果,會(huì)有意想不到的收獲。

那么到此我們就:“在前端中使用HTML5加載音頻和視頻的方法分享”這方面的相關(guān)內(nèi)容分享就到這里結(jié)束了,更多有關(guān)于html5這方面的使用我們都可以在W3Cschool中進(jìn)行學(xué)習(xí)和了解!


0 人點(diǎn)贊