最近公司官網需要使用視訊當做banner背景且自動播放，并且因為是官網需要做到PC端和移動端都可以适配相容，這些問題很是頭疼；
兵來将擋，水來土掩，進過查閱相關技術資料，現已完美相容PC端和移動端。下面就為大家詳細講解：
PC端：
PC端相應簡單些，浏覽器對<video>标簽的相容還是很好的，但是想要在浏覽器中當做Banner視訊自動播放就必須設定這些屬性來更好地實作；
<video
// 設定後，音頻會初始化為靜音，注意浏覽器隻有設定靜音，才能自動播放
muted
// 視訊會馬上自動開始播放，不會停下來等着資料載入結束。
autoplay="autoplay"
// 布爾屬性；指定後，會在視訊結尾的地方，自動傳回視訊開始的地方
loop="loop"
// 一個布爾屬性，标志視訊将被“inline”播放，即在元素的播放區域内。
x5-playsinline="true"
playsinline="true"
webkit-playsinline="true"
// 一個布爾屬性，用于禁用使用有線連接配接的裝置(HDMI、DVI等)的遠端播放功能。
x-webkit-airplay="allow"
// 這個視訊優先加載
preload="auto"
// 啟用同層H5播放器，就是在視訊全屏的時候，div可以呈現在視訊層上，也是WeChat安卓版特有的屬性。同層播放别名也叫做沉浸式播放
x5-video-player-type="h5"
// :全屏設定。它又兩個屬性值，ture和false，true支援全屏播放
x5-video-player-fullscreen="true"
>
// <source> 标簽為媒介元素（比如 <video> 和 <audio>）定義媒介資源。
<source src="indexMove.mp4" type="video/mp4">
</video>
同上面方法設定後，PC網頁就可以實作自動播放了。Demo位址(碼雲)：https://gitee.com/tzlibai/video-demo.git
移動端：
移動對于<video>标簽極度不友好，以上面PC的設定在微信用戶端中無法實作自動播放，在Safari、 谷歌浏覽器、QQ浏覽器均有各類奇葩問題無法實作完美效果；
視訊的實作的局限：
- iOS下不能自動播放，需要至少touch一次螢幕，這個有時候還挺煩人的，例如我們想做一個H5 app閃屏的時候就蛋疼了。
- 不能在中間穿插棒棒的互動效果，例如，需要視訊某一幀暫停，滑鼠hover或者touch的時候，目前畫面有互動效果，就很不好處理。
- 播放的速率不能随心所欲控制，視訊完成也就定死了。
- 如果有些資訊是動态的，需要與使用者資訊關聯，則視訊方案也會面臨很大的調整，因為總不可能每一個使用者生成一個不一樣的視訊，需要輔助額外手段滿足需求（例如CSS覆寫定位）。
此時又當如何處理呢？
我們可以使用序列圖檔，通過JS腳本，來模拟視訊播放效果，以上所有局限将通通可以規避。
序列圖檔視訊化技術高性能實作方法:
實作原理如下：
- 圖檔DOM對象預加載，放在記憶體中；
- 播放開始，頁面append目前圖檔DOM，同時移除上一幀DOM圖檔（如果有），保證頁面中僅有一個圖檔序列元素；
對，很簡單，沒什麼高超的技巧，但就是這種實作政策，對頁面的開銷是最小的，最終運作體驗是最好的。
眼見為實，您可以狠狠地點選這裡：序列圖檔實作視訊播放效果demo
效果之流暢，體驗之良好，十有八九都會認為是視訊，其實不是，就是圖檔，不斷的圖檔DOM增删實作的類似視訊效果。
核心JS代碼如下（完整代碼見demo），假設
container
是容器元素，我們的圖檔已經預加載到
store
對象中，結構如下：
var store = {
length: 47,
1: img1,
2: img2,
...
47: img47
}; var index = 1;
container.innerHTML = '';
// 依次append圖檔對象
var step = function () {
if (store[index - 1]) {
container.removeChild(store[index - 1]);
}
container.appendChild(store[index]);
// 序列增加
index++;
// 如果不超過最大限制，播放下一幀
if (index <= 47) {
// 42是按照每秒24幀計算的值
setTimeout(step, 42);
}
};
step();
container.removeChild(store[index - 1])
移除之前一幀圖檔DOM，
container.append(store[index])
則是插入目前一幀DOM，人的肉眼習慣連續性感覺事物，是以，這種删除和添加，使用者是無感覺的，于是一個流程的播放效果即達成，根據實踐，就算每幀圖檔在幾百K大小主流裝置也能hold住。
由于本質上播放的是DOM對象，是以，我們不僅可以播放圖檔DOM，還可以是有着豐富HTML結構的
<div>
元素，于是，什麼樣的互動實作都不在話下，比方說視訊中要出現使用者的姓名，怎麼辦，很簡單啊，
<div>
元素中定位下就好了。
現在，技術實作已經對設計沒有任何限制啦，剩下的就是産品和設計的創意，下一個爆款H5就是你了！
番外技能：如何把視訊變成序列圖檔？
1、電腦打開premiere cc 2017，導入視訊編輯好。
2、編輯好視訊後，按導出快捷鍵Ctrl+M調出導出頁面，然後格式選擇JPEG格式。
3、點選輸出名稱選擇儲存路徑。
4、設定好格式和儲存路徑後，點選底部的導出，等待圖檔的導出就可以了。
關于性能其他需要注意的
人眼的跟蹤能力要比大猩猩之類要弱的，是以，實際開發，并不一定需要每秒24幀的播放速率，你每秒18幀，對于一個H5營運活動而言，使用者是無感覺的。每秒18幀的播放可以節約不少請求和加載資料量，性能上也能有所提高，權衡來看，是推薦的，畢竟我們不是去參加動畫比賽，是一個線上的web産品。
設計師喜歡使用非常高清的圖檔，實際上，沒有必要，注意度，2倍尺寸，30%~40%的圖檔品質足夠了，效果也非常好，這也是經過實踐的，大家如果和設計師意見不一緻，就可以讓她看我寫的這段話。有效降低不必要的圖檔尺寸，可以大大節約記憶體的開銷，也是可以提高播放的性能和品質的。
于是，三管齊下：高性能技術實作政策，适當降低幀率，優化圖檔尺寸，必定助你H5炫酷效果流暢至極，好評如潮，boss交口稱贊！
本文序列化圖檔視訊方案參考連結：https://www.zhangxinxu.com/wordpress/2018/05/image-sequence-html5-video-play/