一、雖然有的屬性是boolean類型，但仍舊建議按照XHTML書寫（屬性名=”屬性值”）格式，避免出現錯誤 （下面加粗的屬性為常用屬性）
| 屬性 |
值 |
功能描述 |
| controls |
controls |
是否顯示播放控件 |
| autoplay |
autoplay |
設置是否打開瀏覽器后自動播放 |
| width |
Pilex（像素） |
設置播放器的寬度 |
| height |
Pilex（像素） |
設置播放器的高度 |
| loop |
loop |
設置視頻是否循環播放（即播放完后繼續重新播放） |
| preload |
preload |
設置是否等加載完再播放 |
| src |
url |
設置要播放視頻的url地址 |
| poster |
imgurl |
設置播放器初始默認顯示圖片 |
| autobuffer |
autobuffer |
設置為瀏覽器緩沖方式，不設置autoply才有效 |
演示：
<video controls="controls" width="500px" height="500px" loop autoplay poster="imgUrl">
<source src="黑客之都.mp4" type="video/mp4"/>
<track src="a.vtt" label="中文" srclang="zh" kind="subtitles" default/>
</video>
二、.video標簽API方法：Video標簽也提供了比較人性化的API接口方法，供寫JS時直接調用，方便簡單
| API |
事件說明 |
| addTextTrack() |
向音頻/視頻添加新的文本軌道。 |
| play |
video.play(); 播放視頻 |
| pause |
video.pause(); 暫停播放視頻 |
| load |
video.load(); 將全部屬性回復默認值，視頻恢復重新開始狀態 |
| canPlayType |
var support = videoid.canPlayType('video/mp4'); 判斷瀏覽器是否支持當前類型的視頻格式 返回值： 空字符串：不支持 Maybe：可能支持 Probably：完全支持 |
關於video標簽的API接口在JS中用法如下：
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <style> 5 video::cue{ 6 background-color:transparent; 7 color:white; 8 font-size:20px; 9 line-height: 100px; 10 } 11 </style> 12 </head> 13 <body> 14 15 <video controls="controls" id="video1"> 16 <source src="黑客之都.Hackerville.S01E01.720P.mp4" type="video/mp4"/> 17 <track src="a.vtt" label="中文字幕" srclang="zh" kind="subtitles" default/> 18 </video> 19 <button onclick="isPlay(this)">播放</button> 20 <button onclick="replay()">重新播放</button> 21 <button onclick="isPlayType()">瀏覽器支持</button> 22 23 <script> 24 var video1 = document.getElementById("video1"); //括號內為video標簽的id 25 //播放視頻（點擊播放按鈕，后變成暫停） 26 function isPlay(obj1){ 27 if(video1.paused){ //paused屬於視頻api屬性 28 obj1.innerHTML="暫停"; 29 video1.play(); 30 }else{ 31 obj1.innerHTML="播放"; 32 video1.pause(); 33 } 34 } 35 36 //重新從開頭播放 37 function replay(){ 38 video1.load(); 39 } 40 41 //判斷要播放的視頻格式當前瀏覽器是否支持 42 function isPlayType(){ 43 var support = video1.canPlayType("video/mp4"); 44 console.log(support); //返回結果：空字符串、maybe（可能支持）、probably（支持） 45 } 46 </script> 47 </body> 48 </html>
三、video標簽API屬性： Video不僅提供了API接口，還提供了許多的API屬性，方便在JS中做判斷，如下：大部分屬性通過boolean值判斷
| API屬性 |
事件說明 |
| duration |
返回媒體的播放總時長，單位秒 |
| loop |
是否循環播放 |
| muted |
是否靜音 |
| paused |
是否暫停 |
| currentTime |
當前播放時間（單位：秒） |
| volume |
音量值(0~1) |
| networkState |
返回當前網絡狀態 |
| playbackRate |
播放的倍速(加速、減速播放)(-2~2) |
| src |
當前視頻源的URL |
| ended |
返回當前播放是否結束標志 |
| error |
返回當前播放的錯誤狀態 |
| initialTime |
返回初始播放的位置 |
| mediaGroup |
當前音視頻所屬媒體組 (用來鏈接多個音視頻標簽) |
| played |
當前播放部件已經播放的時間范圍(TimeRanges對象) |
| preload |
頁面加載時是否同時加載音視頻 |
| readyState |
返回當前的准備狀態 |
| seekable |
返回當前可跳轉部件的時間范圍(TimeRanges對象) |
| audioTracks |
返回可用的音軌列表（MultipleTrackList對象） |
| autoplay |
媒體加載后自動播放 |
| buffered |
返回緩沖部件的時間范圍(TimeRanges對象) |
| controller |
返回當前的媒體控制器（MediaController對象） |
| controls |
顯示播控控件 |
| crossOrigin |
CORS設置 |
| currentSrc |
返回當前媒體的URL |
| defaultMuted |
缺省是否靜音 |
| defaultPlaybackRate |
播控的缺省倍速 |
| seeking |
返回用戶是否做了跳轉操作 |
| startOffsetTime |
返回當前的時間偏移(Date對象) |
| textTracks |
返回可用的文本軌跡(TextTrackList對象) |
| videoTracks |
返回可用的視頻軌跡(VideoTrackList對象) |
演示：
1 <script> 2 function setting(){ 3 video1.muted=true; //設置靜音 4 video1.volume=0.2; //設置音量,1等於100% 5 video1.playbackRate=2; //2倍播放速度 6 video1.controls=false; //不顯示播控控件 7 } 8 </script>
四、音頻/視頻事件
| 事件 | 描述 |
| abort | 當音頻/視頻的加載已放棄時觸發。 |
| canplay | 當瀏覽器可以開始播放音頻/視頻時觸發。 |
| canplaythrough | 當瀏覽器可在不因緩沖而停頓的情況下進行播放時觸發。 |
| durationchange | 當音頻/視頻的時長已更改時觸發。 |
| emptied | 當目前的播放列表為空時觸發。 |
| ended | 當目前的播放列表已結束時觸發。 |
| error | 當在音頻/視頻加載期間發生錯誤時觸發。 |
| loadeddata | 當瀏覽器已加載音頻/視頻的當前幀時觸發。 |
| loadedmetadata | 當瀏覽器已加載音頻/視頻的元數據時觸發。 |
| loadstart | 當瀏覽器開始查找音頻/視頻時觸發。 |
| pause | 當音頻/視頻已暫停時觸發。 |
| play | 當音頻/視頻已開始或不再暫停時觸發。 |
| playing | 當音頻/視頻在因緩沖而暫停或停止后已就緒時觸發。 |
| progress | 當瀏覽器正在下載音頻/視頻時觸發。 |
| ratechange | 當音頻/視頻的播放速度已更改時觸發。 |
| seeked | 當用戶已移動/跳躍到音頻/視頻中的新位置時觸發。 |
| seeking | 當用戶開始移動/跳躍到音頻/視頻中的新位置時觸發。 |
| stalled | 當瀏覽器嘗試獲取媒體數據，但數據不可用時觸發。 |
| suspend | 當瀏覽器刻意不獲取媒體數據時觸發。 |
| timeupdate | 當目前的播放位置已更改時觸發。 |
| volumechange | 當音量已更改時觸發。 |
| waiting | 當視頻由於需要緩沖下一幀而停止時觸發。 |