教育行業(yè)A股IPO第一股(股票代碼 003032)

全國咨詢/投訴熱線:400-618-4000

HTML5怎樣直接調(diào)用網(wǎng)絡(luò)音頻視頻文件?

更新時間:2020年12月23日16時04分 來源:傳智教育 瀏覽次數(shù):

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

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

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

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

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

  1. 獲取文件的URL

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

1608708875198_11.png

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

1608708940354_12.png
圖2 進入mp3外鏈網(wǎng)站
1608708960956_13.png

圖3 mp3外鏈地址

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

2. 插入文件URL

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

<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。

  調(diào)用網(wǎng)絡(luò)視頻文件的方法和調(diào)用音頻文件方法類似,也需要獲取相關(guān)視頻文件的URL地址,然后通過相關(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"即為當前可以訪問的互聯(lián)網(wǎng)視頻文件的URL地址。

  運用示例代碼,對應(yīng)效果如圖4所示。

1608708972404_14.png

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

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

  注意:

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

猜你喜歡:
如何在HTML5中嵌入視頻和音頻?
學(xué)習(xí)前端對專業(yè)有要求嗎?
前端開發(fā)工具有哪些?哪一款最好用?
傳智教育web前端培訓(xùn)課程

0 分享到:
和我們在線交談!