最近公司官網需要使用視頻當做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/
如果大家有任何疑問即可留言反饋，會在第一時間回復反饋，謝謝大家！
本人使用GSAP框架搭建的個人網站也上線啦！有興趣可以訪問 zhaohongcheng.com 查看，感謝~
本人uni-app影視項目已經重磅開源，一套代碼套發布到H5、APP、小程序等多個平台！有興趣可以訪問Dcloud官方插件市場https://ext.dcloud.net.cn/plugin?id=1839 查看，感謝~
本文為Tz張無忌文章，讀后有收獲可以請作者喝杯咖啡，轉載請文章注明出處：https://www.cnblogs.com/zhaohongcheng/