首頁 > web前端 > html教學 > 如何在html頁面插入視頻

如何在html頁面插入視頻

王林
發布: 2020-04-13 16:24:22
轉載
4551 人瀏覽過

如何在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:全部預先載入。

(推薦教學:html入門教學

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