## video標簽在不同平臺上的事件表現差異分析 >時間：2016-09-03 23:40:55 >轉載：http://imweb.io/topic/560a6015c2317a8c3e086207 ### 完整版，請看騰訊的 imweb 社區的 [【video標簽在不同平臺上的事件表現差異分析】](http://imweb.io/topic/560a6015c2317a8c3e086207) ## video標簽屬性和事件介紹 為了文章的完整性，首先還是列舉一下 ### video標簽的屬性： * src ：視頻的屬性 * poster：視頻封面，沒有播放時顯示的圖片 * preload：預加載 * autoplay：自動播放 * loop：循環播放 * controls：瀏覽器自帶的控制條 * width：視頻寬度 * height：視頻高度 ### Video 對象屬性： * audioTracks： 返回表示可用音頻軌道的 AudioTrackList 對象。 * autoplay： 設置或返回是否在就緒（加載完成）后隨即播放視頻。 * buffered： 返回表示視頻已緩沖部分的 TimeRanges 對象。 * controller： 返回表示視頻當前媒體控制器的 MediaController 對象。 * controls： 設置或返回視頻是否應該顯示控件（比如播放/暫停等）。 * crossOrigin： 設置或返回視頻的 CORS 設置。 * currentSrc： 返回當前視頻的 URL。 * currentTime： 設置或返回視頻中的當前播放位置（以秒計）。 * defaultMuted： 設置或返回視頻默認是否靜音。 * defaultPlaybackRate： 設置或返回視頻的默認播放速度。 * duration： 返回視頻的長度（以秒計）。 * ended： 返回視頻的播放是否已結束。 * error： 返回表示視頻錯誤狀態的 MediaError 對象。 * height： 設置或返回視頻的 height 屬性的值。 * loop：設置或返回視頻是否應在結束時再次播放。 * mediaGroup： 設置或返回視頻所屬媒介組合的名稱。 * muted： 設置或返回是否關閉聲音。 * networkState： 返回視頻的當前網絡狀態。 * paused： 設置或返回視頻是否暫停。 * playbackRate： 設置或返回視頻播放的速度。 * played： 返回表示視頻已播放部分的 TimeRanges 對象。 * poster： 設置或返回視頻的 poster 屬性的值。 * preload： 設置或返回視頻的 preload 屬性的值。 * readyState： 返回視頻當前的就緒狀態。 * seekable： 返回表示視頻可尋址部分的 TimeRanges 對象。 * seeking： 返回用戶當前是否正在視頻中進行查找。 * src： 設置或返回視頻的 src 屬性的值。 * startDate： 返回表示當前時間偏移的 Date 對象。 * textTracks： 返回表示可用文本軌道的 TextTrackList 對象。 * videoTracks： 返回表示可用視頻軌道的 VideoTrackList 對象。 * volume： 設置或返回視頻的音量。 * width ：設置或返回視頻的 width 屬性的值。 * Video 對象方法： * addTextTrack()： 向視頻添加新的文本軌道。 * canPlayType()： 檢查瀏覽器是否能夠播放指定的視頻類型。 * load()： 重新加載視頻元素。 * play()： 開始播放視頻。 * pause()： 暫停當前播放的視頻。 ## Media 事件 >然后列出可以用于視頻狀態監控的Media 事件 （由媒介（比如視頻、圖像和音頻）觸發的事件，適用于所有html元素，但常用于 audio、embed、img、object 以及 video中）： | 事件名 | 類型 | 說明| |:--:|:--:| | onabort |script | 在退出時運行的腳本 | | oncanplay |script | 當文件就緒可以開始播放時運行的腳本（緩沖已足夠開始時） | | oncanplaythrough |script | 當媒介能夠無需因緩沖而停止即可播放至結尾時運行的腳本 | | ondurationchange |script | 當媒介長度改變時運行的腳本 | | onemptied |script | 當發生故障并且文件突然不可用時運行的腳本（比如連接意外斷開時） | | onended |script | 當媒介已到達結尾時運行的腳本（可發送類似“感謝觀看”之類的消息） | | onerror |script | 當在文件加載期間發生錯誤時運行的腳本 | | onloadeddata |script | 當媒介數據已加載時運行的腳本 | | onloadedmetadata |script | 當元數據（比如分辨率和時長）被加載時運行的腳本 | | onloadstart |script | 在文件開始加載且未實際加載任何數據前運行的腳本 | | onpause |script | 當媒介被用戶或程序暫停時運行的腳本 | | onplay |script | 當媒介已就緒可以開始播放時運行的腳本 | | onplaying |script | 當媒介已開始播放時運行的腳本 | | onprogress |script | 當瀏覽器正在獲取媒介數據時運行的腳本 | | onratechange |script | 每當回放速率改變時運行的腳本（比如當用戶切換到慢動作或快進模式） | | onreadystatechange|script | 每當就緒狀態改變時運行的腳本（就緒狀態監測媒介數據的狀態）| | onseeked |script | 當 seeking 屬性設置為 false（指示定位已結束）時運行的腳本| | onseeking |script | 當 seeking 屬性設置為 true（指示定位是活動的）時運行的腳本| | onstalled |script | 在瀏覽器不論何種原因未能取回媒介數據時運行的腳本| | onsuspend |script | 在媒介數據完全加載之前不論何種原因終止取回媒介數據時運行的腳本| | ontimeupdate |script | 當播放位置改變時（比如當用戶快進到媒介中一個不同的位置時）運行的腳本| | onvolumechange |script | 每當音量改變時（包括將音量設置為靜音）時運行的腳本| | onwaiting |script | 當媒介已停止播放但打算繼續播放時（比如當媒介暫停已緩沖更多數據）運行腳本| 這些Media 事件在不同平臺下表現各異，事件觸發的場景有差異，事件觸發后Video對象屬性的返回值也不盡相同，下面重點歸納其差異點，首先我們會給出結論，然后附上測試數據。 測試直接使用最簡單的方式，在頁面上添加video標簽播放視頻，視頻設置循環播放屬性loop。 ## 視頻監控結論 首先重點介紹video對象的buffered屬性： buffered返回 TimeRanges 對象，TimeRanges 對象表示用戶已緩沖音視頻的時間范圍，如果用戶在音視頻中跳躍播放，會得到多個緩沖范圍。這里要強調的是如果跳躍播放，得到的多個緩沖范圍是按照大小順序排列，無重復覆蓋的。 目前可以監控的事件有以下幾點： ### 1、 視頻加載時間 play事件觸發時間 至 timeupdate事件第一次currentTime 屬性值發生變化時，在加載過程中可用suspend判斷是否有手動暫停。 ### 2、 視頻緩沖次數 video對象的buffered屬性返回表示視頻已緩沖部分的 TimeRanges 對象，currentTime屬性設置或返回視頻中的當前播放位置（以秒計），利用緩沖區的變化可以記錄視頻緩沖次數。 目前嘗試的緩沖判斷為： timeupdate事件中，currentTime 超出 buffered的記錄范圍。 ### 3、 視頻流中斷 引起視頻停止播放的原因有：手動暫停、視頻流中斷、視頻播放完畢，切換程序，所以用視頻停止播放來判斷斷流不準確。 要盡可能的實時監控視頻流是否中斷，目前還是嘗試使用video對象的buffered屬性， 因為視頻斷流意味著buffered緩沖區不會再發生變化。 視頻流中斷判斷可表述為： timeupdate事件中，currentTime所在的緩沖buffered段的尾部時間，不等于視頻的總長度duration， 且連續多次沒有變化。具體使用連續多少次作為閾值，需要反復測試，目前所得結論是20次。