为什么要使用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格式直播的更多相关文章

  1. 流媒体测试笔记记录之————解决问题video.js 播放m3u8格式的文件,根据官方的文档添加videojs-contrib-hls也不行的原因解决了

    详细代码Github:https://github.com/Tinywan/PHPSharedLibrary/tree/master/Tpl/Html5/VideoJS 想播放hls协议的就是m3u8 ...

  2. 流媒体技术学习笔记之（四）解决问题video.js 播放m3u8格式的文件,根据官方的文档添加videojs-contrib-hls也不行的原因解决了

    源码地址:https://github.com/Tinywan/PHP_Experience 总结: 说明: 测试环境:本测试全部来自阿里云直播和OSS存储点播以及本地服务器直播和点播 播放器:Vid ...

  3. 使用video.js支持flv格式

    html5的video标签只支持mp4.webm.ogg三种格式,不支持flv格式,在使用video.js时,如果使用html5是会报错不支持. 修改了一下代码 js部分 videojs.option ...

  4. React 基于antd+video.js实现m3u8格式视频播放及实时切换

    文档连接地址(官网看起麻烦,看中文别人整理好的)https://blog.csdn.net/a0405221/article/details/80923090 React项目使用  安装依赖 npm ...

  5. html页面引用video.js播放m3u8格式视频

    //head里面的内容,我是采用cdn引用的方式,因为项目太小 <head> <meta charset="utf-8" /> <title>二 ...

  6. vue使用video.js解决m3u8视频播放格式

    今天被这个关于m3u8视频播放不了搞了一下午,这个项目所有的视频流都是m3u8格式的,后台给我们返回的都是m3u8格式的视频流,解决了好长时间,看了好多博客,只有这个博客给我点启发,去解决这个问题,请 ...

  7. 移动端播放直播流（video.js 播放 m3u8 流）

    流媒体服务器: wowza 流媒体格式: m3u8 播放端:移动端网页(Android.IOS) 播放工具: video.js 代码如下: <!DOCTYPE html> <html ...

  8. 七牛直播云-m3u8格式直播

    直播架构 业务服务器:负责协调直播类应用的业务逻辑 创建直播房间 返回直播房间播放地址列表 关闭直播房间 LiveNet 实时流网络:负责流媒体的分发.直播流的创建.查询等相关操作 采集端:负责采集和 ...

  9. 微信 vue中使用video.js播放m3u8视频，解决安卓自动全屏的问题。

    最近一个项目中需要在微信中播放m3u8格式的视频,刚开始用了 vue-video-player 这个插件,在IOS手机体验良好,本以为完事了, 结果安卓手机一点播放就自动全屏,心态略崩.查了资料说是安 ...

随机推荐

  1. 1）Java学习笔记：接口和抽象类的异同

    Java接口和抽象类很像,他们有哪些相同点和异同点呢,下面我们做一个小结 相同 ① 都不能被实例化,都位于继承树的顶端,用于被实现或者继承 ② 都可以包含抽象方法,实现接口或者继承抽象类的普通子类都必 ...

  2. sql语句：if exists语句使用

    ') begin print('exists ') end else begin print('no exists ') end go

  3. GOLang（第二篇 发起一个Http请求）

    import ( "net/http" "net/url" ) //发送一个简单的get请求 func GetRequest { //联系使用 make(map ...

  4. Linux内存布局

    在上一篇博文里,我们已经看到Linux如何有效地利用80x86的分段和分页硬件单元把逻辑地址转换为线性地址,在由线性地址转换到物理地址.那么我们的应用程序如何使用这些逻辑地址,整个内存的地址布局又是怎 ...

  5. PHP5中PDO的入门教程

    PDO(PHP Data Object) 是PHP 5新出来的东西,在PHP 5.5中,更是强烈推荐使用PDO来处理数据库,将把所有的数据库扩展移到了PECL,那么默认就是没有了我们喜爱的php_my ...

  6. 在delphi中，DLL加载时做初始化的Demo

    library DLLEntry;//dll源码 uses SysUtils, Classes, Dialogs, Windows; {$R *.res} procedure DLLEntryPoin ...

  7. 记一次DG搭建过程中ORA-09925: Unable to createaudit trail file 错误

    今天做Oracle DG  编写initorcl的时候,修改完以后,sqlplus就不能再登陆,一直报 ERROR: ORA-09925: Unable to createaudit trail fi ...

  8. HTML 5 简介、视频、Video + DOM、音频、拖放

    HTML5 是下一代的 HTML. 什么是 HTML5? HTML5 将成为 HTML.XHTML 以及 HTML DOM 的新标准. HTML 的上一个版本诞生于 1999 年.自从那以后,Web ...

  9. Android开发系列之Context

    相信大家对于Context应该非常熟悉,但是Context到底是什么意思呢?到底指的是什么东西呢?我们可以理解为当前对象在程序中所处的一个环境,一个与系统交互的过程.Android系统的上下文对象,即 ...

  10. 机器学习实战笔记(1)——k-近邻算法

    机器学习实战笔记(1) 1. 写在前面 近来感觉机器学习,深度学习神马的是越来越火了,从AlphaGo到Master,所谓的人工智能越来越NB,而我又是一个热爱新潮事物的人,于是也来凑个热闹学习学习. ...