最近在研究用視訊代替動畫，已經初步有成果了，順便總結下幾年開發中遇到的實際問題及給出自己的解決方案
看下最後實際效果：相容PC，iphone， 安卓5.0
解決了，手動，自動，不全屏的問題
左邊視訊代替了動畫，然後支援背景蒙板效果，能夠透出底圖
右邊是原視訊檔案
H5 audio音訊
- 每次通過 new Audio 一個音訊物件，在IOS上可以看到會產生一個新的執行緒，這個很噁心
解決方案：
new Audio一個物件，通過替換不同的音訊地址，達到不多開執行緒的目的
- 在安卓上支援不給力
解決方案：
低版本安卓上的問題沒解，一般是混合開發都是可以調底層介面處理的，比如 phonegap
- iphone上不能自動播放
解決方案：
iphone上自動播放，是IOS設計的的時候做的一個處理，貌似是為了防止自動盜用流量吧
簡單來說，需要模擬使用者手動去觸發才可以
所以我們需要在最開始呼叫這樣一段程式碼：
這是我專案上的，我就直接扣過來了
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
//修復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物件，然後儲存在全域性中
在使用的時候如下
|
1 2 3 4 5 6 7 8 9 10 11 |
//如果為ios browser 用Xut.fix.audio 指定src 初始化見app.js if (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幀的全螢幕播放，也能輕易地實
現。
方案定下來，需要解決的幾個問題就來了
- 整個視訊，包括視訊中的某些物體，能夠響應使用者的點選、滑動之類的操作
- 在iPhone下面，可以在一個視窗中播放
- 能夠過濾掉背景，從而能像PNG影像一樣運用
最後的實際效果也是開始gif動畫所示：
視訊代替了動畫，然後支援背景蒙板效果，能夠透出底圖
同時也解決了，手動，自動，不全屏的問題
iphone視窗化
解決方案：
通過canvas + video標籤結合處理
原理： 獲取video的原圖幀，通過canavs繪製到頁面
這裡我直接附上原始碼把，程式碼寫的一般，但是突出了幾個重點
http://iwearshorts.com/blog/inline-video-on-the-iphone/
http://stackoverflow.com/questions/3699552/html5-inline-video-on-iphone-vs-ipad-browser