多媒體H5:移動端最簡單的動畫制作方案

2 評論 19208 瀏覽 35 收藏 7 分鐘

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

多媒體H5的現(xiàn)狀

從吳某凡假新聞H5的出現(xiàn)到現(xiàn)在,使用視頻制作H5動畫越來越流行,現(xiàn)在已然形趨勢。

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

下面分析一下多媒體H5:

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

1、實物動畫

偶像、明星、美女、帥哥真人拍攝,效果逼真,更吸引眼球。

2、豐富的視聽享受

明星說唱,聲優(yōu)配音,魔性音樂,不但看得到還聽得到。

3、動畫播放再無BUG

視頻不需要代碼去控制播放,沒有代碼就沒有BUG,視頻就是動畫。

4、動畫效果流暢酷炫

不用擔心動畫元素太多,圖片太大,手機性能低等性能問題,動畫怎么酷炫怎么做。

以前動畫需要很多文件現(xiàn)在只要一個。

5、動畫控制簡單靈活

視頻是一個整體動畫,任何的移動縮放都不會影響動畫的內(nèi)容 前進、后退、快進、快退、暫停都可以只用一個視頻完成。

6、動畫和重構(gòu)分離

重構(gòu)只需展示動畫和控制交互,無需關(guān)心動畫的內(nèi)容 動畫和重構(gòu)可以并行。

7、想對體積更小,可持續(xù)加載

相對canvas動畫文件更少,整體文件大小也小很多 支持一邊加載一邊播放動畫。

8、更短的制作周期

整體制作周期可以縮短3-5個工作日,多更少的時間做更多的事件。

多媒體H5的缺點

1、不支持預加載

video的預加載支持不好,如果不是頁面一開始就播放視頻,可以在用戶觸摸屏幕時播放視頻然后馬上暫時,這樣可以加載視頻。

2、觸發(fā)機制

一些手機必須用戶觸摸手機屏幕視頻才可以播放,需要引導用戶點擊屏幕。

3、播放延遲

點了播放視頻但是有時因為視頻還沒有加載好所以不能馬上播放,可以用動畫過渡等待時間。

4、慢網(wǎng)絡體驗差

視頻是持續(xù)加載的,如果網(wǎng)絡慢用戶體驗會非常差,卡卡卡。

5、非高清畫質(zhì)

高清畫質(zhì)視頻的大小會非常大,用戶加載頁面時間太久,一般不選擇高清畫質(zhì)。

6、視頻置頂播放

原生播放組件被喚起,視頻彈窗并置頂,遮擋整個頁面,頁面無法交互。

置頂播放,不可以交互,明顯的視頻

內(nèi)聯(lián)播放

解決方法:

(1)css

(2)html

應用css和html代碼測試如果還不能內(nèi)聯(lián)播放視頻,根據(jù)條件判斷使用下面的插件播放視頻,因為插件性能沒有原生播放器好,所以只對不能內(nèi)聯(lián)播放的手機或是瀏覽器使用。

(3)javasctipt

7、單音軌

很多手機只支持同時播放一個音頻,視頻沒有聲音也算一個音頻,video播放視頻后無法靜音

多媒體H5的建議

視頻

1、視頻的時長建議60S內(nèi),大小盡可能壓縮,最好在10M內(nèi),用戶調(diào)查發(fā)現(xiàn)用戶擔心看H5浪費過多流量,視頻格式mp4

2、建議視頻1S平均大小范圍控制在0.09~0.17M,根據(jù)畫質(zhì)要求選擇,如果畫質(zhì)要求較高可適當超出,可以通過視頻的時長提前估計視頻的大小,例如:60S的視頻大小范圍5.4~10.2M

3、和動畫師溝通保證視頻清晰度的前提下盡量壓縮視頻, 動畫設計時和設計師溝通少用過于炫麗的色彩能有效減少視頻大小

4、因為視頻是一邊播放一邊加載,因此不但視頻的大小會影響加載體驗,視頻的清晰度對加載體驗影響更大,5M以下的視頻高清也很流暢

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

音頻

1、音頻建議在30S內(nèi),背景音樂15S左右,格式mp3

2、音頻1S平均大小范圍7-12K,可以通過音頻的時長提前估計音頻的大小,例如:15S的音頻大小范圍105~180K

完。

 

作者:小明

本文由 @小明 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可,禁止轉(zhuǎn)載。

更多精彩內(nèi)容,請關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
評論
評論請登錄
  1. 還8

    回復
    1. 71折 7

      回復