海淘科技為你提供：[多媒體H5]移動(dòng)端最簡單的動(dòng)畫制作方案

自從吳亦凡假新聞H5的出現(xiàn)到現(xiàn)在，使用視頻制作H5動(dòng)畫越來越流行，現(xiàn)在已然形趨勢(shì)。

了解和使用多媒體制作H5已經(jīng)成為前端工程師的必備技能，下面分析一下多媒體H5。

多媒體H5的優(yōu)點(diǎn)

1. 實(shí)物動(dòng)畫：偶像、明星、美女、帥哥真人拍攝，效果逼真，更吸引眼球
2. 豐富的視聽享受：明星說唱，聲優(yōu)配音，魔性音樂，不但看得到還聽得到
3. 動(dòng)畫播放再無BUG：視頻不需要代碼去控制播放，沒有代碼就沒有BUG，視頻就是動(dòng)畫
4. 動(dòng)畫效果流暢酷炫：不用擔(dān)心動(dòng)畫元素太多，圖片太大，手機(jī)性能低等性能問題 動(dòng)畫怎么酷炫怎么做

以前動(dòng)畫需要很多文件現(xiàn)在只要一個(gè)

1. 動(dòng)畫控制簡單靈活：視頻是一個(gè)整體動(dòng)畫，任何的移動(dòng)縮放都不會(huì)影響動(dòng)畫的內(nèi)容 前進(jìn)、后退、快進(jìn)、快退、暫停都可以只用一個(gè)視頻完成
2. 動(dòng)畫和重構(gòu)分離：重構(gòu)只需展示動(dòng)畫和控制交互，無需關(guān)心動(dòng)畫的內(nèi)容 動(dòng)畫和重構(gòu)可以并行
3. 想對(duì)體積更小，可持續(xù)加載：相對(duì)canvas動(dòng)畫文件更少，整體文件大小也小很多 支持一邊加載一邊播放動(dòng)畫
4. 更短的制作周期：整體制作周期可以縮短3-5個(gè)工作日，多更少的時(shí)間做更多的事件

多媒體H5的缺點(diǎn)

1. 不支持預(yù)加載：video的預(yù)加載支持不好，如果不是頁面一開始就播放視頻，可以在用戶觸摸屏幕時(shí)播放視頻然后馬上暫時(shí)，這樣可以加載視頻
2. 觸發(fā)機(jī)制：一些手機(jī)必須用戶觸摸手機(jī)屏幕視頻才可以播放，需要引導(dǎo)用戶點(diǎn)擊屏幕
3. 播放延遲：點(diǎn)了播放視頻但是有時(shí)因?yàn)橐曨l還沒有加載好所以不能馬上播放，可以用動(dòng)畫過渡等待時(shí)間
4. 慢網(wǎng)絡(luò)體驗(yàn)差：視頻是持續(xù)加載的，如果網(wǎng)絡(luò)慢用戶體驗(yàn)會(huì)非常差，卡卡卡
5. 非高清畫質(zhì)：高清畫質(zhì)視頻的大小會(huì)非常大，用戶加載頁面時(shí)間太久，一般不選擇高清畫質(zhì)
6. 視頻置頂播放：原生播放組件被喚起，視頻彈窗并置頂，遮擋整個(gè)頁面，頁面無法交互

置頂播放，不可以交互，明顯的視頻 內(nèi)聯(lián)播放

解決方法

css

.IIV::-webkit-media-controls-play-button,
.IIV::-webkit-media-controls-start-playback-button { opacity: 0; pointer-events: none; width: 5px; }

html

應(yīng)用css和html代碼測(cè)試如果還不能內(nèi)聯(lián)播放視頻，根據(jù)條件判斷使用下面的插件播放視頻，因?yàn)椴寮阅軟]有原生播放器好，所以只對(duì)不能內(nèi)聯(lián)播放的手機(jī)或是瀏覽器使用

javasctipt

var video = document.getElementById("video"),ua = window.navigator.userAgent.toLowerCase();
if (/iphone|ipad|ipod/.test(ua)) {
//判斷是IOS，這里的條件根據(jù)實(shí)測(cè)情況修改
window.makeVideoPlayableInline(video);
}

7.單音軌：很多手機(jī)只支持同時(shí)播放一個(gè)音頻，視頻沒有聲音也算一個(gè)音頻，video播放視頻后無法靜音

多媒體H5的建議

視頻

1. 視頻的時(shí)長建議60S內(nèi)，大小盡可能壓縮，最好在10M內(nèi)，用戶調(diào)查發(fā)現(xiàn)用戶擔(dān)心看H5浪費(fèi)過多流量，視頻格式mp4
2. 建議視頻1S平均大小范圍控制在0.09~0.17M，根據(jù)畫質(zhì)要求選擇，如果畫質(zhì)要求較高可適當(dāng)超出，可以通過視頻的時(shí)長提前估計(jì)視頻的大小，例如：60S的視頻大小范圍5.4~10.2M
3. 和動(dòng)畫師溝通保證視頻清晰度的前提下盡量壓縮視頻， 動(dòng)畫設(shè)計(jì)時(shí)和設(shè)計(jì)師溝通少用過于炫麗的色彩能有效減少視頻大小
4. 因?yàn)橐曨l是一邊播放一邊加載，因此不但視頻的大小會(huì)影響加載體驗(yàn)，視頻的清晰度對(duì)加載體驗(yàn)影響更大，5M以下的視頻高清也很流暢

注：以上數(shù)據(jù)來自王者故事站

音頻

1. 音頻建議在30S內(nèi)，背景音樂15S左右，格式mp3
2. 音頻1S平均大小范圍7-12K，可以通過音頻的時(shí)長提前估計(jì)音頻的大小，例如：15S的音頻大小范圍105~180K

海淘科技網(wǎng)站建設(shè)官網(wǎng)，不僅提供文章下載，點(diǎn)擊：[多媒體H5]移動(dòng)端最簡單的動(dòng)畫制作方案，還提供更多的手機(jī)建站知識(shí)。