您好,登錄后才能下訂單哦!
這篇文章主要介紹了怎么解決移動端HTML5音頻與視頻的問題的相關(guān)知識,內(nèi)容詳細(xì)易懂,操作簡單快捷,具有一定借鑒價值,相信大家閱讀完這篇怎么解決移動端HTML5音頻與視頻的問題文章都會有所收獲,下面我們一起來看看吧。
傳統(tǒng)的精靈動畫:
磁盤空間大,下載慢,尤其是在線播放,會更慢
文件太多,在線播放的時候,太多http請求,會導(dǎo)致響應(yīng)慢,或者行為失常
因此,急需開發(fā)了一套技術(shù),用視頻代替精靈動畫。我們稱這種視頻叫做交互視頻
傳統(tǒng)視頻的問題:
傳統(tǒng)視頻,只能在方塊形的區(qū)域中播放
傳統(tǒng)的視頻,在iPad下是窗口播放,在iPhone下面,只能全屏播放
傳統(tǒng)的視頻,播放的時候,一定會出現(xiàn)在最前端
交互視頻具有如下特點:
在iPhone下面,不需要全屏播放,可以在一個區(qū)域中播放
交互視頻可以出現(xiàn)在普通圖形對象的下面
交互視頻可以帶有蒙板,這樣可以去掉視頻的背景,讓視頻和普通圖形對象融為一體
總結(jié):單純播放用的視頻,我們就將其設(shè)置為傳統(tǒng)視頻。而需要用于特定用途的視頻,我們就將其設(shè)置為交互視頻。
其研究已經(jīng)初步有成果了,順便總結(jié)下幾年移動H5開發(fā)中音頻與視頻遇到的實際問題及給出自己的解決方案
看下最后實際效果:兼容PC(>IE9) ,iphone,ipad, 安卓5.0
解決了iphone上,手動、自動、窗口化等問題,基本能用于實際生產(chǎn)了
右邊是原視頻mp4文件
左邊視頻代替了動畫,然后支持背景蒙板效果,能夠透出底圖,支持一系列的交互操作
H5 audio音頻
每次通過 new Audio 一個音頻對象,在IOS上可以看到會產(chǎn)生一個新的線程,這個很惡心
解決方案:new Audio一個對象,通過替換不同的音頻地址,達(dá)到不多開線程的目的
在安卓上支持不給力
解決方案:低版本安卓上的問題沒解,一般是混合開發(fā)都是可以調(diào)底層接口處理的,比如 phonegap
iphone上不能自動播放
解決方案:iphone上自動播放,是IOS設(shè)計的的時候做的一個處理,貌似是為了防止自動盜用流量吧
簡單來說,需要模擬用戶手動去觸發(fā)才可以,所以我們需要在最開始調(diào)用這樣一段代碼:
這是我項目上的,我就直接扣過來了
//修復(fù)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音頻
視頻標(biāo)簽可能在移動端用的很少,安卓支持太爛了,目測5.0才好轉(zhuǎn)
iphone上老問題,不能自動播放(省流量啊,省你妹!!!),并且默認(rèn)就是全屏控件播放
很長一段時間里,我都沒理會這個視頻處理,安卓用底層,iphone直接用VideoJS,內(nèi)置flash與h6切換的,flash也有支持問題
前陣子老板有個需求,我們應(yīng)用動畫太多了,都是精靈路線的組合動畫,一個app下來上百M 到幾百M不等
所以急需有一個方案可以壓縮圖片
最后的方案是采用視頻代替動畫,因為視頻壓縮技術(shù)發(fā)展了很多年,已經(jīng)十分成熟了。現(xiàn)在視頻壓縮技術(shù),能夠很輕松地將720P的高清電影,壓縮到10M/分鐘,或者160K/秒。比圖像序列的文件尺寸,至少小了幾十倍。同時,在于大部分設(shè)備,都支持對視頻的硬件解壓縮,這樣呢,視頻播放的CPU消耗很低,電池消耗也很低,同時播放速度還快。即使25幀的全屏幕播放,也能輕易地實現(xiàn)。
方案定下來,需要解決的幾個問題就來了
1.整個視頻,包括視頻中的某些物體,能夠響應(yīng)用戶的點擊、滑動之類的操作
2.在iPhone下面,可以在一個窗口中播放
3.能夠過濾掉背景,從而能像PNG圖像一樣運用
最后的實際效果也是開始gif動畫所示:
視頻代替了動畫,然后支持背景蒙板效果,能夠透出底圖
同時也解決了,手動,自動,不全屏的問題
iphone窗口化
解決方案:
通過canvas + video標(biāo)簽結(jié)合處理
原理: 獲取video的原圖幀,通過canavs繪制到頁面
關(guān)于“怎么解決移動端HTML5音頻與視頻的問題”這篇文章的內(nèi)容就介紹到這里,感謝各位的閱讀!相信大家對“怎么解決移動端HTML5音頻與視頻的問題”知識都有一定的了解,大家如果還想學(xué)習(xí)更多知識,歡迎關(guān)注億速云行業(yè)資訊頻道。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。