在頁面添加一個視訊
為video元素指定多個視訊格式
并不是所有的浏覽器都支援同一種格式，source可以讓開發者為video元素指定多個視訊格式
當浏覽器解析到标簽，使用type屬性來決定哪個檔案被下載下傳和播放。如果浏覽器支援webm格式，就會播放demo.webm檔案，如果不支援，浏覽器就會接着檢查是否支援mpeg-4。這裡https://www.xiph.org/video/vid1.shtml可以看到音視訊在web上是如何工作的。
這種指定視訊格式有下面的幾點好處
開發這可以根據喜愛的順序列出多個格式
浏覽器用戶端切換格式減少了延遲；隻有一個請求去擷取内容
在浏覽器中選擇視訊格式比在浏覽器端更加簡單，快速，可靠
為每個source元素指定type屬性可以提高網絡性能，這樣就不用讓浏覽器選擇一個source,下載下傳一段段視訊，再判斷格式是否支援。
在移動環境下上面你的幾點好處尤其明顯，移動環境下網速和延遲，使得使用者的耐心是有限的。如果不為source屬性指定type,當多個source都不支援時，會嚴重影響性能。同時也要保證請求的response heanders是否傳回了正确的mime type,否則video source type也不工作。
為source指定一個開始和結束時間
這樣可以節省帶寬。使用media fragments api 可以為video元素添加一個開始時間和結束時間。
具體格式就是在url後面加入下面你的格式#t=start_time
假如要播放5秒到10秒的視訊，向下面這樣,[示例]()
使用media fragments api也可以為視訊指定多個畫面，https://www.youtube.com/watch?v=y3cfxqb7jzk可以看下這裡的demo
注意
media fragments api支援大部分的android平台，但是ios不支援
range request需要伺服器端支援
為視訊指定一個封面
通過video元素的poster屬性可以為視訊指定封面，這樣可以讓使用者在沒有沒有加載或者播放的情況下既可以對視訊有所了解。
檢視支援的格式
使用 canplaytype() 找出支援的視訊格式。該方法采用與 mime-type 一緻的字元串參數和可選編解碼器，會傳回以下某個值：
傳回值
描述
(empty string)
容器和/或編解碼器不受支援。
maybe
容器和編解碼器可能受支援，但是浏覽器 需要下載下傳部分視訊才能明确。
probably
格式似乎受支援。
以下是一些 canplaytype() 參數示例和在 chrome 中運作時的傳回值：
類型 | 響應
video/xyz
（空字元串）
video/xyz; codecs="avc1.42e01e, mp4a.40.2"
video/xyz; codecs="nonsense, noise"
video/mp4; codecs="avc1.42e01e, mp4a.40.2"
video/webm
video/webm; codecs="vp8, vorbis"
制作多種格式的視訊
許多工具都可以幫助您将同一視訊儲存為多種格式：
桌面工具： ffmpeg
gui應用: miro handbrake vlc
線上編碼/轉碼服務：zencoder amazon elastic encoder
檢視所用的格式
想了解浏覽器實際所選的視訊格式嗎？
在 javascript 中，使用視訊的 currentsrc 屬性即可傳回所用的來源。
檢視視訊大小
視訊幀實際編碼大小可能會與視訊元素的尺寸有所不同（正如圖檔可能不會以實際尺寸顯示一樣）。
要檢視視訊的編碼大小，請使用視訊元素的 videowidth 和 videoheight 屬性。width 和 height 會傳回視訊元素的尺寸，而這些尺寸可能已使用 css 或内聯寬度和高度屬性進行過調整。
請勿提供架構大小或品質超過平台處理範圍的視訊。
提供适當時長的視訊。
視訊較長可能會導緻無法順暢下載下傳和定位：一些浏覽器可能需要等待視訊下載下傳完成後才可播放。
確定視訊不會溢出容器
如果視訊元素過大，不适合目前視口，則可能會從容器中溢出，進而使使用者無法觀看内容或使用 控件。
您可以使用 javascript 或 css 控制視訊尺寸
裝置方向在不同裝置中的工作原理
裝置方向對桌上型電腦顯示器或筆記本電腦而言不會構成問題，但對移動裝置或平闆電腦網頁設計卻是至關重要。
iphone 版 safari 可以在橫向和縱向之間自由轉換：
ipad 和 android 版 chrome 中的裝置方向問題十分棘手。 例如，在未進行自定義設定的情況下，ipad 上橫向播放的視訊如下所示：
内聯或全屏顯示
不同的平台展示視訊的方式也不相同。iphone 版 safari 會在網頁中内聯顯示視訊元素，卻會以全屏模式播放視訊：
在 android 裝置中，使用者可以通過點選全屏圖示來請求全屏模式。但是預設情況下，浏覽器以内聯模式播放視訊：
ipad 版 safari 以内聯模式播放視訊：
控制内容的全屏模式
不強制視訊全屏播放的平台為 fullscreen api 提供廣泛支援。使用此 api 可以控制内容或網頁的全屏模式。
以全屏模式顯示某元素，如video:
以全屏模式顯示整個文檔
您還可以監聽全屏狀态變化
或者，檢視元素目前是否處于全屏模式：
您也可以使用 css :fullscreen 僞類來更改以全屏模式顯示的元素的顯示方式。
在支援 fullscreen api 的裝置中，考慮将縮略圖用作視訊占位符：
requestfullscreen()有可能需要處理相容性問題
添加字幕
要使媒體在移動裝置上更易通路，請使用track元素添加字幕或說明。
android 版 chrome、ios safari 以及目前的所有桌面版浏覽器（firefox 除外）均支援track元素
如下面這樣
track元素的 src 屬性決定字幕檔案的位置。
定義字幕檔案中的字幕
視訊元素屬性參考
屬性
适用範圍
src
所有浏覽器
視訊位址
poster
封面圖，視訊元素顯示後無需下載下傳視訊内容就可立即顯示的圖檔檔案位址
preload
所有移動浏覽器均無法預加載
浏覽器提示：播放前預加載中繼資料（或某個視訊）十分重要。選項包括無、中繼資料或自動
autoplay
iphone 和 android 裝置均不支援；所有桌面版浏覽器、ipad 以及 android 版 firefox 和 opera 均支援。
自動開始下載下傳和播放
loop
循環播放視訊
controls
顯示預設視訊控件（播放、暫停等）
自動播放
在桌面裝置中，autoplay 會訓示浏覽器盡快開始下載下傳并播放視訊。在 ios 裝置和 android 版 chrome 中，autoplay 不起作用；使用者必須點按螢幕才能播放視訊。
即使是在可以進行自動播放的平台中，您也需要考慮将其啟用是否妥當：
資料流量可能會十分昂貴。
使媒體不事先詢問就開始下載下傳并播放，這可能會在無意間占用帶寬和 cpu，進而使頁面呈現出現延遲。
使用者可能會處于不便播放音頻或視訊的環境中。
開發者可通過 websettings api 在 android webview 中配置自動播放行為。 預設情況下，它處于啟用狀态，但是 webviewit 應用可選擇将其停用。
預加載
preload 屬性會訓示浏覽器應預加載的資訊或内容量
值
none
使用者甚至可能不會觀看視訊，那就無需預加載任何内容。
metadata
應預加載中繼資料（時長、尺寸、文字軌道），但要盡量減少視訊加載量。
auto
使用者都希望可以立即下載下傳整個視訊。
preload 屬性在不同平台中的效果不同。 例如，chrome 在桌面裝置上可以緩沖 25 秒的視訊，卻無法在 ios 或 android 裝置上緩沖。這意味着，移動裝置上可能會出現播放啟動延遲，而在桌面裝置上卻不會出現這種情況。請參閱 steve souders 的測試網頁，了解全部詳情。
視訊元素的javascript屬性
currenttime
擷取或設定播放位置（以秒為機關）
volume
擷取或設定視訊的目前音量
muted
擷取靜音狀态或将音頻設為靜音
playbackrate
擷取或設定播放速率；1 表示以正常速度向前播放。
buffered
說明目前已緩沖、可以播放的視訊量,示例,在chrome的緩沖量是21.44s
currentsrc
視訊的目前播放位置。
videowidth
以像素為機關表示的視訊幀寬度(這可能會與視訊元素寬度有所不同）
videoheight
以像素為機關表示的視訊幀高度(這可能會與視訊元素高度有所不同）
移動裝置既不支援 playbackrate，也不支援音量。
load()
在沒有開始播放的情況下加載或重新加載視訊來源：例如，當使用 javascript 更改視訊 src 時
play()
從目前位置播放視訊
pause()
在目前位置暫停播放視訊
canplaytype('format')
找出支援的格式
除非以響應使用者操作（例如點選按鈕）的方式調用 play() 和 pause()， 否則這兩種方法無法在移動裝置（android 版 opera 除外）上起作用
視訊元素的事件
事件名稱
canplaythrough
當所提供的資料足以使浏覽器相信自己可以連貫地播放整個視訊時觸發的事件。
ended
視訊播放完畢後觸發的事件
error
出現錯誤時觸發的事件
playing
視訊首次開始播放時、暫停後或重新開始播放時觸發的事件。
progress
為指明下載下傳進度而定期觸發的事件
waiting
操作延遲，等待另一操作完成時觸發的事件
loadedmetadata
浏覽器完成視訊中繼資料（時長、尺寸、文字軌道）加載後觸發的事件
視訊内容保護 html5 drm
持續更新中......