溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

在前端中如何使用HTML5加載音頻和視頻

發(fā)布時(shí)間：2022-02-23 09:50:12 來源：億速云 閱讀：227 作者：小新 欄目：開發(fā)技術(shù)

這篇文章將為大家詳細(xì)講解有關(guān)在前端中如何使用HTML5加載音頻和視頻，小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。

【一、前言】

HTML5 特性，包括原生音頻和視頻支持而無需 Flash。

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

【二、嵌入視頻】

下面是在 Web 頁面中嵌入視頻文件最簡單的形式：

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

    Your browser does not support the <video> element.   

</video>

在前端中如何使用HTML5加載音頻和視頻

目前的 HTML5 規(guī)范草案還沒有指定瀏覽器應(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è)屬性控制外觀和感覺以及各種控制功能：（參考百度）

在前端中如何使用HTML5加載音頻和視頻

【四、嵌入音頻】

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

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

    Your browser does not support the <audio> element.   

</audio>

當(dāng)前的 HTML 草案規(guī)范還沒有指定瀏覽器應(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è)屬性來控制外觀，感受以及各種控制功能：

在前端中如何使用HTML5加載音頻和視頻

【五、JavaScript 處理媒體事件】

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

在前端中如何使用HTML5加載音頻和視頻

下面是一個(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>

關(guān)于“在前端中如何使用HTML5加載音頻和視頻”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，使各位可以學(xué)到更多知識(shí)，如果覺得文章不錯(cuò)，請(qǐng)把它分享出去讓更多的人看到。

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場，如果涉及侵權(quán)請(qǐng)聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手