您的位置:主頁-> IT知識庫->

web前端干貨知識|HTML5向網頁嵌入視頻和音頻

不知學什么專業?就業難?學一門IT技能,輕松高薪就業,了解一下>>

現在很多網站上都會使用到視頻和音頻,html5 中提供了展示視頻和音頻的標簽。向網頁嵌入視頻可以使用 <video> 標簽,而嵌入音頻可以使用 <audio> 標簽。這兩個標簽都是 html 5 中新增的標簽,兩個標簽中的屬性和方法也很類似,但也有些不同。其中 audio 元素用于定義聲音,比如音樂, video 元素用于定義視頻,如電影等。

向網頁中嵌入視頻

<video> 標簽可以用于定義視頻,且提供了播放、暫停、音量控件來控制視頻。舉個例子,像我們俠課島網站上,課程視頻播放,就是通過 <video> 標簽來實現的。下面我們來看一下如何向網頁中嵌入一個視頻。

示例:

首先我們準備一個視頻,例如一個 test.mp4,然后使用 <video> 標簽嵌入視頻,如下所示:

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <title>HTML5學習(9xkd.com)</title>

    </head>

    <body>

        <video src="./test.mp4" controls="controls" width="700px" height="400px"></video>

    </body>

</html>

在瀏覽器中的預覽效果:

從上圖中可以看到,我們通過 <video> 標簽成功向網頁中插入了一個視頻, 其中 src 屬性用于引入要播放的視頻的 URL,注意視頻地址一定要正確,如果地址錯誤,視頻是不能顯示的。

然后我們通過 width、height 屬性設置了視頻的寬度為 700px ,高度為 400px。

然后可以看到,視頻上還顯示了播放、調整音量等控件,當我們點擊播放按鈕時,視頻就會開始播放。

這是因為我們設置了 controls 屬性,如果我們沒有設置這個屬性,視頻將會顯示一個靜止的畫面,并且不管怎么點擊都是沒有反應的。大家可以試一下,不設置 controls 屬性然后在瀏覽器中查看演示效果,這里就不演示給大家看了。

video 元素中的常用屬性如下所示:

有些比較老的瀏覽器可能不支持 <video> 標簽,例如 IE8 及以下的瀏覽器就不支持,而 IE9+、Firefox、Opera、Chrome、Safari 等瀏覽器都支持 <video> 標簽。

所以我們可以在 <video> 標簽中放置文本內容,這樣當某個瀏覽器不支持此標簽時,就可以顯示提示內容:

<video src="./test.mp4" controls="controls" width="700px" height="400px">

  您的瀏覽器不支持 video 標簽

</video>

這樣用戶就會知道,是因為瀏覽器不支持所以加載視頻不成功,可以換一個瀏覽器。

視頻的格式

像我們平時看到的視頻格式有很多種,例如常見的有 mp4、AVI、mov、rmvb、Ogg 等等, 目前 video 元素支持的視頻格式有下面三種:

這三種視頻格式,在不同的瀏覽器中兼容性不同,例如 MP4 格式不支持 Firefox 和 Opera 瀏覽器,Ogg 格式不支持IE、Safari 瀏覽器,WebM 格式不支持IE、Safari 瀏覽器等。

所以我們可能需要在不同的瀏覽器中使用不同的視頻格式,這需要用到 <source> 標簽。

source標簽

<source> 標簽可以為媒體元素定義媒介資源,例如 video 和 audio 元素。

例如 <video> 標簽中可以包含多個 <source> 標簽,<source> 標簽可以鏈接不同的視頻文件,瀏覽器將使用第一個可識別的格式。

示例:

例如我們插入的視頻播放器,帶有兩個源文件,瀏覽器會根據需要來選擇源文件:

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <title>HTML5學習(9xkd.com)</title>

    </head>

    <body>

        <video controls="controls" width="700px" height="400px">

            <source src="./test.mp4" type="video/mp4">

            <source src="./test.ogg" type="video/ogg">

            您的瀏覽器不支持 video 標簽

        </video>

    </body>

</html>

像上述代碼中,如果是 Safari 瀏覽器就會選擇第一個源文件,如果是 Firefox 瀏覽器則會選擇第二個源文件。

<source> 標簽有三個屬性:

向網頁中嵌入音頻

向網頁中嵌入音頻可以使用 <audio> 標簽,此標簽的使用和 <video> 標簽類似。插入視頻是有畫面的,我們也可以調整視頻的寬和高等,而插入音頻是沒有畫面的。

audio 元素支持的格式和 video 元素也有一點區別:

示例:

例如我們插入一段音頻,在瀏覽器中可以看到,是沒有畫面的,只有聲音:

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <title>HTML5學習(9xkd.com)</title>

    </head>

    <body>

        <audio controls="controls">

            <source src="./test.mp4" type="audio/mpeg">

            <source src="./test.ogg" type="audio/ogg">

            您的瀏覽器不支持 audio 標簽

        </audio>

    </body>

</html>

在瀏覽器中的演示效果: 圖片

向網頁中嵌入音頻時,也可以通過 <source> 標簽來指定兩個源文件,<source> 標簽允許規定兩個視頻或者音頻文件供瀏覽器根據它對媒體類型或者編解碼器的支持進行選擇。

audio 元素中的常用屬性和 video 元素差不多,但是 audio 元素中沒有 width、height 等屬性。

常用屬性如下所示:

總結

向網頁中嵌入視頻和音頻其實很簡單,要注意 video 元素 和 audio 元素支持的視頻、音頻格式類型,如果插入的視頻格式不支持,則視頻或音頻不會顯示。

來源 | http://www.fly63.com/article/detial/9503
在線咨詢 學費咨詢

快捷通道

電話咨詢

0731-85503066

來校路線

長沙市國家高新區尖山路39號 中電軟件園

在線留言

請您把問題留下,我們為您提供專業的解答!

可能感興趣的文章

老司机精品福利视频一区,九九天天影院九九天天影院伦,男女达到性高朝朝视频戴套,天堂亚洲码在线http