首頁  >  文章  >  web前端  >  總結HTML網頁中插入影片的方法

總結HTML網頁中插入影片的方法

小云云
小云云原創
2017-12-11 10:04:4517873瀏覽

現在如果要在頁面中使用video標籤,需要考慮三種情況,支持Ogg Theora或VP8(如果這玩意兒沒出事的話)的(Opera、Mozilla、Chrome),支持H.264的(Safari、 IE 9、Chrome),都不支援的(IE6、7、8)。好吧,現在讓我們從技術層面來認識HTML 5的視頻,包括video標籤的使用,視頻對象可以用到的媒介屬性和方法,以及媒介事件,本文主要介紹了HTML網頁中插入視頻的方法小結,需要的朋友可以參考下,希望能幫助大家。

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程式碼。

怎麼用H5操作音訊視訊

html5播放視訊教學

HTML5視訊音訊實作步驟

以上是總結HTML網頁中插入影片的方法的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn