多大的視頻和音頻適合放入H5？
近期一個很火的H5現象
用魔性的音樂、歌詞、畫面來吸引眼球
歷史人物、熟悉的歌曲、童年回憶的動畫
都被改編，各種讓人意向不到
腦洞之大令人咋舌
多媒體H5的現狀
從吳亦凡假新聞到故宮，再到薛之謙的刷屏，使用視頻制作H5動畫越來越流行，現在已然形趨勢。
了解和使用多媒體制作H5現在不全是前端工程師的必備技能了，策劃、設計、各項目人員對這方面有一點了解，相信工作時流程溝通會更順更好。
下面分析一下多媒體H5
和視頻及音頻嵌入H5的建議
多媒體H5的優缺點
優點：
1、實物動畫：偶像、明星、美女、帥哥真人拍攝，效果逼真，更吸引眼球
2、豐富的視聽享受：明星說唱，聲優配音，魔性音樂，不但看得到還聽得到
3、動畫播放再無BUG：視頻不需要代碼去控制播放，沒有代碼就沒有BUG，視頻就是動畫
4、動畫效果流暢酷炫：不用擔心動畫元素太多，圖片太大，手機性能低等性能問題 動畫怎么酷炫怎么做
以前動畫需要很多文件
現在只要一個
5、動畫控制簡單靈活：視頻是一個整體動畫，任何的移動縮放都不會影響動畫的內容 前進、后退、快進、快退、暫停都可以只用一個視頻完成
6、動畫和重構分離：重構只需展示動畫和控制交互，無需關心動畫的內容 動畫和重構可以并行
7、想對體積更小，可持續加載：相對canvas動畫文件更少，整體文件大小也小很多 支持一邊加載一邊播放動畫
8、更短的制作周期：整體制作周期可以縮短3-5個工作日，多更少的時間做更多的事件
缺點：
1、不支持預加載：video的預加載支持不好，如果不是頁面一開始就播放視頻，可以在用戶觸摸屏幕時播放視頻然后馬上暫時，這樣可以加載視頻
2、觸發機制：一些手機必須用戶觸摸手機屏幕視頻才可以播放，需要引導用戶點擊屏幕
3、播放延遲：點了播放視頻但是有時因為視頻還沒有加載好所以不能馬上播放，可以用動畫過渡等待時間
4、慢網絡體驗差：視頻是持續加載的，如果網絡慢用戶體驗會非常差，卡卡卡
5、非高清畫質：高清畫質視頻的大小會非常大，用戶加載頁面時間太久，一般不選擇高清畫質
6、視頻置頂播放：原生播放組件被喚起，視頻彈窗并置頂，遮擋整個頁面，頁面無法交互
置頂播放，不可以交互，明顯的視頻
內聯播放
7、單音軌：很多手機只支持同時播放一個音頻，視頻沒有聲音也算一個音頻，video播放視頻后無法靜音
多媒體H5的建議
視頻：
1、視頻的時長建議60S內，大小盡可能壓縮，最好在10M內，用戶調查發現用戶擔心看H5浪費過多流量，視頻格式mp4
2、建議視頻1S平均大小范圍控制在0.09~0.17M，根據畫質要求選擇，如果畫質要求較高可適當超出，可以通過視頻的時長提前估計視頻的大小，例如：60S的視頻大小范圍5.4~10.2M
3、和動畫師溝通保證視頻清晰度的前提下盡量壓縮視頻， 動畫設計時和設計師溝通少用過于炫麗的色彩能有效減少視頻大小
4、因為視頻是一邊播放一邊加載，因此不但視頻的大小會影響加載體驗，視頻的清晰度對加載體驗影響更大，5M以下的視頻高清也很流暢
注：以上數據來自王者故事站
音頻：
1、音頻建議在30S內，背景音樂15S左右，格式mp3
2、音頻1S平均大小范圍7-12K，可以通過音頻的時長提前估計音頻的大小，例如：15S的音頻大小范圍105~180K
—END—
微信公眾號搜索" 型科科技 "加關注
專注H5、小程序定制開發、H5案例分享
評論
評論
推薦評論
暫無評論哦，快來評論一下吧！
全部評論（0條）