首頁 > 文章 > web前端 > 如何在HTML網頁中插入視頻

如何在HTML網頁中插入視頻

php中世界最好的语言原創: 2018-01-16 10:01:405974瀏覽

現在如果要在頁面中使用video標籤，需要考慮三種情況，支持Ogg Theora或VP8（如果這玩意兒沒出事的話）的（Opera、Mozilla、Chrome），支持H.264的（Safari、 IE 9、Chrome），都不支援的（IE6、7、8）。好吧，現在讓我們從技術層面來認識HTML 5的視頻，包括video標籤的使用，視頻對象可以用到的媒介屬性和方法，以及媒介事件。

Video標籤的使用

Video標籤含有src、poster、preload、autoplay、loop、controls、width、height等幾個屬性，以及一個內部使用的標籤e02da388656c3265154666b7c71a8ddc。 Video標籤內除了可以包含e02da388656c3265154666b7c71a8ddc標籤外，還可以包含當指定的影片都不能播放時，傳回的內容。

(1) src屬性和poster屬性

你能想像src屬性是用來幹啥的。跟a1f02c36ba31691bcfe87b2722de723b標籤的一樣，這個屬性用來指定影片的位址。而poster屬性用於指定一張圖片，在目前影片資料無效時顯示（預覽圖）。視訊資料無效可能是視訊正在加載，可能是視訊地址錯誤等等。

<video width="658"
 height="444" src="http://www.youname.com/images/first.mp4" poster="http://www.youname.com/images/first.png" autoplay="autoplay"></video>

(2) preload屬性

這個屬性也能透過名字了解用處，此屬性用來定義影片是否預先載入。屬性有三個可選擇的值：none、metadata、auto。如果不使用此屬性，預設為auto。

<video width="658"
 height="444" src="http://www.youname.com/images/first.mp4" poster="http://www.youname.com/images/first.png" autoplay="autoplay" preload="none"></video>

None：不進行預先載入。使用此屬性值，可能是頁面製作者認為用戶不期望此視頻，或減少HTTP請求。

Metadata：部分預先載入。使用此屬性值，代表頁面製作者認為用戶不期望此視頻，但為用戶提供一些元數據（包括尺寸，第一幀，曲目列表，持續時間等等）。

Auto：全部預先載入。

(3) autoplay屬性

又是一個看名字知道用處的屬性。 Autoplay屬性用於設定影片是否自動播放，是一個布林屬性。當出現時，表示自動播放，去掉是表示不自動播放。

<video width="658"
 height="444" src="http://www.youname.com/images/first.mp4" poster="http://www.youname.com/images/first.png" autoplay="autoplay" preload="none"></video>

注意，HTML中布林屬性的值不是true和false。正確的用法是，在標籤中使用此屬性表示true，此時屬性要么沒有值，要么其值恆等於他的名字（此處，自動播放為88395cc09d20900dd400beb3fbdab712或者e293ec31d9657cda31ea3d90a5c201bb）；而在標籤中不使用此屬性表示false（此處不進行自動播放為19e1f8ade8f7b36b7291bedfcc4c695e）。

(4) loop屬性

<video width="658"
 height="444" src="http://www.youname.com/images/first.mp4" poster="http://www.youname.com/images/first.png" autoplay="autoplay" loop="loop"></video>

一目了然，loop屬性用來指定影片是否循環播放，同樣是一個布林屬性。

(5) controls屬性

<video width="658"
 height="444" src="http://www.youname.com/images/first.mp4" poster="http://www.youname.com/images/first.png" autoplay="autoplay" preload="none" controls="controls"></video>

Controls屬性用於向瀏覽器指明頁面製作者沒有使用腳本產生播放控制器，需要瀏覽器啟用本身的播放控制列。

控制列須包含播放暫停控制，播放進度控制，音量控制等等。

每個瀏覽器預設的播放控制列在介面上不一樣。由於我瀏覽器的詭異問題，Firefox和Safari的Video標籤不正常，所以這兩個只能在網路上找截圖了。

(6) width屬性和height屬性

屬於標籤的通用屬性了，這個不用多說。

(7) source標籤

<video width="658"
 height="444" poster="http://www.youname.com/images/first.png" autoplay="autoplay" preload="none" controls="controls"><source src="http://www.youname.com/images/first.ogv"
 /><source src="http://www.youname.com/images/first.ogg"
 /></video>

Source標籤用於給媒體（因為audio標籤同樣可以包含此標籤，所以這兒用媒體，而不是視訊）指定多個可選擇的（瀏覽器最後只能選一個）檔案位址，只能在媒體標籤沒有使用src屬性時使用。

瀏覽器以source標籤的順序偵測標籤指定的影片是否能夠播放（可能是影片格式不支持，影片不存在等等），如果不能播放，換下一個。此方法多用於相容不同的瀏覽器。 Source標籤本身不代表任何意義，不能單獨出現。

此標籤包含src、type、media三個屬性。

src屬性：用來指定媒體的位址，和video標籤的一樣。

Type屬性：用來說明src屬性指定媒體的類型，幫助瀏覽器在取得媒體前判斷是否支援此類別的媒體格式。

Media屬性：用來說明媒體在何種媒介中使用，不設定時預設值為all，表示支援所有媒介。你想到c9ccee2e6ea535a969eb3f532ad9fe89標籤的media屬性了麼？一樣一樣一樣的。

(8) 一個完整的例子

<video width="658"
 height="444" poster="http://www.youname.com/images/first.png" autoplay="autoplay" preload="none" controls="controls"><source src="http://www.youname.com/images/first.ogv"
 /><source src="http://www.youname.com/images/first.ogg"
 /></video>

這段程式碼在頁面中定義了一個視頻，此視頻的預覽圖為poster的屬性值，顯示瀏覽器的預設媒體控制欄，預先載入影片的元數據，循環播放，寬度為900像素，高度為240像素。

第一選擇視頻地址為第一個source標籤的src屬性值，視頻類別為Ogg視頻，視頻編碼譯碼器為Theora，音頻編碼譯碼器為Vorbis，播放媒介為顯示器；第二選擇視訊地址不再累述。如果你還要相容IE的話，可以在最後一個source標籤後面再加上Flash播放器的標籤集，或是使用一點 JavaScript程式碼。

相信看了這些案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！