最近在研究用影片取代動畫,用影片取代精靈動畫,我們稱這種影片叫做互動影片。
傳統的精靈動畫:因此,急需開發了一套技術,用影片取代精靈動畫。我們稱這種視頻叫做互動視頻
傳統影片的問題:其研究已經初步有成果了,順便總結下幾年移動H5開發中音頻與視頻遇到的實際問題及給出自己的解決方案
看最後實際效果:相容PC(>IE9) ,iphone,ipad, 安卓5.0
解決了iphone上,手動、自動、視窗化等問題,基本上能用於實際生產了
右邊是原視頻mp4文件
左邊影片取代了動畫,然後支援背景蒙板效果,能夠透出底圖,支援一系列的互動操作
H5 audio音頻每次透過new Audio 一個音訊對象,在IOS上可以看到會產生一個新的線程,這個很噁心
解決方案:new Audio一個對象,透過替換不同的音訊位址,達到不多開線程的目的
在安卓上支援不給力解決方案:低版安卓上的問題沒解,通常是混合開發都是可以調底層介面處理的,像是phonegap
iphone上不能自動播放解決方案:iphone上自動播放,是IOS設計的時候做的一個處理,看起來像是為了防止自動盜用流量吧
簡單來說,需要模擬使用者手動去觸發才可以,所以我們需要在最開始呼叫這樣一段程式碼:
這是我專案上的,我就直接扣過來了
//修復ios 瀏覽器不能自動播放音訊的問題在載入時創建新的audio 用的時候更換src即可Xut.fix = Xut.fix||{};if (Xut.plat.isBrowser && Xut.plat. isIOS) { var isAudio = false var fixaudio = function() { if (!isAudio) { isAudio = true; Xut.fix.audio = new Audio(); document.removeEventListener('touchstart', fixaudio, false); } }; document.addEventListener('touchstart', fixaudio, false);}假如在body上綁定這樣一個程式碼:透過手動觸發建立一個audio對象,然後保存在全域中
使用的時候如下
//如果為ios browser 用Xut.fix.audio 指定src 初始化見app.jsif (Xut.fix.audio) { audio = Xut.fix.audio; audio.src = url;} else { audio = new Audio(url );}audio.autoplay = true;audio.play();直接替換音訊物件即可,簡單來說,就是要自動就必須是使用者觸發建立的物件才能播
H5 video音頻視訊標籤可能在行動端用的很少,安卓支援太爛了,目測5.0才好轉
iphone上老問題,不能自動播放(省流量啊,省你妹!!!),並且預設就是全螢幕控製播放
很長一段時間裡,我都沒理會這個影片處理,安卓用底層,iphone直接用VideoJS,內建flash與h5切換的,flash也有支援問題
前陣子老闆有個需求,我們應用動畫太多了,都是精靈路線的組合動畫,一個app下來上百M 到幾百M不等
所以急需有方案可以壓縮圖片
最後的方案是採用影片取代動畫,因為影片壓縮技術發展了很多年,已經十分成熟了。現在視訊壓縮技術,能夠輕鬆地將720P的高畫質電影,壓縮到10M/分鐘,或160K/秒。比影像序列的檔案尺寸,至少小了幾十倍。同時,在於大部分設備,都支援對影片的硬體解壓縮,這樣呢,影片播放的CPU消耗很低,電池消耗也很低,同時播放速度還快。即使25幀的全螢幕播放,也能輕易實現。
方案定下來,需要解決的幾個問題就來了
1.整個視頻,包括視頻中的某些物體,能夠響應用戶的點擊、滑動之類的操作
2.在iPhone下面,可以在一個視窗中播放
3.能夠濾掉背景,從而能像PNG影像一樣運用
最後的實際效果也是開始gif動畫所示:
影片取代了動畫,然後支援背景蒙板效果,能夠透出底圖
同時也解決了,手動,自動,不全螢幕的問題
iphone窗口化解決方案:
透過canvas + video標籤結合處理
原理: 取得video的原圖幀,透過canavs繪製到頁面
這裡我直接附上原始碼把,程式碼寫的一般,但是突出了幾個重點
http://stackoverflow.com/questions/3699552/html5-inline-video-on-iphone-vs-ipad-browser
影片代替動畫這個有點麻煩,需要做交互,拖動canvas達到控製圖像的目的,目前我還沒有全部寫完,一般的公司需求也不會有這個這裡簡單的描述下,同樣是canvas + video處理的,但是需要有一個快取的canvas容器做一個預處理,透過預處理,拿到每一張圖的像素點,透過改變每一個像素點RBG的值,達到能夠過濾掉背景,從而能像PNG圖像一樣運用,以後寫好了,在發佈吧~~
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持VeVb武林網。