創新互聯為你提供：[多媒體H5]移動端最簡單的動畫制作方案

自從吳亦凡假新聞H5的出現到現在，使用視頻制作H5動畫越來越流行，現在已然形趨勢。

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

多媒體H5的優點

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

以前動畫需要很多文件現在只要一個

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

多媒體H5的缺點

1. 不支持預加載：video的預加載支持不好，如果不是頁面一開始就播放視頻，可以在用戶觸摸屏幕時播放視頻然后馬上暫時，這樣可以加載視頻
2. 觸發機制：一些手機必須用戶觸摸手機屏幕視頻才可以播放，需要引導用戶點擊屏幕
3. 播放延遲：點了播放視頻但是有時因為視頻還沒有加載好所以不能馬上播放，可以用動畫過渡等待時間
4. 慢網絡體驗差：視頻是持續加載的，如果網絡慢用戶體驗會非常差，卡卡卡
5. 非高清畫質：高清畫質視頻的大小會非常大，用戶加載頁面時間太久，一般不選擇高清畫質
6. 視頻置頂播放：原生播放組件被喚起，視頻彈窗并置頂，遮擋整個頁面，頁面無法交互

置頂播放，不可以交互，明顯的視頻 內聯播放

解決方法

css

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

html

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

javasctipt

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

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

創新互聯網站建設官網，不僅提供，還提供更多的手機建站知識。

本文題目：[多媒體H5]移動端最簡單的動畫制作方案
當前路徑：http://m.newbst.com/news19/170269.html

成都網站建設公司_創新互聯，為您提供微信小程序、網站改版、App設計、品牌網站制作、網站維護、虛擬主機

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯