本篇文章為大家展示了移動(dòng)端HTML5音頻與視頻遇到哪些問(wèn)題，代碼簡(jiǎn)明扼要并且容易理解，絕對(duì)能使你眼前一亮，通過(guò)這篇文章的詳細(xì)介紹希望你能有所收獲。
創(chuàng)新互聯(lián)公司制作網(wǎng)站網(wǎng)頁(yè)找三站合一網(wǎng)站制作公司,專(zhuān)注于網(wǎng)頁(yè)設(shè)計(jì),成都做網(wǎng)站、網(wǎng)站建設(shè),網(wǎng)站設(shè)計(jì),企業(yè)網(wǎng)站搭建,網(wǎng)站開(kāi)發(fā),建網(wǎng)站業(yè)務(wù),680元做網(wǎng)站,已為上千家服務(wù),創(chuàng)新互聯(lián)公司網(wǎng)站建設(shè)將一如既往的為我們的客戶提供最優(yōu)質(zhì)的網(wǎng)站建設(shè)、網(wǎng)絡(luò)營(yíng)銷(xiāo)推廣服務(wù)!
傳統(tǒng)的精靈動(dòng)畫(huà)：
磁盤(pán)空間大，下載慢，尤其是在線播放，會(huì)更慢
文件太多，在線播放的時(shí)候，太多http請(qǐng)求，會(huì)導(dǎo)致響應(yīng)慢，或者行為失常
因此，急需開(kāi)發(fā)了一套技術(shù)，用視頻代替精靈動(dòng)畫(huà)。我們稱這種視頻叫做交互視頻
傳統(tǒng)視頻的問(wèn)題：
傳統(tǒng)視頻，只能在方塊形的區(qū)域中播放
傳統(tǒng)的視頻，在iPad下是窗口播放，在iPhone下面，只能全屏播放
傳統(tǒng)的視頻，播放的時(shí)候，一定會(huì)出現(xiàn)在最前端
交互視頻具有如下特點(diǎn)：
在iPhone下面，不需要全屏播放，可以在一個(gè)區(qū)域中播放
交互視頻可以出現(xiàn)在普通圖形對(duì)象的下面
交互視頻可以帶有蒙板，這樣可以去掉視頻的背景，讓視頻和普通圖形對(duì)象融為一體
總結(jié)：單純播放用的視頻，我們就將其設(shè)置為傳統(tǒng)視頻。而需要用于特定用途的視頻，我們就將其設(shè)置為交互視頻。
其研究已經(jīng)初步有成果了，順便總結(jié)下幾年移動(dòng)H5開(kāi)發(fā)中音頻與視頻遇到的實(shí)際問(wèn)題及給出自己的解決方案
看下最后實(shí)際效果：兼容PC（>IE9） ，iphone，ipad， 安卓5.0
解決了iphone上，手動(dòng)、自動(dòng)、窗口化等問(wèn)題，基本能用于實(shí)際生產(chǎn)了
右邊是原視頻mp4文件
左邊視頻代替了動(dòng)畫(huà)，然后支持背景蒙板效果，能夠透出底圖，支持一系列的交互操作
H5 audio音頻
每次通過(guò) new Audio 一個(gè)音頻對(duì)象，在IOS上可以看到會(huì)產(chǎn)生一個(gè)新的線程，這個(gè)很惡心
解決方案：new Audio一個(gè)對(duì)象，通過(guò)替換不同的音頻地址，達(dá)到不多開(kāi)線程的目的
在安卓上支持不給力
解決方案：低版本安卓上的問(wèn)題沒(méi)解，一般是混合開(kāi)發(fā)都是可以調(diào)底層接口處理的，比如 phonegap
iphone上不能自動(dòng)播放
解決方案：iphone上自動(dòng)播放，是IOS設(shè)計(jì)的的時(shí)候做的一個(gè)處理，貌似是為了防止自動(dòng)盜用流量吧
簡(jiǎn)單來(lái)說(shuō)，需要模擬用戶手動(dòng)去觸發(fā)才可以，所以我們需要在最開(kāi)始調(diào)用這樣一段代碼：
這是我項(xiàng)目上的，我就直接扣過(guò)來(lái)了
重慶分公司
重慶分公司
//修復(fù)ios 瀏覽器不能自動(dòng)播放音頻的問(wèn)題 在加載時(shí)創(chuàng)建新的audio 用的時(shí)候更換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上綁定這樣一個(gè)代碼：通過(guò)手動(dòng)觸發(fā)創(chuàng)建一個(gè)audio對(duì)象，然后保存在全局中
在使用的時(shí)候如下
//如果為ios browser 用Xut.fix.audio 指定src 初始化見(jiàn)app.js
if (Xut.fix.audio) {
audio
= Xut.fix.audio;
audio.src = url;
} else {
audio = new Audio(url);
}
audio.autoplay = true;
audio.play();直接替換音頻對(duì)象即可，簡(jiǎn)單來(lái)說(shuō)，就是要自動(dòng)就必須是用戶觸發(fā)創(chuàng)建的對(duì)象才能播
H5 video音頻
視頻標(biāo)簽可能在移動(dòng)端用的很少，安卓支持太爛了，目測(cè)5.0才好轉(zhuǎn)
iphone上老問(wèn)題，不能自動(dòng)播放（省流量啊，省你妹!!!），并且默認(rèn)就是全屏控件播放
很長(zhǎng)一段時(shí)間里，我都沒(méi)理會(huì)這個(gè)視頻處理，安卓用底層，iphone直接用VideoJS，內(nèi)置flash與h6切換的，flash也有支持問(wèn)題
前陣子老板有個(gè)需求，我們應(yīng)用動(dòng)畫(huà)太多了，都是精靈路線的組合動(dòng)畫(huà)，一個(gè)app下來(lái)上百M(fèi) 到幾百M(fèi)不等
所以急需有一個(gè)方案可以壓縮圖片
最后的方案是采用視頻代替動(dòng)畫(huà)，因?yàn)橐曨l壓縮技術(shù)發(fā)展了很多年，已經(jīng)十分成熟了?，F(xiàn)在視頻壓縮技術(shù)，能夠很輕松地將720P的高清電影，壓縮到10M/分鐘，或者160K/秒。比圖像序列的文件尺寸，至少小了幾十倍。同時(shí)，在于大部分設(shè)備，都支持對(duì)視頻的硬件解壓縮，這樣呢，視頻播放的CPU消耗很低，電池消耗也很低，同時(shí)播放速度還快。即使25幀的全屏幕播放，也能輕易地實(shí)現(xiàn)。
方案定下來(lái)，需要解決的幾個(gè)問(wèn)題就來(lái)了
1.整個(gè)視頻，包括視頻中的某些物體，能夠響應(yīng)用戶的點(diǎn)擊、滑動(dòng)之類(lèi)的操作
2.在iPhone下面，可以在一個(gè)窗口中播放
3.能夠過(guò)濾掉背景，從而能像PNG圖像一樣運(yùn)用
最后的實(shí)際效果也是開(kāi)始gif動(dòng)畫(huà)所示：
視頻代替了動(dòng)畫(huà)，然后支持背景蒙板效果，能夠透出底圖
同時(shí)也解決了，手動(dòng)，自動(dòng)，不全屏的問(wèn)題
iphone窗口化
解決方案：
通過(guò)canvas + video標(biāo)簽結(jié)合處理
原理： 獲取video的原圖幀，通過(guò)canavs繪制到頁(yè)面
這里我直接附上源碼把，代碼寫(xiě)的一般，但是突出了幾個(gè)重點(diǎn)
http://stackoverflow.com/questions/3699552/html5-inline-video-on-iphone-vs-ipad-browser
視頻代替動(dòng)畫(huà)
這個(gè)有點(diǎn)麻煩，需要做交互，拖動(dòng)canvas達(dá)到控制圖像的目的，目前我還沒(méi)有全部寫(xiě)完，一般的公司需求也不會(huì)有這個(gè)這里簡(jiǎn)單的描述下，同樣是canvas + video處理的，但是需要有一個(gè)緩存的canvas容器做一個(gè)預(yù)處理，通過(guò)預(yù)處理，拿到每一張圖的像素點(diǎn)，通過(guò)改變每一個(gè)像素點(diǎn)RBG的值，達(dá)到能夠過(guò)濾掉背景，從而能像PNG圖像一樣運(yùn)用，以后寫(xiě)好了，在發(fā)布吧~~
上述內(nèi)容就是移動(dòng)端HTML5音頻與視頻遇到哪些問(wèn)題，你們學(xué)到知識(shí)或技能了嗎？如果還想學(xué)到更多技能或者豐富自己的知識(shí)儲(chǔ)備，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。
