wechatVideoExample
1.0.0
微信播放影片的測試原始碼： 由於微信使用X5瀏覽器，在使用video標籤播放影片的時候出現各種奇葩問題。本源碼是在解決這個問題的過程中所做的嘗試性源碼。 裡面囊括了各種測試用例： 使用canvas播放視頻， 使用圖片播放視頻， 使用x5標籤等。 這個可用留存的源碼庫，有興趣的同學可以自己下載。
###使用簡介下載後，在主機新建目錄，把原始碼全部拷貝到這個目錄裡。 用微信瀏覽器造訪裡面的html頁面來測試。
作者chenjsh36 螞蟻金服‧數據體驗技術團隊
隨著流量時代的到來和硬體技術的提升，越來越多的網站希望能在PC端或行動端播放自己的視頻，而<video>的兼容性的逐漸完善，使得開發者更願意使用它來實現影片播放場景。
本篇文章主要羅列__影片播放的通用場景及各場景下踩過的坑__，希望能__幫助開發者在遇到需求開發時能更快地選擇合適的技術方案同時減少採坑的次數__。
autoPlay布爾屬性；指定後，影片會馬上自動開始播放，不會停下來等待資料載入結束。
影片自動播放可以在頁面開啟且資源載入足夠的情況下讓影片自動播放，減少一次使用者點擊的交互，同時可以應用在動效背景、H5仿影片通話的功能。不過由於各種原因，自動播放無論在PC端或行動端都有不同程度的限制。
早期必須要有使用者手勢（user gesture）video標籤才可以播放；從版本10開始修改了video的規則，蘋果放寬了inline和autoplay ，策略如下（僅適用於Safari瀏覽器）：
<video> elements will be allowed to autoplay without a user gesture if their source media contains no audio tracks.(無音訊來源的video 元素允許自動播放)<video muted> elements will also be allowed to autoplay without a user gesture.（禁音的video 元素允許自動播放）<video> element gains an audio track or becomes un-muted without a user gesture, playback will pause.（如果video 元素在沒有用戶手勢下有了音頻源或者變成非禁音，會暫停播放）<video autoplay> elements will only begin playing when visible on-screen such as when they are scrolled into the viewport, made visible through CSS, and inserted into the DOM.（video 元素屏幕可見才開始播放）<video autoplay> elements will pause if they become non-visible, such as by being scrolled out of the viewport.（video元素不可見後停止播放） __早期__同樣需要使用者手勢才可以播放；安卓的chrome 53 後放寬了自動播放策略，策略不同於IOS的Safari，需要同時對video 設定autoplay和muted （是否禁音），才允許自動播放； __安卓的FireFox 和UC 瀏覽器__支援任何情況下的自動播放；安卓的其他瀏覽器暫時不清楚情況；
早期是__支援自動播放，但__近來Safari、Chrome陸續修改了自動播放的策略…
__Safari 10後__帶音訊的視訊和音訊預設禁止自動播放，更多資訊可以參考這篇文章；
Chrome（舊版） 下自動播放：
Safari （10後）不會自動播放：
禁音的影片依舊可以播放，�有聲音的影片會根據__媒體參與指數__來決定能否自動播放，那什麼是媒體參與指數？官方給了解釋和相關的維度：
MEI 是評估使用者對於目前網站的媒體參與程度的指數，它取決於下面幾個維度:
- 用戶在媒體上停留時間超過了7秒以上
- 音訊必須是展示出來，並且沒有靜音
- 與video 之間有過交互
- 媒體的尺寸不小於200x140.
看完後開發者的心裡是這樣的：
還好無論是Safari 還是Chrome，在限制了自動播放的同時，提供了檢測影片是否能自動播放的機制，以便於開發者在發現無法自動播放時有備選方案：
var promise = document.querySelector('video').play();
if (promise !== undefined) {
promise.catch(error => {
// Auto-play was prevented
// Show a UI element to let the user manually start playback
}).then(() => {
// Auto-play started
});
}
because it can be disruptive, data-hungry and many users don't like it . (因為它是破壞性的、需要大量流量同時很多用戶不喜歡它)
確實發現在微信常能看到自動播放的H5，但是作者自己寫的設定了autoplay、playsInline 的影片播放範例，在微信上依舊無法自動播放，而在釘子上卻可以自動播放
| 系統-瀏覽器 | 帶聲音 | 不帶聲音 |
|---|---|---|
| IOS 釘 | 支援 | 支援 |
| IOS Safari | 禁止 | 自動播放 |
| IOS 微信 | 禁止 | 禁止 |
透過查詢資料， IOS WebAPP 開發都是基於IOS 提供的瀏覽器核心進行開發的，所以在WebAPP 的webview 中可以修改自動播放的表現，釘釘明顯是支持自動播放，微信則是禁止自動播放，但是提供了內建事件來支援自動播放：
微信下透過WeixinJSBridgeReady事件進行自動播放：
document . addEventListener (
'WeixinJSBridgeReady' ,
function ( ) {
video . play ( ) ;
} ,
false
) ; 在行動裝置瀏覽器， video 在使用者點擊播放或透過API video.play() 觸發播放時，會強制以全螢幕置頂的形式進行播放，設計的初衷可能是因為全螢幕能提供更好的使用者體驗，但有時候開發者希望能自己控制是否全螢幕從而實現其他需求。
如果想實現不全螢幕播放，只要在video標籤加個playsinline屬性即可，這個屬性在__基於webkit核心的行動端瀏覽器__基本上沒問題，實在不行就再加個webkit-playsinline ：
< video
src = {videoUrl}
webkit-playsinline =" true "
playsinline =" true "
/>那麼對於其他核心的瀏覽器要怎麼處理呢？這個時候要了解下目前市面上存在的瀏覽器有哪些。
首先要知道全球目前四個瀏覽器核心：
其中：
而國內常見的PC瀏覽器如__UC瀏覽器、QQ瀏覽器、百度手機瀏覽器、360安全瀏覽器、谷歌瀏覽器、搜狗手機瀏覽器、獵豹瀏覽器__以及__移動端的UC、QQ、百度等手機瀏覽器__都是根據Webkit修改過來的內核，本質上我們可以認為市場上移動端用戶使用的基本上都是webkit內核或者基於webkit 內核做修改的瀏覽器，所以playsinline 的兼容性非常好！
video 元素有提供多個行為事件供開發者控制影片播放，相容性比較好的有onended 、 __ontimeupdate、onplay、onplaying等，__有些事件在不同瀏覽器不同裝置上的表現情況並不一致，
例如：ios 下監聽' canplay '（是否已經緩衝了足夠的資料可以流暢播放）,當載入時是不會觸發的，即使__preload="auto" __也沒用，但在pc 的Chrome 偵錯器下，是會在載入階段就觸發。 ios 需要播放後才會觸發。
載入完成：
點擊播放：
載入完成：
點擊播放
載入完成：
點擊播放：
部分事件在不同系統、設備、瀏覽器下顯示的特性不一致，使用的時候需謹慎。
controls 加上這個屬性，Gecko 會提供使用者控制，讓使用者可以控制影片的播放，包括音量，跨幀，暫停/恢復播放。
controls 屬性規定瀏覽器應該為影片提供播放控件，反之則隱藏播放控件，那麼開發者可以自訂自己的播放控件。隱藏播放控制在PC 端和IOS 行動端相容性良好，而在__安卓行動端並不支援隱藏控制__，不過還是可以透過一些方法來實現。
比較黑科技的方法是放大視頻，把控制條移到視野之外，從而達到隱藏的效果！其實就是讓影片元素比父容器還大，這樣底部的控制條就會在父容器外面，然後父容器設定為： overflow:hidden,實現隱藏播放控制的方法！ 缺點是影片會放大，需要事先留好空白供放大用。
騰訊的android團隊的x5內核團隊放開了視頻播放的限制，視頻不一定調用它們那個備受詬病的視頻播放器了，利用__x5-video-player-type="h5"屬性隱藏控制元素，同時__影片不再置頂，允許其他元素浮動在頂層。
了解了影片播放的通用場景及常見的坑後，我們只要__針對不同的場景提供對應的兜底方案__就能增強使用者體驗效果。例如行動裝置自動播放的H5 頁面，可以透過引導使用者進行點擊或滑動來間接觸發影片播放是最保守的做法，no bug！更好的方案是預設自動播放並捕捉禁止播放的情況，再引導使用者進行互動實現影片播放。
使用video進行視訊播放早期因為涉及到性能消耗大、流量消耗多以及處於用戶體驗等的考慮，在移動端被限制得很嚴重，但是隨著手機性能的提升、流量時代的到來、更強地場景需求，逐步放寬了限制，而PC端則逐漸從“寬鬆世代”走向“緊縮世代”，兩者都有出於讓用戶有更好地體驗的目的而不斷更新自己的策略，未來也許會走向一統，開發者就可以從底層兼容適配中釋放出來，從而有更多地精力來做更上層的工作。
對我們團隊感興趣的可以關注專欄，關注github或發送簡歷至'tao.qit####alibaba-inc.com'.replace('####', '@')，歡迎有誌之士加入~
原文網址：https://github.com/ProtoTeam/blog/blob/master/201806/1.md
