web前端怎樣嵌入網(wǎng)絡(luò)中的音視頻文件？

　　在為網(wǎng)頁(yè)嵌入音視頻文件時(shí)，我們通常會(huì)調(diào)用本地的音視頻文件，例如下面的示例代碼。

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

　　在上面的示例代碼中，“music/1.mp3”表示路徑為本地music文件夾中名稱為“1.mp3”的音頻文件。調(diào)用本地音視頻文件雖然方便，但需要使用者提前準(zhǔn)備好文件(需要下載文件，上傳文件等操作)，操作十分繁瑣。這時(shí)為src屬性設(shè)置一個(gè)完整的URL，直接調(diào)用網(wǎng)絡(luò)中的音、視頻文件，就可以化繁為簡(jiǎn)。例如下面的示例代碼：

src="http://www.0dutv.com/plug/down/up2.php/3589123.mp3"

　　在上面的示例代碼中，“http://www.0dutv.com/plug/down/up2.php/3589123.mp3”就是調(diào)用音頻文件的URL。然而該如何獲取某個(gè)音視頻文件的URL呢?下面我們演示一下獲取某個(gè)音頻文件URL，具體步驟如下。

　　1. 獲取文件的URL

　　打開(kāi)網(wǎng)頁(yè)，在搜索欄(百度、360等搜索欄)輸入關(guān)鍵詞“mp3外鏈”，頁(yè)面中會(huì)出現(xiàn)許多mp3外鏈網(wǎng)站，如圖1所示。打開(kāi)任意一個(gè)網(wǎng)站(例如紅框標(biāo)識(shí)的網(wǎng)站)，進(jìn)入到該網(wǎng)站首頁(yè)，如圖2所示。點(diǎn)擊任意一首歌曲，可進(jìn)入該歌曲的詳情頁(yè)，詳情頁(yè)會(huì)列出mp3的外鏈地址，如圖3所示。

圖1 搜索mp3外鏈網(wǎng)站

圖2 進(jìn)入mp3外鏈網(wǎng)站

圖3 mp3外鏈地址

需要注意的是，如果音視頻外鏈所在的網(wǎng)站變動(dòng)，外鏈地址將會(huì)失效，這樣的外鏈地址的是不穩(wěn)定的，因此我們?cè)谠O(shè)計(jì)網(wǎng)頁(yè)時(shí)盡量少用外鏈的音視頻文件。

2. 插入文件URL

選中mp3的外鏈地址并復(fù)制。復(fù)制紅框標(biāo)示的外鏈地址，粘貼到音頻文件的示例代碼中，具體代碼如下。

<audio src="http://www.0dutv.com/plug/down/up2.php/3589123.mp3" controls="controls" >瀏覽器不支持audio標(biāo)簽</audio>

　　在上面的示例代碼中，“http://www.0dutv.com/plug/down/up2.php/3589123.mp3”為可以訪問(wèn)的音頻文件URL。

　　調(diào)用網(wǎng)絡(luò)視頻文件的方法和調(diào)用音頻文件方法類(lèi)似，也需要獲取相關(guān)視頻文件的URL地址，然后通過(guò)相關(guān)代碼插入視頻文件即可，具體示例代碼如下：

<video src="http://www.w3school.com.cn/i/movie.ogg"  controls="controls">調(diào)用網(wǎng)絡(luò)視頻文件</video>

　　在上面的示例代碼中"http://www.w3school.com.cn/i/movie.ogg"即為當(dāng)前可以訪問(wèn)的互聯(lián)網(wǎng)視頻文件的URL地址。

　　運(yùn)用示例代碼，對(duì)應(yīng)效果如圖4所示。

　　圖4 調(diào)用網(wǎng)絡(luò)視頻文件

　　值得一提的是，調(diào)用網(wǎng)絡(luò)音視頻文件的方法雖然簡(jiǎn)單易用，但是當(dāng)鏈入的音、視頻文件所在的網(wǎng)站出現(xiàn)問(wèn)題時(shí)，我們調(diào)用的URL地址也會(huì)失效。

　　注意：

　　在網(wǎng)頁(yè)中嵌入音頻或視頻文件時(shí)，一定要注意版權(quán)問(wèn)題，我們盡量選擇一些授權(quán)使用的音頻或視頻文件。

猜你喜歡

HTML5中怎樣嵌入視頻和音頻？

好用的前端開(kāi)發(fā)工具：這四款你必須知道！

H5如何嵌入視頻？[web前端開(kāi)發(fā)]

黑馬程序員web前端培訓(xùn)課程