多媒體H5:移動(dòng)端最簡(jiǎn)單的動(dòng)畫制作方案
了解和使用多媒體制作H5已經(jīng)成為前端工程師的必備技能。
多媒體H5的現(xiàn)狀
從吳某凡假新聞H5的出現(xiàn)到現(xiàn)在,使用視頻制作H5動(dòng)畫越來(lái)越流行,現(xiàn)在已然形趨勢(shì)。
了解和使用多媒體制作H5已經(jīng)成為前端工程師的必備技能。
下面分析一下多媒體H5:
多媒體H5的優(yōu)點(diǎn)
1、實(shí)物動(dòng)畫
偶像、明星、美女、帥哥真人拍攝,效果逼真,更吸引眼球。
2、豐富的視聽享受
明星說(shuō)唱,聲優(yōu)配音,魔性音樂(lè),不但看得到還聽得到。
3、動(dòng)畫播放再無(wú)BUG
視頻不需要代碼去控制播放,沒(méi)有代碼就沒(méi)有BUG,視頻就是動(dòng)畫。
4、動(dòng)畫效果流暢酷炫
不用擔(dān)心動(dòng)畫元素太多,圖片太大,手機(jī)性能低等性能問(wèn)題,動(dòng)畫怎么酷炫怎么做。
以前動(dòng)畫需要很多文件現(xiàn)在只要一個(gè)。
5、動(dòng)畫控制簡(jiǎn)單靈活
視頻是一個(gè)整體動(dòng)畫,任何的移動(dòng)縮放都不會(huì)影響動(dòng)畫的內(nèi)容 前進(jìn)、后退、快進(jìn)、快退、暫停都可以只用一個(gè)視頻完成。
6、動(dòng)畫和重構(gòu)分離
重構(gòu)只需展示動(dòng)畫和控制交互,無(wú)需關(guān)心動(dòng)畫的內(nèi)容 動(dòng)畫和重構(gòu)可以并行。
7、想對(duì)體積更小,可持續(xù)加載
相對(duì)canvas動(dòng)畫文件更少,整體文件大小也小很多 支持一邊加載一邊播放動(dòng)畫。
8、更短的制作周期
整體制作周期可以縮短3-5個(gè)工作日,多更少的時(shí)間做更多的事件。
多媒體H5的缺點(diǎn)
1、不支持預(yù)加載
video的預(yù)加載支持不好,如果不是頁(yè)面一開始就播放視頻,可以在用戶觸摸屏幕時(shí)播放視頻然后馬上暫時(shí),這樣可以加載視頻。
2、觸發(fā)機(jī)制
一些手機(jī)必須用戶觸摸手機(jī)屏幕視頻才可以播放,需要引導(dǎo)用戶點(diǎn)擊屏幕。
3、播放延遲
點(diǎn)了播放視頻但是有時(shí)因?yàn)橐曨l還沒(méi)有加載好所以不能馬上播放,可以用動(dòng)畫過(guò)渡等待時(shí)間。
4、慢網(wǎng)絡(luò)體驗(yàn)差
視頻是持續(xù)加載的,如果網(wǎng)絡(luò)慢用戶體驗(yàn)會(huì)非常差,卡卡卡。
5、非高清畫質(zhì)
高清畫質(zhì)視頻的大小會(huì)非常大,用戶加載頁(yè)面時(shí)間太久,一般不選擇高清畫質(zhì)。
6、視頻置頂播放
原生播放組件被喚起,視頻彈窗并置頂,遮擋整個(gè)頁(yè)面,頁(yè)面無(wú)法交互。
置頂播放,不可以交互,明顯的視頻
內(nèi)聯(lián)播放
解決方法:
(1)css
(2)html
應(yīng)用css和html代碼測(cè)試如果還不能內(nèi)聯(lián)播放視頻,根據(jù)條件判斷使用下面的插件播放視頻,因?yàn)椴寮阅軟](méi)有原生播放器好,所以只對(duì)不能內(nèi)聯(lián)播放的手機(jī)或是瀏覽器使用。
(3)javasctipt
7、單音軌
很多手機(jī)只支持同時(shí)播放一個(gè)音頻,視頻沒(méi)有聲音也算一個(gè)音頻,video播放視頻后無(wú)法靜音
多媒體H5的建議
視頻
1、視頻的時(shí)長(zhǎng)建議60S內(nèi),大小盡可能壓縮,最好在10M內(nèi),用戶調(diào)查發(fā)現(xiàn)用戶擔(dān)心看H5浪費(fèi)過(guò)多流量,視頻格式mp4
2、建議視頻1S平均大小范圍控制在0.09~0.17M,根據(jù)畫質(zhì)要求選擇,如果畫質(zhì)要求較高可適當(dāng)超出,可以通過(guò)視頻的時(shí)長(zhǎng)提前估計(jì)視頻的大小,例如:60S的視頻大小范圍5.4~10.2M
3、和動(dòng)畫師溝通保證視頻清晰度的前提下盡量壓縮視頻, 動(dòng)畫設(shè)計(jì)時(shí)和設(shè)計(jì)師溝通少用過(guò)于炫麗的色彩能有效減少視頻大小
4、因?yàn)橐曨l是一邊播放一邊加載,因此不但視頻的大小會(huì)影響加載體驗(yàn),視頻的清晰度對(duì)加載體驗(yàn)影響更大,5M以下的視頻高清也很流暢
注:以上數(shù)據(jù)來(lái)自王者故事站
音頻
1、音頻建議在30S內(nèi),背景音樂(lè)15S左右,格式mp3
2、音頻1S平均大小范圍7-12K,可以通過(guò)音頻的時(shí)長(zhǎng)提前估計(jì)音頻的大小,例如:15S的音頻大小范圍105~180K
完。
作者:小明
本文由 @小明 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可,禁止轉(zhuǎn)載。
還8
71折 7