bl双性强迫侵犯h_国产在线观看人成激情视频_蜜芽188_被诱拐的少孩全彩啪啪漫画

為什么要使用video.js

這篇文章主要介紹為什么要使用video.js，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

站在用戶的角度思考問(wèn)題，與客戶深入溝通，找到三門(mén)網(wǎng)站設(shè)計(jì)與三門(mén)網(wǎng)站推廣的解決方案，憑借多年的經(jīng)驗(yàn)，讓設(shè)計(jì)與互聯(lián)網(wǎng)技術(shù)結(jié)合，創(chuàng)造個(gè)性化、用戶體驗(yàn)好的作品，建站類型包括：成都做網(wǎng)站、成都網(wǎng)站建設(shè)、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣、空間域名、網(wǎng)站空間、企業(yè)郵箱。業(yè)務(wù)覆蓋三門(mén)地區(qū)。

為什么要使用video.js？

1. PC端瀏覽器并不支持video直接播放m3u8格式的視頻

2. 手機(jī)端各式各樣的瀏覽器定制的video界面風(fēng)格不統(tǒng)一，直接寫(xiě)原生的js控制視頻兼容性較差

3. video.js解決以上兩個(gè)問(wèn)題，還可以有各種視頻狀態(tài)接口暴露，優(yōu)化體驗(yàn)

核心代碼：

<!DOCTYPE html>
<html>
<head>
    <title>videojs支持hls直播實(shí)例</title>
    <link href="./video.css?v=bcd2ce1385" rel="stylesheet">
</head>
<body>

    <video id="roomVideo" class="video-js vjs-default-skin vjs-big-play-centered" x-webkit-airplay="allow" poster="" webkit-playsinline playsinline x5-video-player-type="h6" x5-video-player-fullscreen="true" preload="auto">
        <source src="/chat/playlist.m3u8"  type="application/x-mpegURL">
    </video>

    <script src="./video.js?v=fc5104a2ab23"></script>
    <script src="./videojs-contrib-hls.js?v=c726b94b9923"></script>
    
    <script type="text/javascript">
        var myPlayer = videojs('roomVideo',{
            bigPlayButton : false,
            textTrackDisplay : false,
            posterImage: true,
            errorDisplay : false,
            controlBar : false
        },function(){
            console.log(this)
            this.on('loadedmetadata',function(){
                console.log('loadedmetadata');
                //加載到元數(shù)據(jù)后開(kāi)始播放視頻
                startVideo();
            })

            this.on('ended',function(){
                console.log('ended')
            })
            this.on('firstplay',function(){
                console.log('firstplay')
            })
            this.on('loadstart',function(){
            //開(kāi)始加載
                console.log('loadstart')
            })
            this.on('loadeddata',function(){
                console.log('loadeddata')
            })
            this.on('seeking',function(){
            //正在去拿視頻流的路上
                console.log('seeking')
            })
            this.on('seeked',function(){
            //已經(jīng)拿到視頻流,可以播放
                console.log('seeked')
            })
            this.on('waiting',function(){
                console.log('waiting')
            })
            this.on('pause',function(){
                console.log('pause')
            })
            this.on('play',function(){
                console.log('play')
            })

        });

        var isVideoBreak;
        function startVideo() {

            myPlayer.play();

            //微信內(nèi)全屏支持
            document.getElementById('roomVideo').style.width = window.screen.width + "px";
            document.getElementById('roomVideo').style.height = window.screen.height + "px";


            //判斷開(kāi)始播放視頻，移除高斯模糊等待層
            var isVideoPlaying = setInterval(function(){
                var currentTime = myPlayer.currentTime();
                if(currentTime > 0){
                    $('.vjs-poster').remove();
                    clearInterval(isVideoPlaying);
                }
            },200)

            //判斷視頻是否卡住，卡主3s重新load視頻
            var lastTime = -1,
                tryTimes = 0;
            
            clearInterval(isVideoBreak);
            isVideoBreak = setInterval(function(){
                var currentTime = myPlayer.currentTime();
                console.log('currentTime'+currentTime+'lastTime'+lastTime);

                if(currentTime == lastTime){
                    //此時(shí)視頻已卡主3s
                    //設(shè)置當(dāng)前播放時(shí)間為超時(shí)時(shí)間，此時(shí)videojs會(huì)在play()后把currentTime設(shè)置為0
                    myPlayer.currentTime(currentTime+10000);
                    myPlayer.play();

                    //嘗試5次播放后，如仍未播放成功提示刷新
                    if(++tryTimes > 5){
                        alert('您的網(wǎng)速有點(diǎn)慢，刷新下試試');
                        tryTimes = 0;
                    }
                }else{
                    lastTime = currentTime;
                    tryTimes = 0;
                }
            },3000)

        }
    </script>

</body>
</html>

附：

一.　　視頻狀態(tài)分析：

EVENTS
durationchange
ended
firstplay
fullscreenchange
loadedalldata
loadeddata
loadedmetadata
loadstart
pause
play
progress
seeked
seeking
timeupdate
volumechange
waiting
resize inherited

currentTime()可以用來(lái)發(fā)輔助判斷視頻播放情況

為什么要使用video.js

二.　　視頻加載優(yōu)化：

通過(guò)不初始化video無(wú)用組件的方式，提高video加載速度

var myPlayer = videojs('roomVideo',{
            bigPlayButton : false,
            textTrackDisplay : false,
            posterImage: true,
            errorDisplay : false,
            controlBar : false
        },function(){});

未簡(jiǎn)化之前：

為什么要使用video.js

簡(jiǎn)化后：

為什么要使用video.js

三.　　你可能也會(huì)遇到的錯(cuò)誤error

錯(cuò)誤1：

{code: 4, message: "No compatible source was found for this media."}

為什么要使用video.js

解決：去掉video標(biāo)簽的data-setup="{}"， 只保留js的初始配置

錯(cuò)誤2：

video.js Uncaught TypeError: Cannot read property 'one' of undefined

為什么要使用video.js

解決：

正確

var myPlayer = videojs('roomVideo',{
        bigPlayButton : false,
        textTrackDisplay : false,
        posterImage: false,
        errorDisplay : false,
        controlBar : {
            captionsButton : false,
            chaptersButton: false,
            subtitlesButton:false,
            liveDisplay:false,
            playbackRateMenuButton:false
        }
    },function(){
        console.log(this)
    });

錯(cuò)誤

var myPlayer = videojs('roomVideo',{
        children : {
            bigPlayButton : false,
            textTrackDisplay : false,
            posterImage: false,
            errorDisplay : false,
            controlBar : {
                captionsButton : false,
                chaptersButton: false,
                subtitlesButton:false,
                liveDisplay:false,
                playbackRateMenuButton:false
            }
        }
    },function(){
        console.log(this)
    });

以上是“為什么要使用video.js”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對(duì)大家有幫助，更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

分享名稱：為什么要使用video.js
轉(zhuǎn)載注明：http://vcdvsql.cn/article2/jhgooc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供電子商務(wù)、Google、網(wǎng)站收錄、網(wǎng)站內(nèi)鏈、品牌網(wǎng)站建設(shè)、企業(yè)建站

廣告

聲明：本網(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í)需注明來(lái)源： 創(chuàng)新互聯(lián)

搜索引擎優(yōu)化