如何解決移動端HTML5音頻與視頻的問題-創(chuàng)新互聯(lián)

小編給大家分享一下如何解決移動端HTML5音頻與視頻的問題，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

創(chuàng)新互聯(lián)公司作為成都網(wǎng)站建設公司，專注網(wǎng)站建設、網(wǎng)站設計，有關成都定制網(wǎng)站方案、改版、費用等問題，行業(yè)涉及成都辦公窗簾等多個領域，已為上千家企業(yè)服務，得到了客戶的尊重與認可。

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

傳統(tǒng)的精靈動畫：

  1. 磁盤空間大，下載慢，尤其是在線播放，會更慢

  2. 文件太多，在線播放的時候，太多http請求，會導致響應慢，或者行為失常

因此，急需開發(fā)了一套技術，用視頻代替精靈動畫。我們稱這種視頻叫做交互視頻

傳統(tǒng)視頻的問題：

  1. 傳統(tǒng)視頻，只能在方塊形的區(qū)域中播放

  2. 傳統(tǒng)的視頻，在iPad下是窗口播放，在iPhone下面，只能全屏播放

  3. 傳統(tǒng)的視頻，播放的時候，一定會出現(xiàn)在最前端

交互視頻具有如下特點：

  1. 在iPhone下面，不需要全屏播放，可以在一個區(qū)域中播放

  2. 交互視頻可以出現(xiàn)在普通圖形對象的下面

  3. 交互視頻可以帶有蒙板，這樣可以去掉視頻的背景，讓視頻和普通圖形對象融為一體

 總結：單純播放用的視頻，我們就將其設置為傳統(tǒng)視頻。而需要用于特定用途的視頻，我們就將其設置為交互視頻。

其研究已經(jīng)初步有成果了，順便總結下幾年移動H5開發(fā)中音頻與視頻遇到的實際問題及給出自己的解決方案

看下最后實際效果：兼容PC（>IE9） ，iphone，ipad， 安卓5.0

解決了iphone上，手動、自動、窗口化等問題，基本能用于實際生產(chǎn)了

右邊是原視頻mp4文件

左邊視頻代替了動畫，然后支持背景蒙板效果，能夠透出底圖，支持一系列的交互操作

如何解決移動端HTML5音頻與視頻的問題

H5 audio音頻

每次通過 new Audio 一個音頻對象，在IOS上可以看到會產(chǎn)生一個新的線程，這個很惡心

解決方案：new Audio一個對象，通過替換不同的音頻地址，達到不多開線程的目的

在安卓上支持不給力

解決方案：低版本安卓上的問題沒解，一般是混合開發(fā)都是可以調(diào)底層接口處理的，比如 phonegap

iphone上不能自動播放

解決方案：iphone上自動播放，是IOS設計的的時候做的一個處理，貌似是為了防止自動盜用流量吧

簡單來說，需要模擬用戶手動去觸發(fā)才可以，所以我們需要在最開始調(diào)用這樣一段代碼：

這是我項目上的，我就直接扣過來了

//修復ios 瀏覽器不能自動播放音頻的問題 在加載時創(chuàng)建新的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上綁定這樣一個代碼：通過手動觸發(fā)創(chuàng)建一個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();

直接替換音頻對象即可，簡單來說，就是要自動就必須是用戶觸發(fā)創(chuàng)建的對象才能播

H5 video音頻

視頻標簽可能在移動端用的很少，安卓支持太爛了，目測5.0才好轉

iphone上老問題，不能自動播放（省流量啊，省你妹!!!），并且默認就是全屏控件播放

很長一段時間里，我都沒理會這個視頻處理，安卓用底層，iphone直接用VideoJS，內(nèi)置flash與h6切換的，flash也有支持問題

前陣子老板有個需求，我們應用動畫太多了，都是精靈路線的組合動畫，一個app下來上百M 到幾百M不等

所以急需有一個方案可以壓縮圖片

最后的方案是采用視頻代替動畫，因為視頻壓縮技術發(fā)展了很多年，已經(jīng)十分成熟了?，F(xiàn)在視頻壓縮技術，能夠很輕松地將720P的高清電影，壓縮到10M/分鐘，或者160K/秒。比圖像序列的文件尺寸，至少小了幾十倍。同時，在于大部分設備，都支持對視頻的硬件解壓縮，這樣呢，視頻播放的CPU消耗很低，電池消耗也很低，同時播放速度還快。即使25幀的全屏幕播放，也能輕易地實現(xiàn)。

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

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圖像一樣運用，以后寫好了，在發(fā)布吧~~

以上是“如何解決移動端HTML5音頻與視頻的問題”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學習更多知識，歡迎關注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

本文名稱：如何解決移動端HTML5音頻與視頻的問題-創(chuàng)新互聯(lián)
網(wǎng)站地址：http://muchs.cn/article42/eeshc.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供企業(yè)建站、靜態(tài)網(wǎng)站、ChatGPT、服務器托管、電子商務、建站公司

廣告

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

成都網(wǎng)頁設計公司