H5開發(fā)視頻遇到的問題怎么解決？相信很多沒有經(jīng)驗(yàn)的人對(duì)此束手無策，為此本文總結(jié)了問題出現(xiàn)的原因和解決方法，通過這篇文章希望你能解決這個(gè)問題。

成都創(chuàng)新互聯(lián)專注于曹縣企業(yè)網(wǎng)站建設(shè),成都響應(yīng)式網(wǎng)站建設(shè)公司,商城網(wǎng)站制作。曹縣網(wǎng)站建設(shè)公司,為曹縣等地區(qū)提供建站服務(wù)。全流程按需制作網(wǎng)站，專業(yè)設(shè)計(jì)，全程項(xiàng)目跟蹤，成都創(chuàng)新互聯(lián)專業(yè)和態(tài)度為您提供的服務(wù)

最近做了一些嵌入視頻的活動(dòng)，積累了點(diǎn)視頻方面的經(jīng)驗(yàn)，下面記錄下別人和自己踩過的坑以及相應(yīng)的解決方案。
1、碰到問題和解決方案
1.1、ios 網(wǎng)頁中播放視頻默認(rèn)全屏（點(diǎn)擊視頻會(huì)彈出播放器進(jìn)行全屏播放）。
解決不全屏播放可以添加下列屬性webkit-playsinline='true' 和 playsinline='true' 如果設(shè)置上面屬性還沒有效果，那么可以再配合下面這個(gè)插件試試。 iphone-inline-video
備注：ios下在微博中打開網(wǎng)頁播放視頻會(huì)彈出播放器播放，設(shè)置playsinline屬性無效，還必須使用上面那個(gè)插件，親測(cè)有效。
1.2、andriod中video播放完后顯示推薦視頻
移動(dòng)端瀏覽器中的video元素是比較特別的，早期無論是在iOS還是Android的瀏覽器中，它都位于頁面的最頂層，無法被遮蓋。后來這個(gè)問題在iOS下得到了解決，但是Android的瀏覽器則問題依舊。X5是騰訊基于Webkit開發(fā)的渲染引擎，它提供了一種名叫「同層播放器」的特殊video元素以解決遮蓋問題。通過設(shè)置

x5-video-player-type="h6" 可以開啟同層播放器，來避免播放后顯示推薦視頻的問題。
x5-video-player-fullscreen="true" //視頻全屏播放
x5-video-orientation="portrait"//視頻豎屏模式播放

1.3、視頻的適配
目前設(shè)計(jì)師一般是按照iphone5或者iphone7的標(biāo)準(zhǔn)去設(shè)計(jì)視頻，一般可以通過寬高100%來播放視頻，如果發(fā)現(xiàn)視頻還是不行那么就需要根據(jù)實(shí)際情況設(shè)置 object-fit屬性來解決了。 詳見半深入理解CSS3 object-position/object-fit屬性
備注：在webkit內(nèi)核瀏覽器下，默認(rèn)是object-fit:contain。
1.4、js控制視頻的播放
在ios中視頻和音頻一般都不會(huì)主動(dòng)播放，除非用戶主動(dòng)去點(diǎn)擊，所以需要通過js來監(jiān)聽界面的交互來控制視頻的播放。
視頻的播放和暫停主要是調(diào)用play和pause方法。 而視頻播放過程中如果需要一些用戶的交互主要是通過timeupdate方法來監(jiān)聽當(dāng)前的播放時(shí)間，看一段代碼：

var isStop = false;
    videoElem.on('timeupdate', function () {
        var curTime = parseInt(videoElem[0].currentTime);
        if (curTime == 152) {//該時(shí)間點(diǎn)展示交互蒙層
            $('.js_first_stop').removeClass('hide');
        } else if (curTime > 152 && curTime == 153) {
            if (!isStop) {//解決ios暫停后再次點(diǎn)擊播放不了問題，因?yàn)樵撎幱|發(fā)了多次，但是andriod沒有該問題。
                isStop = true;
                videoElem[0].pause();
            }
        } else if (curTime == 248) {
            $('.js_second_stop').removeClass('hide');
        }
    });

在ios中監(jiān)聽timeupdate事件并暫停的視頻的時(shí)候需要引入一個(gè)全局的isStop變量，不然下次點(diǎn)擊繼續(xù)播放的時(shí)候沒反應(yīng)（timeupdate的時(shí)候觸發(fā)了多次暫停），但是andriod是沒有這個(gè)問題的。 判斷視頻結(jié)束可以監(jiān)聽視頻的ended事件

videoElem.on('ended',function(){});

或者監(jiān)聽視頻的timeupdate事件，然后判斷ended屬性，如果為true則表示結(jié)束，false表示未結(jié)束。

videoElem.on('timeupdate',function(){
   if(videoElem[0].ended){
    //播放結(jié)束
   }
}

另外在andriod端開啟了同層播放器，微信端也提供了2個(gè)監(jiān)聽進(jìn)入同層播放器和退出同層播放器的事件。 進(jìn)入同層播放器事件（開始播放視頻）。

videoElem.on("x5videoenterfullscreen", function(){}

點(diǎn)擊左上角返回鍵退出同層播放器。

videoElem.on('x5videoexitfullscreen',function(){}

最后需要注意的是在andriod端播放視頻后是不會(huì)主動(dòng)退出同層播放器的。后續(xù)如果有展示的界面，也會(huì)在播放器中展示，感覺很怪異。這里可以通過鏈接跳轉(zhuǎn)來解決。
1.5、canvas播放視頻
canvas可以播放視頻，但是在某些andriod機(jī)上會(huì)看到有很嚴(yán)重的鋸齒，并且有些andriod瀏覽器播放的時(shí)候只有聲音而沒有圖像。
1.6、視頻編碼
mp4格式的視頻要h.264編碼方式，不然某些ios只有聲音而沒有圖像。
最后，一個(gè)完整的video配置的如下，僅供參考

<video class="js_video" style="object-fit: cover; width: 100%; height: 100%;" preload="load" 
playsinline="true" webkit-playsinline="true" x5-video-player-type="h6" x5-video-player-fullscreen="true"
 x5-video-orientation="portrait"src="https://video.mdcdn.cn/friend2018.mp4"></video>

看完上述內(nèi)容，你們掌握H5開發(fā)視頻遇到的問題怎么解決的方法了嗎？如果還想學(xué)到更多技能或想了解更多相關(guān)內(nèi)容，歡迎關(guān)注創(chuàng)新互聯(lián)成都網(wǎng)站設(shè)計(jì)公司行業(yè)資訊頻道，感謝各位的閱讀！

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國(guó)服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡(jiǎn)單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢(shì)，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場(chǎng)景需求。

分享標(biāo)題：H5開發(fā)視頻遇到的問題怎么解決-創(chuàng)新互聯(lián)
本文來源：http://jinyejixie.com/article12/jejgc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供搜索引擎優(yōu)化、動(dòng)態(tài)網(wǎng)站、網(wǎng)站設(shè)計(jì)、網(wǎng)站內(nèi)鏈、網(wǎng)站排名、商城網(wǎng)站

廣告

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