網頁背景H5視頻自動播放---PC端、移動端兼容問題完美解決方案（IOS、安卓、微信端）

最近公司官網須要使用視頻當作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就是你了！

 

番外技能：如何把視頻變成序列圖片？

 

一、電腦打開premiere cc 2017，導入視頻編輯好。

二、編輯好視頻後，按導出快捷鍵Ctrl+M調出導出頁面，而後格式選擇JPEG格式。

三、點擊輸出名稱選擇保存路徑。

四、設置好格式和保存路徑後，點擊底部的導出，等待圖片的導出就能夠了。

 

 

關於性能其餘須要注意的

人眼的跟蹤能力要比大猩猩之類要弱的，所以，實際開發，並不必定須要每秒24幀的播放速率，你每秒18幀，對於一個H5運營活動而言，用戶是無感知的。每秒18幀的播放能夠節約很多請求和加載數據量，性能上也能有所提升，權衡來看，是推薦的，畢竟咱們不是去參加動畫比賽，是一個在線的web產品。

 

設計師喜歡使用很是高清的圖片，實際上，沒有必要，注意度，2倍尺寸，30%~40%的圖片質量足夠了，效果也很是好，這也是通過實踐的，你們若是和設計師意見不一致，就可讓她看我寫的這段話。有效下降沒必要要的圖片尺寸，能夠大大節約內存的開銷，也是能夠提升播放的性能和品質的。

 

因而，三管齊下：高性能技術實現策略，適當下降幀率，優化圖片尺寸，一定助你H5炫酷效果流暢至極，好評如潮，boss交口稱讚！

 

本文序列化圖片視頻方案參考連接：https://www.zhangxinxu.com/wordpress/2018/05/image-sequence-html5-video-play/

原文出處：https://www.cnblogs.com/zhaohongcheng/p/11718887.html