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

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

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

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

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

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

　　1. 獲取文件的URL

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

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

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

圖3 mp3外鏈地址

需要注意的是，如果音視頻外鏈所在的網(wǎng)站變動，外鏈地址將會失效，這樣的外鏈地址的是不穩(wěn)定的，因此我們在設計網(wǎng)頁時盡量少用外鏈的音視頻文件。

2. 插入文件URL

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

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

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

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

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

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

　　運用示例代碼，對應效果如圖4所示。

　　圖4 調用網(wǎng)絡視頻文件

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

　　注意：

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

猜你喜歡

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

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

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

黑馬程序員web前端培訓課程