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

HTML5怎樣直接調用網絡音頻視頻文件?

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

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

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

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

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

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

1608708875198_11.png

圖1 搜索mp3外鏈網站

1608708940354_12.png
圖2 進入mp3外鏈網站
1608708960956_13.png

圖3 mp3外鏈地址

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

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。

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

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

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

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

1608708972404_14.png

  圖4 調用網絡視頻文件

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

  注意:

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

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

人妻系列无码专区_漂亮人妻被中出中文字幕_人妻中文制服巨乳中文