最近公司官網(wǎng)需要使用視頻當(dāng)做banner背景且自動(dòng)播放，并且因?yàn)槭枪倬W(wǎng)需要做到PC端和移動(dòng)端都可以適配兼容撒汉，這些問(wèn)題很是頭疼沟优；

兵來(lái)將擋，水來(lái)土掩睬辐，進(jìn)過(guò)查閱相關(guān)技術(shù)資料挠阁，現(xiàn)已完美兼容PC端和移動(dòng)端。下面就為大家詳細(xì)講解：

PC端：

PC端相應(yīng)簡(jiǎn)單些溯饵，瀏覽器對(duì)<video>標(biāo)簽的兼容還是很好的侵俗，但是想要在瀏覽器中當(dāng)做Banner視頻自動(dòng)播放就必須設(shè)置這些屬性來(lái)更好地實(shí)現(xiàn)；

<video

// 設(shè)置后丰刊，音頻會(huì)初始化為靜音隘谣，注意瀏覽器只有設(shè)置靜音，才能自動(dòng)播放

muted

// 視頻會(huì)馬上自動(dòng)開(kāi)始播放啄巧，不會(huì)停下來(lái)等著數(shù)據(jù)載入結(jié)束寻歧。

autoplay="autoplay"

// 布爾屬性；指定后秩仆，會(huì)在視頻結(jié)尾的地方码泛，自動(dòng)返回視頻開(kāi)始的地方

loop="loop"

// 一個(gè)布爾屬性，標(biāo)志視頻將被“inline”播放澄耍，即在元素的播放區(qū)域內(nèi)弟晚。

x5-playsinline="true"

playsinline="true"

webkit-playsinline="true"

// 一個(gè)布爾屬性忘衍，用于禁用使用有線連接的設(shè)備(HDMI、DVI等)的遠(yuǎn)程播放功能卿城。

x-webkit-airplay="allow"

// 這個(gè)視頻優(yōu)先加載

preload="auto"

// 啟用同層H5播放器枚钓，就是在視頻全屏的時(shí)候，div可以呈現(xiàn)在視頻層上瑟押，也是WeChat安卓版特有的屬性搀捷。同層播放別名也叫做沉浸式播放

x5-video-player-type="h5"

// :全屏設(shè)置。它又兩個(gè)屬性值多望，ture和false嫩舟，true支持全屏播放

x5-video-player-fullscreen="true"

>

// <source> 標(biāo)簽為媒介元素（比如 <video> 和 <audio>）定義媒介資源。

<source src="indexMove.mp4" type="video/mp4">

</video>

同上面方法設(shè)置后怀偷，PC網(wǎng)頁(yè)就可以實(shí)現(xiàn)自動(dòng)播放了家厌。Demo地址(碼云)：https://gitee.com/tzlibai/video-demo.git

移動(dòng)端：

移動(dòng)對(duì)于<video>標(biāo)簽極度不友好，以上面PC的設(shè)置在微信客戶端中無(wú)法實(shí)現(xiàn)自動(dòng)播放椎工，在Safari饭于、 谷歌瀏覽器、QQ瀏覽器均有各類奇葩問(wèn)題無(wú)法實(shí)現(xiàn)完美效果维蒙；

視頻的實(shí)現(xiàn)的局限：

1.iOS下不能自動(dòng)播放掰吕，需要至少touch一次屏幕，這個(gè)有時(shí)候還挺煩人的颅痊，例如我們想做一個(gè)H5 app閃屏的時(shí)候就蛋疼了殖熟。

2.不能在中間穿插棒棒的交互效果，例如斑响，需要視頻某一幀暫停菱属，鼠標(biāo)hover或者touch的時(shí)候，當(dāng)前畫(huà)面有交互效果舰罚，就很不好處理纽门。

3.播放的速率不能隨心所欲控制，視頻完成也就定死了沸停。

4.如果有些信息是動(dòng)態(tài)的，需要與用戶信息關(guān)聯(lián)昭卓，則視頻方案也會(huì)面臨很大的調(diào)整愤钾，因?yàn)榭偛豢赡苊恳粋€(gè)用戶生成一個(gè)不一樣的視頻，需要輔助額外手段滿足需求（例如CSS覆蓋定位）候醒。

此時(shí)又當(dāng)如何處理呢能颁？

我們可以使用序列圖片，通過(guò)JS腳本倒淫，來(lái)模擬視頻播放效果伙菊，以上所有局限將通通可以規(guī)避。

序列圖片視頻化技術(shù)高性能實(shí)現(xiàn)方法:

實(shí)現(xiàn)原理如下：

圖片DOM對(duì)象預(yù)加載，放在內(nèi)存中镜硕；

播放開(kāi)始运翼，頁(yè)面append當(dāng)前圖片DOM，同時(shí)移除上一幀DOM圖片（如果有）兴枯，保證頁(yè)面中僅有一個(gè)圖片序列元素血淌；

對(duì)，很簡(jiǎn)單财剖，沒(méi)什么高超的技巧悠夯，但就是這種實(shí)現(xiàn)策略，對(duì)頁(yè)面的開(kāi)銷是最小的躺坟，最終運(yùn)行體驗(yàn)是最好的沦补。

眼見(jiàn)為實(shí)，您可以狠狠地點(diǎn)擊這里：序列圖片實(shí)現(xiàn)視頻播放效果demo

效果之流暢咪橙，體驗(yàn)之良好夕膀，十有八九都會(huì)認(rèn)為是視頻，其實(shí)不是匣摘，就是圖片店诗，不斷的圖片DOM增刪實(shí)現(xiàn)的類似視頻效果。

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

1庞瘸、電腦打開(kāi)premiere cc 2017，導(dǎo)入視頻編輯好赠叼。

image

2擦囊、編輯好視頻后，按導(dǎo)出快捷鍵Ctrl+M調(diào)出導(dǎo)出頁(yè)面嘴办，然后格式選擇JPEG格式瞬场。

image

3、點(diǎn)擊輸出名稱選擇保存路徑涧郊。

image

4贯被、設(shè)置好格式和保存路徑后，點(diǎn)擊底部的導(dǎo)出妆艘，等待圖片的導(dǎo)出就可以了彤灶。

image

關(guān)于性能其他需要注意的

人眼的跟蹤能力要比大猩猩之類要弱的，因此批旺，實(shí)際開(kāi)發(fā)幌陕，并不一定需要每秒24幀的播放速率，你每秒18幀汽煮，對(duì)于一個(gè)H5運(yùn)營(yíng)活動(dòng)而言搏熄，用戶是無(wú)感知的棚唆。每秒18幀的播放可以節(jié)約不少請(qǐng)求和加載數(shù)據(jù)量，性能上也能有所提高心例，權(quán)衡來(lái)看宵凌，是推薦的，畢竟我們不是去參加動(dòng)畫(huà)比賽契邀，是一個(gè)在線的web產(chǎn)品摆寄。

設(shè)計(jì)師喜歡使用非常高清的圖片，實(shí)際上坯门，沒(méi)有必要微饥，注意度，2倍尺寸古戴，30%~40%的圖片質(zhì)量足夠了欠橘，效果也非常好，這也是經(jīng)過(guò)實(shí)踐的现恼，大家如果和設(shè)計(jì)師意見(jiàn)不一致肃续，就可以讓她看我寫(xiě)的這段話。有效降低不必要的圖片尺寸叉袍，可以大大節(jié)約內(nèi)存的開(kāi)銷始锚，也是可以提高播放的性能和品質(zhì)的。

于是喳逛，三管齊下：高性能技術(shù)實(shí)現(xiàn)策略瞧捌，適當(dāng)降低幀率，優(yōu)化圖片尺寸润文，必定助你H5炫酷效果流暢至極姐呐，好評(píng)如潮，boss交口稱贊典蝌！

大家也可以關(guān)注我的博客園地址：https://www.cnblogs.com/zhaohongcheng/p/11718887.html