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 事件（由媒介（好比視頻、圖像和音頻）觸發的事件，適用於全部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。

差別分析結論

事件屬性表現差別

---

event	pc側	iOS	android
loadstart	文件加載，video初始化，未加載任何數據	與PC側一致	一致
stalled	視頻沒有播放，沒有取回任何媒介數據：通常是因爲網絡情況不佳，致使視頻下載中斷	一致	可能在play()事件觸發前
play	play()事件觸發，狀態是開始播放，但視頻並未真正開始播放	一致	一致
waiting	play()事件觸發後，等待數據	一致	一致
durationchange	獲取到視頻長度，duration屬性能得到真實視頻長度	一致	可能在play()事件觸發前，可能沒有獲取到真實的視頻長度：可能觸發屢次， 只有最後一次才能獲取到真實的duration，以前的值有可能爲0或者1
loadedmetadata	play()事件觸發後，獲取到元數據	一致	play()事件觸發前，沒有獲取到真實的元數據
loadeddata	play()事件觸發後，獲取到媒介數據	一致	play()事件觸發前，沒有獲取到真實的媒介數據
canplay	能夠播放，但視頻可能還未真正開始播放，而且中途可能由於加載而暫停	一致	一致
playing	視頻開始播放	一致	可能還未真正開始播放，而且可能還未獲取到視頻長度
canplaythrough	視頻開始播放後，能夠流暢播放	一致	數據可能尚未開始加載，視頻可能還未開始播放， 視頻仍然會卡住
timeupdate	視頻播放後，更新播放進度， 會有明確的進度變化，能夠獲取到currentTime	一致	第一次可能會有偏差，若是 timeupdate事件的currentTime發生變化，表明視頻必定開始播放
progress	視頻播放後，持續下載， 能夠獲取到當前的緩存buffer，而且所有下載完畢後再也不觸發	一致	第一次可能會有偏差， 所有下載完畢後依然繼續觸發
suspend	緩衝中，視頻可能卡頓也可能在流暢播放中，所有緩存完畢後再也不觸發。視頻還未真實播放前，pause()事件會觸發suspend	一致	一致
pause	多是響應pause()事件暫停，或者是切出頁面自動暫停	一致	一致
seeking	拖動進度條時，尋找播放位置。或者播放完畢，尋找下一個視頻	一致	一致
seeked	拖動進度條時，定位到播放位置。或者開始播放下一個視頻，或者是從頭開始循環播放	一致	一致
error	錯誤，沒法定位錯誤緣由，沒法經過paly()事件繼續播放	一致	一致

測試數據

pc測試chrome

---

#	event	readyState	currentTime (s)	buffered (s)	duration (s)	視頻狀態
1	loadstart	NOTHING	0	null	NaN	準備請求數據（初始化完畢）
2	stalled	NOTHING	0	null	NaN
3	play	NOTHING	0	null	NaN	play()事件觸發，狀態是開始播放，但視頻並未真正開始播放
4	waiting	NOTHING	0	null	NaN	等待數據
5	durationchange	METADATA	0	0.6	44.2	獲取到視頻長度
6	loadedmetadata	METADATA	0	0.6	44.2	獲取到元數據
7	loadeddata	ENOUGH_DATA	0	1.06	44.2
8	canplay	ENOUGH_DATA	0	1.06	44.2	能夠播放，但中途可能由於加載而暫停
9	playing	ENOUGH_DATA	0	1.06	44.2	開始播放
10	canplaythrough	ENOUGH_DATA	0	1.06	44.2	能夠流暢播放
11	timeupdate	ENOUGH_DATA	0	1.06	44.2	播放進度變化
12	progress	ENOUGH_DATA	0.1	2.92	44.2	持續下載
13	timeupdate	ENOUGH_DATA	0.21	4.67	44.2	播放進度變化
...
38	suspend	ENOUGH_DATA	3.29	14.08	44.2	緩衝中，視頻可能卡頓也可能在流暢播放中
39	timeupdate	ENOUGH_DATA	3.48	14.08	44.2
...
490	timeupdate	ENOUGH_DATA	39.7	44.2	44.2
491	pause	ENOUGH_DATA	39.87	44.2	44.2	手動暫停
492	play	ENOUGH_DATA	39.87	44.2	44.2	play()事件觸發
493	playing	ENOUGH_DATA	40.06	44.2	44.2
494	timeupdate	ENOUGH_DATA	40.24	44.2	44.2
...
509	timeupdate	ENOUGH_DATA	43.99	44.2	44.2
510	timeupdate	METADATA	0	44.2	44.2	播放完畢
511	seeking	METADATA	0	44.2	44.2	尋找中
512	waiting	METADATA	0	44.2	44.2
513	progress	METADATA	0	44.2	44.2
514	timeupdate	ENOUGH_DATA	0	44.2	44.2
515	seeked	ENOUGH_DATA	0.05	44.2	44.2	播放完畢進度回到起點循環播放
516	canplay	ENOUGH_DATA	0.25	44.2	44.2
...
802	timeupdate	ENOUGH_DATA	23.46	44.2	44.2
803	error	ENOUGH_DATA	0	44.2	44.2	網絡斷開錯誤
804	timeupdate	ENOUGH_DATA	0	44.2	44.2	沒法繼續播放

iOS

iOS weixin

---

#	event	readyState	currentTime (s)	buffered (s)	duration (s)	視頻狀態
1	loadstart	NOTHING	0	null	NaN	準備請求數據（初始化完畢）
2	play	NOTHING	0	null	NaN	狀態是開始播放，但視頻並未真正開始播放
3	waiting	NOTHING	0	null	NaN	等待數據
4	durationchange	METADATA	0	7.63	44.2	獲取到視頻長度
5	loadedmetadata	METADATA	0	7.63	44.2	獲取到元數據
6	loadeddata	ENOUGH_DATA	0	7.63	44.2
7	canplay	ENOUGH_DATA	0	7.63	44.2	能夠播放，但中途可能由於加載而暫停
8	canplaythrough	ENOUGH_DATA	0	7.63	44.2	能夠流暢播放
9	playing	ENOUGH_DATA	0	7.63	44.2	開始播放
10	timeupdate	ENOUGH_DATA	0	7.63	44.2	播放進度變化
11	timeupdate	ENOUGH_DATA	0.25	7.63	44.2
...
22	timeupdate	ENOUGH_DATA	3.01	36.24	44.2
23	progress	ENOUGH_DATA	3.15	44.2	44.2	持續下載
24	suspend	ENOUGH_DATA	3.16	44.2	44.2
25	timeupdate	ENOUGH_DATA	3.26	44.2	44.2
...
39	pause	ENOUGH_DATA	6.47	44.2	44.2	手動暫停
40	play	ENOUGH_DATA	6.51	44.2	44.2
41	playing	ENOUGH_DATA	6.5	44.2	44.2
42	timeupdate	ENOUGH_DATA	6.72	44.2	44.2
...
61	timeupdate	ENOUGH_DATA	11.4	44.2	44.2
62	pause	ENOUGH_DATA	11.4	44.2	44.2	網絡環境切換，自動觸發
63	play	ENOUGH_DATA	11.38	44.2	44.2
64	playing	ENOUGH_DATA	11.41	44.2	44.2
65	timeupdate	ENOUGH_DATA	11.6	44.2	44.2
...
198	timeupdate	ENOUGH_DATA	44.15	44.2	44.2
199	timeupdate	ENOUGH_DATA	0	44.2	44.2	播放完畢
200	seeking	ENOUGH_DATA	0	44.2	44.2	尋找中
201	timeupdate	ENOUGH_DATA	0.1	44.2	44.2
202	seeked	ENOUGH_DATA	0.2	44.2	44.2	播放完畢進度回到起點循環播放
203	timeupdate	ENOUGH_DATA	0.37	44.2	44.2

iOS QQ

與微信無明顯差別

---

iOS safari

與微信無明顯差別

---

iOS QQ瀏覽器 x5內核

---

#	event	readyState	currentTime (s)	buffered (s)	duration (s)	視頻狀態
1	loadstart	NOTHING	0	null	NaN	準備請求數據（初始化完畢）
2	progress	METADATA	0	null	44.2
3	suspend	METADATA	0	null	44.2
4	durationchange	METADATA	0	null	44.2
5	loadedmetadata	METADATA	0	null	44.2	未觸發play()事件以前，自動觸發以上事件
6	timeupdate	METADATA	0	null	44.2	觸發play()事件，開始播放
7	timeupdate	METADATA	0	null	44.2
8	timeupdate	METADATA	0	null	44.2

在QQ瀏覽器中除了能夠獲取視頻長度，其餘屬性均沒法獲取。鑑於其表現比較詭異，咱們的對比中除開此特例。

android--三星GT-N7105 4.4.2

android weixin

---

#	event	readyState	currentTime (s)	buffered (s)	duration (s)	視頻狀態
1	loadstart	CURRENT_DATA	0	null	1	準備請求數據（初始化完畢）
2	durationchange	CURRENT_DATA	0	null	1
3	loadedmetadata	CURRENT_DATA	0	null	1
4	loadeddata	CURRENT_DATA	0	null	1
5	stalled	CURRENT_DATA	0	null	1	未觸發play()事件以前，自動觸發以上事件
6	play	ENOUGH_DATA	0	null	1	觸發play()事件，開始播放，但視頻可能並未馬上開始播放
7	waiting	ENOUGH_DATA	0	null	1
8	canplay	ENOUGH_DATA	0	null	1	可能由於加載而卡頓
9	canplaythrough	ENOUGH_DATA	0	null	1
10	playing	ENOUGH_DATA	0	null	1
11	timeupdate	ENOUGH_DATA	0	null	1
12	progress	ENOUGH_DATA	0	null	1
13	durationchange	ENOUGH_DATA	0	null	44.2
14	playing	ENOUGH_DATA	0	null	44.2	視頻真正開始播放
15	timeupdate	ENOUGH_DATA	0.04	null	44.2
...
90	timeupdate	ENOUGH_DATA	17.29	44.2	44.2
91	pause	ENOUGH_DATA	17.29	44.2	44.2
92	play	ENOUGH_DATA	17.29	44.2	44.2
93	playing	ENOUGH_DATA	17.29	44.2	44.2
94	timeupdate	ENOUGH_DATA	18.75	44.2	44.2
...
196	timeupdate	ENOUGH_DATA	0	44.2	44.2
197	seeking	ENOUGH_DATA	0	44.2	44.2
198	timeupdate	ENOUGH_DATA	0	44.2	44.2
199	pause	ENOUGH_DATA	0	44.2	44.2	沒法自動循環播放

android QQ

與微信無明顯差別

android QQ瀏覽器

與微信無明顯差別

android--華爲G610-U00 4.2.1

與三星GT-N7105 4.4.2 weixin版本無明顯差別