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


Posted in HTML / CSS onMay 20, 2020

为什么要使用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.js支持m3u8格式直播的实现示例

二.

视频加载优化:

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

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

未简化之前:

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

简化后:

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

三.

你可能也会遇到的错误error

错误1:

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

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

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

错误2:

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

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

解决:

正确

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格式直播的实现示例的文章就介绍到这了,更多相关video.js支持m3u8内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章,希望大家以后多多支持三水点靠木!

HTML / CSS 相关文章推荐
使用CSS3实现字体颜色渐变的实现
Mar 09 HTML / CSS
css3强大的动画效果animate使用说明及浏览器兼容介绍
Jan 09 HTML / CSS
详解使用HTML5的classList属性操作CSS类
Oct 13 HTML / CSS
html5组织文档结构_动力节点Java学院整理
Jul 11 HTML / CSS
通过Canvas及File API缩放并上传图片完整示例
Aug 08 HTML / CSS
html5教程制作简单画板代码分享
Dec 04 HTML / CSS
用html5实现语音搜索框的方法
Mar 18 HTML / CSS
使用phonegap进行提示操作的具体方法
Mar 30 HTML / CSS
canvas 下载二维码和图片加水印的方法
Mar 21 HTML / CSS
移动端Html5页面生成图片解决方案
Aug 07 HTML / CSS
MIME类型中application/xml与text/xml的区别介绍
Jan 18 HTML / CSS
CSS 鼠标点击拖拽效果的实现代码
Dec 24 HTML / CSS
video实现有声音自动播放的实现方法
May 20 #HTML / CSS
基于html5 canvas做批改作业的小插件
May 20 #HTML / CSS
video下autoplay属性无效的解决方法(添加muted属性)
May 19 #HTML / CSS
html2canvas生成的图片偏移不完整的解决方法
May 19 #HTML / CSS
html5简介及新增功能介绍
May 18 #HTML / CSS
Html5让容器充满屏幕高度或自适应剩余高度的布局实现
May 14 #HTML / CSS
Html5在手机端调用相机的方法实现
May 13 #HTML / CSS
You might like
example2.php
2006/10/09 PHP
php jquery 实现新闻标签分类与无刷新分页
2009/12/18 PHP
php输出xml格式字符串(用的这个)
2012/07/12 PHP
php mssql扩展SQL查询中文字段名解决方法
2012/10/15 PHP
PHP 获取文件路径(灵活应用__FILE__)
2013/02/15 PHP
PHP下通过QRCode类库创建中间带网站LOGO的二维码
2014/07/12 PHP
示例详解Laravel重置密码代码重构
2016/08/10 PHP
php基于curl主动推送最新内容给百度收录的方法
2016/10/14 PHP
PHP批斗大会之缺失的异常详解
2019/07/09 PHP
学习YUI.Ext 第六天--关于树TreePanel(Part 1)
2007/03/10 Javascript
JavaScript高级程序设计(第3版)学习笔记2 js基础语法
2012/10/11 Javascript
jquery如何判断某元素是否具备指定的样式
2013/11/05 Javascript
jquery调整表格行tr上下顺序实例讲解
2016/01/09 Javascript
jQuery模拟完美实现经典FLASH导航动画效果【附demo源码下载】
2016/11/09 Javascript
jQuery Easyui加载表格出错时在表格中间显示自定义的提示内容
2016/12/08 Javascript
bootstrap fileinput 插件使用项目总结(经验)
2017/02/22 Javascript
JavaScript面向对象继承原理与实现方法分析
2018/08/09 Javascript
js for终止循环 跳出多层循环
2018/10/04 Javascript
vue-for循环嵌套操作示例
2019/01/28 Javascript
利用js-cookie实现前端设置缓存数据定时失效
2019/06/18 Javascript
node crawler如何添加promise支持
2020/02/01 Javascript
jQuery实现飞机大战小游戏
2020/07/05 jQuery
[01:29]2017 DOTA2国际邀请赛官方英雄手办展示
2017/03/18 DOTA
[01:07:11]Secret vs Newbee 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/17 DOTA
python字符串替换示例
2014/04/24 Python
Python3实现爬取简书首页文章标题和文章链接的方法【测试可用】
2018/12/11 Python
如何在Anaconda中打开python自带idle
2020/09/21 Python
捷克厨房用品购物网站:Tescoma
2018/07/13 全球购物
巴西化妆品商店:Lojas Rede
2019/07/26 全球购物
日本化妆品植村秀俄罗斯官方网站:Shu Uemura俄罗斯
2020/02/01 全球购物
JPA的优势都有哪些
2013/07/04 面试题
夜班门卫岗位职责
2013/12/09 职场文书
大学生应聘导游自荐信
2014/06/02 职场文书
人身损害赔偿协议书范本
2014/09/27 职场文书
教育见习报告范文
2014/11/03 职场文书
实战Python爬虫爬取酷我音乐
2022/04/11 Python