首頁 > 六六互聯(lián) > 嵌入視頻和音頻

嵌入視頻和音頻

作者:zhushican 丨時間:2022年11月02日丨分類：六六互聯(lián)

長期出售外貿(mào)服務(wù)器

嵌入視頻和音頻

1.在HTML5中嵌入視頻

在HTML5中，video標(biāo)簽用于定義播放視頻文件的標(biāo)準(zhǔn)，它支持三種視頻格式，分別為Ogg、WebM和MPEG4，其基本語法格式如下：

在上面的語法格式中，src屬性用于設(shè)置視頻文件的路徑，controls 屬性用于為視頻提供播放控件，這兩個屬性是video元素的基本屬性。

下面通過案例2-47來演示嵌入視頻的方法，如圖2-50所示。

例2-47 example47

<!DOCTYPE html>
<html>
<head>
     <meta charset="utf-8">
     <title>在HTML5中嵌入視頻</title>
</head>
<body>
     <video src="video/pian.mp4" controls="controls">

瀏覽器不支持video標(biāo)簽</video>
<video src="video/mailang.webm" controls="controls" width="300px" height="300px">瀏覽器不支持video標(biāo)簽</video>
</body>
</html>

嵌入視頻和音頻

圖2-50 HTML5中嵌入視頻

值得一提的是，在video元素中還可以添加其他屬性，來進(jìn)一步優(yōu)化視頻的播放效果，具體如下表2-12所示。

表2-12video元素中還可以添加其他屬性

屬性	值	描述
autoplay	autoplay	當(dāng)頁面載入完成后自動播放視頻。
loop	loop	視頻結(jié)束時重新開始播放。
preload	preload	如果出現(xiàn)該屬性，則視頻在頁面加載時進(jìn)行加載，并預(yù)備播放。如果使用 "autoplay"，則忽略該屬性。
poster	url	當(dāng)視頻緩沖不足時，該屬性值鏈接一個圖像，并將該圖像按照一定的比例顯示出來。

2.在HTML5中嵌入音頻

在HTML5中，audio標(biāo)簽用于定義播放音頻文件的標(biāo)準(zhǔn)，它支持三種音頻格式，分別為Ogg、MP3和wav，其基本格式如下：

在上面的基本格式中，src屬性用于設(shè)置音頻文件的路徑，controls 屬性用于為音頻提供播放控件，這和video元素的屬性非常相似。同樣< audio >和</ audio >之間也可以插入文字，用于不支持audio元素的瀏覽器顯示。

下面通過案例2-48來演示嵌入音頻的方法，如例2-51所示。

例2-48 example48.html

<!DOCTYPE html>

<html>

<head>

<title>在HTML5中嵌入音頻</title>

</head>

<body>

<audio src="music/1.mp3" controls="controls">瀏覽器不支持audio標(biāo)簽</audio>

</body>

</html>

嵌入視頻和音頻

圖2-51 HTML5中嵌入音頻

值得一提的是，在audio元素中還可以添加其他屬性，來進(jìn)一步優(yōu)化音頻的播放效果，具體如下表2-13所示。

表2-13audio元素中還可以添加其他屬性

屬性	值	描述
autoplay	autoplay	當(dāng)頁面載入完成后自動播放音頻。
loop	loop	音頻結(jié)束時重新開始播放。
preload	preload	如果出現(xiàn)該屬性，則音頻在頁面加載時進(jìn)行加載，并預(yù)備播放。如果使用 "autoplay"，則忽略該屬性。