video.js支持m3u8格式直播的实现示例

网页制作 2024/12/29 佚名

3 1 2

为什么要使用video.js？

1. PC端浏览器并不支持video直接播放m3u8格式的视频

2. 手机端各式各样的浏览器定制的video界面风格不统一，直接写原生的js控制视频兼容性较差

3. video.js解决以上两个问题，还可以有各种视频状态接口暴露，优化体验

核心代码：

<!DOCTYPE html>
<html>
<head>
    <title>videojs支持hls直播实例</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="h5" 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');
                //加载到元数据后开始播放视频
                startVideo();
            })

            this.on('ended',function(){
                console.log('ended')
            })
            this.on('firstplay',function(){
                console.log('firstplay')
            })
            this.on('loadstart',function(){
            //开始加载
                console.log('loadstart')
            })
            this.on('loadeddata',function(){
                console.log('loadeddata')
            })
            this.on('seeking',function(){
            //正在去拿视频流的路上
                console.log('seeking')
            })
            this.on('seeked',function(){
            //已经拿到视频流,可以播放
                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();

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


            //判断开始播放视频，移除高斯模糊等待层
            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){
                    //此时视频已卡主3s
                    //设置当前播放时间为超时时间，此时videojs会在play()后把currentTime设置为0
                    myPlayer.currentTime(currentTime+10000);
                    myPlayer.play();

                    //尝试5次播放后，如仍未播放成功提示刷新
                    if(++tryTimes > 5){
                        alert('您的网速有点慢，刷新下试试');
                        tryTimes = 0;
                    }
                }else{
                    lastTime = currentTime;
                    tryTimes = 0;
                }
            },3000)

        }
    </script>

</body>
</html>

源码请移步github：

videojs支持hls直播实例

附：

一.　　视频状态分析：

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

currentTime()可以用来发辅助判断视频播放情况

二.　　视频加载优化：

通过不初始化video无用组件的方式，提高video加载速度

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

未简化之前：

简化后：

三.　　你可能也会遇到的错误error

错误1：

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

解决：去掉video标签的data-setup="{}"，只保留js的初始配置

错误2：

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

解决：

正确

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)
    });

错误

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,m3u8

风云阁资源网 Design By www.bgabc.com

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！

风云阁资源网 Design By www.bgabc.com

评论“video.js支持m3u8格式直播的实现示例”

暂无评论...

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。

艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。
《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒经典版》的玩家都可以获得奖励。

更新日志

2024年12月29日

video.js支持m3u8格式直播的实现示例

html5用video标签流式加载的实现

video实现有声音自动播放的实现方法

评论“video.js支持m3u8格式直播的实现示例”

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

更新日志

友情链接