?
本文檔使用 php中文網(wǎng)手冊(cè) 發(fā)布
使用HTML 元素將視頻內(nèi)容嵌入到文檔中。<video>
內(nèi)容類別 | 流內(nèi)容，短語內(nèi)容，嵌入式內(nèi)容。如果它具有控件屬性：交互式內(nèi)容和可觸及的內(nèi)容。 |
|---|---|
允許的內(nèi)容 | 如果元素具有src屬性：零個(gè)或多個(gè)<track>元素，后跟不包含媒體元素的透明內(nèi)容 - 不包含<audio>或<video> Else：零個(gè)或多個(gè)<source>元素，后跟零或更多<track>元素，后面跟著不包含媒體元素的透明內(nèi)容 - 不是<audio>或<video>。 |
標(biāo)記遺漏 | 沒有，起始和結(jié)束標(biāo)簽都是強(qiáng)制性的。 |
允許父母 | 任何接受嵌入內(nèi)容的元素。 |
允許ARIA角色 | 應(yīng)用 |
DOM界面 | HTMLVideoElement |
屬性
像所有其他HTML元素一樣，此元素支持全局屬性。
autoplayBoolean屬性; 如果指定，視頻自動(dòng)開始播放，只要它可以這樣做，而不停止完成加載數(shù)據(jù)。
自動(dòng)播放音頻（或帶有音頻軌道的視頻）的站點(diǎn)對(duì)用戶來說可能是一種不愉快的體驗(yàn)，所以應(yīng)盡可能避免。如果您必須提供自動(dòng)播放功能，您應(yīng)該選擇啟用（要求用戶專門啟用它）。但是，在用戶控制下創(chuàng)建媒體元素的源將在稍后設(shè)置時(shí)，這可能很有用。
要禁用視頻自動(dòng)播放，autoplay="false"將不起作用; 如果該<video>標(biāo)簽中存在該屬性，該視頻將自動(dòng)播放。要?jiǎng)h除自動(dòng)播放，該屬性需要完全刪除。
buffered您可以讀取的屬性來確定緩沖媒體的時(shí)間范圍。該屬性包含一個(gè)TimeRanges對(duì)象。controls如果此屬性存在，瀏覽器將提供控件以允許用戶控制視頻播放，包括音量，搜索和暫停/恢復(fù)播放。crossorigin該枚舉屬性指示是否使用CORS來獲取相關(guān)圖像。可以在元素中重用啟用CORS的資源，而<canvas>不會(huì)受到污染。允許的值為：匿名發(fā)送不帶憑據(jù)的跨源請(qǐng)求。換句話說，它發(fā)送Origin:沒有cookie，X.509證書或執(zhí)行HTTP基本身份驗(yàn)證的HTTP頭。如果服務(wù)器不向源站點(diǎn)提供憑據(jù)（通過不設(shè)置Access-Control-Allow-Origin:HTTP頭），圖像將被干擾，并且其使用受到限制.use-credentials使用憑證發(fā)送一個(gè)跨源請(qǐng)求。換句話說，它發(fā)送Origin:一個(gè)cookie，一個(gè)證書或執(zhí)行HTTP基本認(rèn)證的HTTP標(biāo)頭。如果服務(wù)器沒有為原始站點(diǎn)提供憑據(jù)（通過Access-Control-Allow-Credentials:HTTP標(biāo)頭），則圖像將受到污染并且其使用受到限制。如果不存在，則在沒有CORS請(qǐng)求（即不發(fā)送Origin:HTTP標(biāo)頭）的情況下獲取該資源，從而防止其未被污染的<canvas>元素使用。如果無效，則將其處理為使用枚舉關(guān)鍵字匿名。有關(guān)更多信息，請(qǐng)參閱CORS設(shè)置屬性。height視頻顯示區(qū)域的高度，英寸CSS像素。- （僅絕對(duì)值，無百分比）loop布爾屬性; 如果指定，我們將在到達(dá)視頻結(jié)束時(shí)自動(dòng)回到起點(diǎn)。muted一個(gè)布爾屬性，指示視頻中包含的音頻的默認(rèn)設(shè)置。如果設(shè)置，則音頻將最初靜音。其默認(rèn)值為false，這意味著音頻將在視頻播放時(shí)播放。played一個(gè)TimeRanges表示已播放的視頻的所有范圍對(duì)象。preload此枚舉屬性旨在向?yàn)g覽器提供有關(guān)作者認(rèn)為會(huì)導(dǎo)致最佳用戶體驗(yàn)的提示。它可能具有以下值之一：
none：表示不應(yīng)該預(yù)加載視頻。metadata：表示僅獲取視頻元數(shù)據(jù)（例如長度）。auto：表示即使用戶不希望使用它，也可以下載整個(gè)視頻文件。在空字符串：在的代名詞
auto值。
如果未設(shè)置，則其默認(rèn)值是瀏覽器定義的（即每個(gè)瀏覽器可能具有其默認(rèn)值）。該規(guī)范建議將其設(shè)置為metadata。
使用說明：
autoplay屬性具有優(yōu)先權(quán)preload。如果autoplay指定，瀏覽器顯然需要開始下載視頻進(jìn)行播放。規(guī)范不強(qiáng)制瀏覽器遵循此屬性的值; 這僅僅是一個(gè)暗示。
poster指示要在用戶播放或搜索之前顯示的海報(bào)幀的URL。如果未指定此屬性，則在第一幀可用之前不顯示任何內(nèi)容; 那么第一幀被顯示為張貼框。src要嵌入的視頻的網(wǎng)址。這是可選的; 您可以使用<source>視頻塊內(nèi)的元素來指定要嵌入的視頻。width視頻顯示區(qū)域的寬度，以CSS像素為單位。- （僅限絕對(duì)值，無百分比）playsinline布爾屬性，指示視頻將以“內(nèi)嵌”播放，即在該元素的播放區(qū)域內(nèi)播放。請(qǐng)注意，缺少此屬性并不意味著視頻將始終以全屏播放。
事件
<video>元素可以引發(fā)多種不同的事件。
使用說明
<video>元素包含一個(gè)或多個(gè)視頻源。要指定視頻源，請(qǐng)使用src屬性或<source>元素; 瀏覽器會(huì)選擇最合適的一個(gè)。有關(guān)支持的格式列表，請(qǐng)參閱音頻和視頻元素支持的媒體格式。
例子
<!-- Simple video example --><video src="videofile.webm" autoplay poster="posterimage.jpg">Sorry, your browser doesn't support embedded videos, but don't worry, you can <a href="videofile.webm">download it</a>and watch it with your favorite video player!</video><!-- Video with subtitles --><video src="foo.webm"> <track kind="subtitles" src="foo.en.vtt" srclang="en" label="English"> <track kind="subtitles" src="foo.sv.vtt" srclang="sv" label="Svenska"></video>
第一個(gè)示例播放視頻，一旦接收到足夠多的視頻就開始播放，以允許播放而不會(huì)暫停下載更多視頻。在視頻開始播放之前，圖像“posterimage.jpg”將顯示在其位置上。
第二個(gè)例子允許用戶在不同的字幕之間進(jìn)行選擇。
多個(gè)來源的例子
This example offers three different sources for the media; this allows the video to be watched regardless of which video codecs are supported by the browser; first WebM is tried. If that can't be played, then MP4 is tried. Finally, OGG is tried.
<video width="480" controls poster="https://archive.org/download/WebmVp8Vorbis/webmvp8.gif" > <source src="https://archive.org/download/WebmVp8Vorbis/webmvp8.webm" type="video/webm"> <source src="https://archive.org/download/WebmVp8Vorbis/webmvp8_512kb.mp4" type="video/mp4"> <source src="https://archive.org/download/WebmVp8Vorbis/webmvp8.ogv" type="video/ogg"> Your browser doesn't support HTML5 video tag.</video>
您可以嘗試使用實(shí)時(shí)預(yù)覽代碼編輯器的HTML5視頻演示示例上面的示例。
服務(wù)器支持
如果視頻的MIME類型未在服務(wù)器上正確設(shè)置，則視頻可能不會(huì)顯示或顯示包含X的灰色框（如果啟用了JavaScript）。
如果您使用Apache Web Server為Ogg Theora視頻提供服務(wù)，則可以通過將視頻文件類型擴(kuò)展添加到“video / ogg”MIME類型來解決此問題。最常見的視頻文件類型擴(kuò)展名是“.ogm”，“.ogv”或“.ogg”。為此，編輯“/ etc / apache”中的“mime.types”文件或使用httpd.conf中的“AddType”配置指令。
AddType video/ogg .ogm AddType video/ogg .ogv AddType video/ogg .ogg
如果您將視頻作為WebM提供，則可以通過將視頻文件使用的擴(kuò)展名（“.webm”是最常見的擴(kuò)展名）添加到MIME類型“video / webm”，通過“ mime.types“文件放入”/ etc / apache“或通過httpd.conf中的”AddType“配置指令。
AddType video/webm .webm
您的Web主機(jī)可以為新技術(shù)的MIME類型配置更改提供一個(gè)簡(jiǎn)單的界面，直到自然發(fā)生全局更新。
規(guī)格
Specification | Status | Comment |
|---|---|---|
HTML Living StandardThe definition of '<video>' in that specification. | Living Standard |
瀏覽器兼容性
Feature | Chrome | Edge | Firefox (Gecko) | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|---|
Basic support | 3.0 | (Yes) | 3.5 (1.9.1) | 9.0 | 10.5 | 3.1 |
autoplay attribute | 3.0 | (Yes) | 3.5 (1.9.1) | 9.0 | 10.5 | 3.1 |
buffered attribute | ? | (Yes) | 4.0 (2.0) | ? | (Yes) | ? |
controls attribute | 3.0 | (Yes) | 3.5 (1.9.1) | 9.0 | 10.5 | 3.1 |
crossorigin attribue | ? | (Yes) | 12.0 (12.0) | ? | ? | ? |
loop attribute | 3.0 | (Yes) | 11.0 (11.0) | 9.0 | 10.5 | 3.1 |
muted attribute | 30.0 | (Yes) | 11.0 (11.0) | 10.0 | (Yes) | 5.0 |
played property | ? | (Yes) | 15.0 (15.0) | ? | (Yes) | ? |
poster attribute | 3.0 | (Yes) | 3.6 (1.9.2) | 9.0 | 10.5 | 3.1 |
preload attribute | 3.0 | (Yes) | 4.0 (2.0) | 9.0 | (Yes) | 3.1 |
src attribute | 3.0 | (Yes) | 3.5 (1.9.1) | 9.0 | 10.5 | 3.1 |
playsinline attribute | ? | ? | ? | ? | ? | ? |
Feature | Android | Edge | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|---|
Basic support | ? | (Yes) | 1.0 (1.0) | ? | ? | ? |
autoplay attribute | ? | (Yes) | 1.0 (1.0) | 8.1 | ? | 10.01 |
buffered attribute | ? | (Yes) | 4.0 (2.0) | ? | ? | ? |
controls attribute | ? | (Yes) | 1.0 (1.0) | ? | ? | ? |
loop attribute | ? | (Yes) | 11.0 (11.0) | 8.0 | ? | 6.0 |
muted attribute | ? | (Yes) | 11.0 (11.0) | 8.0 | ? | ? |
played property | ? | (Yes) | 15.0 (15.0) | ? | ? | ? |
poster attribute | ? | (Yes) | 1.0 (1.0) | ? | ? | ? |
preload attribute | ? | (Yes) | 4.0 (2.0) | ? | ? | ? |
src attribute | ? | (Yes) | 1.0 (1.0) | ? | ? | ? |
crossorigin attribute | ? | (Yes) | 12.0 (12.0) | ? | ? | ? |
playsinline attribute | ? | ? | ? | ? | ? | 10.0 |