簡言
HTML <video> 元素 用于在 HTML 或者 XHTML 文檔中嵌入媒體播放器，用于支持文檔內的視頻播放。
平常若涉及到視頻內容，就會使用到它。
video
Video使用
- 只有一個視頻源
只有一個視頻的話，在\video元素中的src屬性填入即可。
<video src="/video.mp4"></video>
- 多個視頻源。
多個視頻源，需要搭配source元素指定視頻源，然后瀏覽器將會使用它所支持的第一個源。
<video controls>
<source src="myVideo.mp4" type="video/mp4" />
<source src="myVideo.webm" type="video/webm" />
<p>
Your browser doesn't support HTML5 video. Here is a
<a href="myVideo.mp4">link to the video</a> instead.
</p>
</video>
- 瀏覽器不支持該元素。 在不支持 video 元素的瀏覽器中，<video></video> 標簽中間的內容會顯示，作為降級處理。
<video controls width="250">
<source src="/media/cc0-videos/flower.webm" type="video/webm" />
<source src="/media/cc0-videos/flower.mp4" type="video/mp4" />
Download the
<a href="/media/cc0-videos/flower.webm">WEBM</a>
or
<a href="/media/cc0-videos/flower.mp4">MP4</a>
video.
</video>
video屬性
常見的屬性
這些屬性是可以寫在元素身上的屬性。
| 屬性 | 描述 |
|---|---|
| autoplay | 布爾屬性；聲明該屬性后，視頻會盡快自動開始播放，不會停下來等待數據全部加載完成。 |
| controls | 加上這個屬性，瀏覽器會在視頻底部提供一個控制面板，允許用戶控制視頻的播放，包括音量，跨幀，暫停/恢復播放。 |
| crossorigin | 該枚舉屬性指明是否使用 CORS（跨域資源共享）來獲取相關視頻。允許 CORS 的資源 可在 <canvas> 元素中被重用，而不會被污染。允許的值如下：anonymous（跨域請求不驗證）、use-credentials（跨域請求攜帶驗證信息） |
| height | 視頻顯示區(qū)域的高度，單位是 CSS 像素（僅限絕對值；不支持百分比） |
| width | 視頻顯示區(qū)域的寬度，單位是 CSS 像素（僅限絕對值；不支持百分比）。 |
| loop | 布爾屬性；循環(huán)播放。指定后，會在視頻播放結束的時候，自動返回視頻開始的地方，繼續(xù)播放。 |
| muted | 布爾屬性，指明在視頻中音頻的默認設置。 是否靜音，默認false,即不靜音 |
| playsinline | 布爾屬性，指明視頻將內聯（inline）播放，即在元素的播放區(qū)域內. 請注意，沒有此屬性并不意味著視頻始終是全屏播放的。 |
| poster | 海報幀圖片 URL，用于在視頻處于下載中的狀態(tài)時顯示。如果未指定該屬性，則在視頻第一幀可用之前不會顯示任何內容，然后將視頻的第一幀會作為海報（poster）幀來顯示。 |
| preload | 該枚舉屬性旨在提示瀏覽器，作者認為在播放視頻之前，加載哪些內容會達到最佳的用戶體驗?？赡苁窍铝兄抵唬簄one: 表示不應該預加載視頻。metadata: 表示僅預先獲取視頻的元數據（例如長度）。auto: 表示可以下載整個視頻文件，即使用戶不希望使用它?？兆址? 和值為 auto 一致。每個瀏覽器的默認值都不相同，即使規(guī)范建議設置為 metadata。 |
| src | 要嵌到頁面的視頻的 URL?？蛇x；你也可以使用 video 塊內的 <source> 元素來指定需要嵌到頁面的視頻。 |
其他屬性
video元素的Dom對象是HTMLVideoElement類型。
HTMLVideoElement 接口提供了用于操作視頻對象的特殊屬性和方法。它同時還繼承了HTMLMediaElement 和 HTMLElement 的屬性與方法。
| 屬性 | 描述 |
|---|---|
| videoHeight | 只讀屬性。返回一個unsigned long 值，以 CSS pixels 的單位給出視頻資源的實際高度。這個值考慮了大小、對比度、明度、分辨率等，是由視頻資源本身確定的。如果這個元素的 ready state 是 HAVE_NOTHING，這個屬性的值為 0。 |
| videoWidth | 只讀屬性。返回一個unsigned long 值，以 CSS pixels 的單位給出視頻資源的實際寬度。這個值考慮了大小、對比度、明度、分辨率等，是由視頻資源本身確定的。如果這個元素的 ready state 是 HAVE_NOTHING，這個屬性的值為 0。 |
| buffered | 只讀屬性。 buffered屬性會告訴瀏覽器哪一部分的媒體已經被下載（如果瀏覽器支持的話），按照標準會返回一個TimeRanges對象。 |
| currentTime | double類型。 當前播放時間，單位為秒。為其賦值將會使媒體跳到一個新的時間。 |
| defaultPlaybackRate | double類型?？刂泼襟w的播放速度。1.0 表示正常的播放速度，如果值小于 1.0，則播放速度會比”正常速度“慢，如果值大于 1.0，則播放速度會比”正常速度“快。0.0 是一個無效的值，并且會拋出 NOT_SUPPORTED_ERR 錯誤。 |
| duration | 只讀double類型。媒體以秒為單位的總長度時間，如果媒體不可用，則為 0. 如果媒體可用，但時間長度未知，值為 NAN. 如果媒體是以 stream 形式傳輸并且沒有預定長度，則值為 Inf。 |
| ended | 只讀屬性。表示媒體是否已經播放完畢。 |
| paused | 只讀屬性。 指示媒體元素是否被暫停。 |
| playbackRate | 當前媒體播放的速度。該值用于實現快進、慢動作等用戶控制。正常播放速度乘以該值即可得到當前速度，因此 1.0 表示正常速度。如果 playbackRate 為負值，則媒體將向后播放。 |
| played | 只讀屬性。 媒體可被播放的范圍。 TimeRanges對象。 |
| readyState | 媒體的準備狀態(tài)。具體可查看 |
| volume | 表示音頻的音量。值從 0.0（靜音）到 1.0（最大音量）。 |
video方法
video方法也是繼承了HTMLMediaElement 和 HTMLElement 的方法。
| 方法 | 作用 |
|---|---|
| canPlayType(in DOMString type) | 確定是否可以播放指定的媒體類型。 返回 ‘probably’（可以）、‘maybe’（可能可以）和空字符串（不行）。 |
| fastSeek(double time) | 跳到指定時間 |
| load() | 重置媒體元素并重新開始選擇媒體資源。任何待處理的事件都會被丟棄。獲取多少媒體數據仍受 preload 屬性的影響。在刪除任何 src 屬性和源元素后代后，此方法可用于釋放資源。否則，除非需要在動態(tài)變化后重新掃描源元素子元素，否則通常不需要使用此方法。 |
| pause() | 暫停播放 |
| play() | 開始播放 |
video事件
video事件大部分是從HTMLMediaElement繼承的。
| 事件 | 觸發(fā)時機 |
|---|---|
| canplay | 瀏覽器可以播放媒體文件了，但估計沒有足夠的數據來支撐播放到結束，不必停下來進一步緩沖內容。 |
| canplaythrough | 瀏覽器估計它可以在不停止內容緩沖的情況下播放媒體直到結束。 |
| complete | OfflineAudioContext 渲染完成。 |
| durationchange | duration 屬性的值改變時觸發(fā)。 |
| emptied | 媒體內容變?yōu)榭眨焕?，當這個 media 已經加載完成（或者部分加載完成），則發(fā)送此事件，并調用 load() 方法重新加載它。 |
| ended | 視頻停止播放，因為 media 已經到達結束點。 |
| loadeddata | media 中的首幀已經完成加載。 |
| loadedmetadata | 已加載元數據。 |
| pause | 播放已暫停。 |
| play | 播放已開始。 |
| playing | 由于缺乏數據而暫?；蜓舆t后，播放準備開始。 |
| progress | 在瀏覽器加載資源時周期性觸發(fā)。 |
| ratechange | 播放速率發(fā)生變化。 |
| seeking | 跳幀（seek）操作開始。 |
| seeked | 跳幀（seek）操作結束。 |
| stalled | 正在嘗試獲取媒體數據，但數據意外未出現。 |
| suspend | 媒體數據加載已暫停。 |
| timeupdate | currentTime 屬性指定的時間發(fā)生變化。 |
| volumechange | 音量發(fā)生變化。 |
| waiting | 由于暫時缺少數據，播放已停止。 |
案例
這個我寫的視頻畫面截取網頁文章來源：http://www.zghlxwxcb.cn/news/detail-802234.html
結語
video元素的出現，使得網頁文檔可以播放音視頻，彌補了本無法播放視頻的缺陷，以前使用其他插件播放（例如flash）。
它也可以替代canvas，作為WebRTC數據的載體。文章來源地址http://www.zghlxwxcb.cn/news/detail-802234.html
到了這里，關于【html】Video元素的屬性介紹和用法的文章就介紹完了。如果您還想了解更多內容，請在右上角搜索TOY模板網以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網！
