移動HTML5音頻和視頻問題和解決方案

最近，我們正在研究使用視頻而不是動畫以及使用視頻而不是精靈動畫。我們稱這種視頻為交互式視頻。

傳統的精靈動畫：較大的磁盤空間，下載緩慢（尤其是在線播放）會更慢
在線播放時文件太多，http請求太多，將導致響應緩慢或異常行為。因此，迫切需要開發一套技術來用視頻代替精靈動畫。我們稱這類視頻為互動視頻

傳統視頻的問題：

1.只能在方形區域播放
2.在iPad下，它是一個播放窗口，而在iPhone下，它只能全屏播放。
3.演奏時肯定會出現在最前列

交互式視頻具有以下特徵：

在iPhone下，不需要全屏播放，可以在一個區域播放
交互式視頻可以出現在普通圖形對像下方
交互式視頻可以具有蒙版，以便可以刪除視頻的背景，並且可以將視頻和普通圖形對象集成在一起

概要：對於用於播放的視頻，我們將其設置為傳統視頻。對於需要用於特定目的的視頻，我們將其設置為交互式視頻。研究取得了初步成果。順便總結了未來幾年移動H5音視頻發展中遇到的實際問題，並給出了自己的解決方案。看看最終的實際效果：兼容PC（>IE9）、iphone、ipad、Android 5.0

解決iPhone手動、自動、開窗問題，可基本用於實際生產。右邊是原視頻mp4文件，左邊的視頻替換了動畫，然後支持背景遮罩效果，可以顯示底圖，支持一系列交互操作

H5音訊

每次音頻對象通過新的音頻傳遞時，都可以在IOS上看到新的線程。
解決方案：通過替換不同的音頻地址，新的Audio對象達到了不打開更多線程的目的。

在Android上的支持不好
解決方案：較低版本的Android上的問題未解決。通常，可以通過調整底層界面（例如phonegap）來處理混合開發

無法在iPhone上自動播放
解決方案：在iPhone上自動播放是在設計IOS時完成的過程。看來是為了防止流量自動盜竊。

簡而言之，它需要通過模擬用戶來手動觸發，因此我們需要在一開始就調用這段代碼：

複製代碼
//修復ios瀏覽器無法自動播放音頻的問題。加載時創建新的音頻，並在使用時替換src。
Xut.fix = Xut.fix || {};
如果（Xut.plat.isBrowser && Xut.plat.isIOS）{
    var isAudio = false
    var fixaudio = function（）{
        如果（！isAudio）{
            isAudio =真；
            Xut.fix.audio =新的Audio（）;
            document.removeEventListener（'touchstart'，fixaudio，false）;
        }
    };
    document.addEventListener（'touchstart'，fixaudio，false）;
}
複製上面的代碼
如果將這樣的代碼綁定到主體，請執行以下操作：手動觸發音頻對象，然後將其保存在全局對像中

如下使用時：

複製代碼
//如果您使用Xut.fix.audio為ios瀏覽器指定src，請參考app.js進行初始化
如果（Xut.fix.audio）{
    音頻
=
Xut.fix.音頻；
    audio.src =網址;
} {
    音頻=新的音頻（URL）;
}
音頻。自動播放=真；
audio.play（）;

只需更換音頻對象。簡而言之，它必須是用戶觸發創建的對象才能播放。

H5視頻音頻

視頻標籤可能很少在移動終端上使用，Android支持太差，從視覺上看5.0更好。 iPhone上的舊問題無法自動播放（保存數據，請保存您的妹妹！！！），默認為全屏播放。很長一段時間，我都忽略了這種視頻處理。 Android使用最底層，iPhone直接使用VideoJS，內置閃光燈和h5開關，閃光燈也有支持問題。前一段時間，老闆有要求。我們應用了太多的動畫，所有這些動畫都是sprite路線的組合動畫，一個應用程序下的動畫範圍從數百兆字節到數百兆字節，因此迫切需要一種壓縮圖像的解決方案。最終的解決方案是使用視頻而不是動畫，因為視頻壓縮技術已經開發了很多年並且已經非常成熟。現在，視頻壓縮技術可以輕鬆轉換720P。高清電影，壓縮為10M / min或160K / sec。圖像序列的文件大小至少要小幾十倍。同時，大多數設備都支持視頻的硬件解壓縮，因此視頻播放的CPU消耗非常低，電池消耗也非常低，播放速度也很快。甚至可以輕鬆實現25幀的全屏播放。

該計劃已最終確定，這裡有幾個要解決的問題。

整個視頻（包括視頻中的某些對象）可以響應用戶在iPhone下的單擊，幻燈片和其他操作，可以在窗口中播放，可以濾除背景，並且可以像PNG圖像一樣使用。視頻替換動畫，然後支持背景遮罩效果，可以顯示基本圖像，還解決了手動，自動和屏幕不完整的問題

iPhone開窗

解決方案：通過畫布+視頻標籤合併處理

原理：獲取視頻的原始圖像幀並通過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容器來進行預處理。通過預處理，獲取每個圖片的像素，並通過更改每個像素RBG的值，可以濾除背景，因此可以像PNG圖像一樣使用它。我待會寫出來再發表吧~~