最近公司官網需要使用視訊當做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瀏覽器均有各類奇葩問題無法實現完美效果；

視訊的實現的侷限：

1. iOS下不能自動播放，需要至少touch一次螢幕，這個有時候還挺煩人的，例如我們想做一個H5 app閃屏的時候就蛋疼了。
2. 不能在中間穿插棒棒的互動效果，例如，需要視訊某一幀暫停，滑鼠hover或者touch的時候，當前畫面有互動效果，就很不好處理。
3. 播放的速率不能隨心所欲控制，視訊完成也就定死了。
4. 如果有些資訊是動態的，需要與使用者資訊關聯，則視訊方案也會面臨很大的調整，因為總不可能每一個使用者生成一個不一樣的視訊，需要輔助額外手段滿足需求（例如CSS覆蓋定位）。

此時又當如何處理呢？

我們可以使用序列圖片，通過JS指令碼，來模擬視訊播放效果，以上所有侷限將通通可以規避。

序列圖片視訊化技術高效能實現方法:

實現原理如下：

1. 圖片DOM物件預載入，放在記憶體中；
2. 播放開始，頁面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-p