首頁 > web前端 > html教學 > 總結HTML網頁中插入影片的方法

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

小云云
發布: 2017-12-11 10:04:45
原創
17889 人瀏覽過

現在如果要在頁面中使用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等幾個屬性,以及一個內部使用的標籤。 Video標籤內除了可以包含標籤外,還可以包含當指定的影片都不能 播放時,傳回的內容。

(1) src屬性和poster屬性

你能想像src屬性是用來幹啥的。跟標籤的一樣,這個屬性用來指定影片的位址。而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,此時屬性要么沒有值,要么其值恆等於他的名字(此處,自動播放為

 (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,表示支援所有媒介。你想到