移動端HTML5音頻與視頻問題及解決方案

最近在研究用視頻代替動畫，用視頻代替精靈動畫，咱們稱這種視頻叫作交互視頻。

傳統的精靈動畫：

• 磁盤空間大，下載慢，尤爲是在線播放，會更慢
• 文件太多，在線播放的時候，太多http請求，會致使響應慢，或者行爲失常

所以，急需開發了一套技術，用視頻代替精靈動畫。咱們稱這種視頻叫作交互視頻

 

傳統視頻的問題：

• 傳統視頻，只能在方塊形的區域中播放
• 傳統的視頻，在iPad下是窗口播放，在iPhone下面，只能全屏播放
• 傳統的視頻，播放的時候，必定會出如今最前端

交互視頻具備以下特色：

• 在iPhone下面，不須要全屏播放，能夠在一個區域中播放
• 交互視頻能夠出如今普通圖形對象的下面
• 交互視頻能夠帶有蒙板，這樣能夠去掉視頻的背景，讓視頻和普通圖形對象融爲一體

 總結：單純播放用的視頻，咱們就將其設置爲傳統視頻。而須要用於特定用途的視頻，咱們就將其設置爲交互視頻。

 

其研究已經初步有成果了，順便總結下幾年移動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.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幀的全屏幕播放，也能輕易地實

現。

 

方案定下來，須要解決的幾個問題就來了

1. 整個視頻，包括視頻中的某些物體，可以響應用戶的點擊、滑動之類的操做
2. 在iPhone下面，能夠在一個窗口中播放
3. 可以過濾掉背景，從而能像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

 

視頻代替動畫

這個有點麻煩，須要作交互，拖動canvas達到控制圖像的目的，目前我尚未所有寫完，通常的公司需求也不會有這個

這裏簡單的描述下，一樣是canvas + video處理的，可是須要有一個緩存的canvas容器作一個預處理

經過預處理，拿到每一張圖的像素點，經過改變每個像素點RBG的值，達到可以過濾掉背景，

從而能像PNG圖像同樣運用，之後寫好了，在發佈吧~~