在vue.js中使用videojs播放rtmp视频流

由于项目需要,需要在对接海康或者大华等摄像头,并实时展示在网页上.采用的传输协议为`rtmp`,在框架选择上选择`Video.js@7.4.2`.下面记录一下`Video.js`的使用:  

1. 介绍
   Video.js是一款web视频播放器，支持html5和flash两种播放方式. 更有自定义皮肤，插件，组件，语言还有丰富的选项配置.
   本次使用videojs 播放rtmp直播视频流媒体.
2. 安装

        npm install video.js videojs-flash    
   

3. 使用

    <template>
        <video id="video" class="video-js vjs-default-skin   
        vjs-big-play-centered flex-grid"   
        style="width:100%;height:100%;object-fit: fill"  
        muted controls autoplay poster= './video.jpg' loop>
          抱歉, 你的浏览器不支持
        </video>
    </template>
    <script>
        import videojs from 'video.js'
        import 'video.js/dist/video-js.css'
        import 'videojs-flash'
   
        ...
        // 实例化  
        let options = {
                autoplay: true,
                preload: true,
                techOrder: ['flash', 'html5'],
                notSupportMessage: '此视频暂无法播放',
                fluid: true
            }
   
        this.player = videojs('#video', options, function(){
   
        })
    </script>
   

   videojs(el, options, cb): 接受三个参数: video标签id, 要实例化的videojs配置, 回调函数;
   常用的videojs配置选项:

• preload: 是否预加载
• muted : 实现静音播放, 有一些浏览器需要静音才能实现加载之后自动播放
• controls: 将显示视频控件, 如果不需要则去掉controls即可
• autoplay: 视频在加载完成之后自动播放
• poster: 视频封面图片
• loop: true/false, 是否循环播放
• notSupportMessage: 浏览器无法播放时的提示信息
• techOrder: 播放控件,默认是html5,这里需要播放rtmp所以首选项要是flash
• fluid: 流式布局,自适应父元素大小
  更多的配置可以看videojs-options

常用方法和事件

1. autoplay()获取或者设置自动播放属性
2. currentTime()设置或者获取当前播放进度
3. duration()获取视屏的总长度，一般要等到视屏对象完全加载后才能获取到，一般我们会使用定时轮询的方式来获取总时长
4. ended()获取当前视屏对象是否已经处于结束状态
5. enterFullWindow() 当全屏不支持我们可以视频容器延伸到浏览器将让我们一样宽。经过试验改api完全无法使视屏进入全屏。分析源码后发现真正进入全屏的api应该是requestFullscreen()，但可惜该api只能又手势触发函数执行，连模拟点击都没法触发他。
6. exitFullscreen() 退出全屏，有效的
7. exitFullWindow() 退出全屏，试了没什么用
8. height() 设置/获取播放器的高度
9. width() 设置/获取播放器的宽度
10. isFullscreen() 检查是否处于全屏模式
11. load() 开始加载视屏
12. loop() 在视频中获取或设置循环属性元素
13. muted() 获取当前的静音状态
14. pause() 暂停视频
15. paused() 检查视屏是否暂停
16. play() 播放视屏
17. played() 检查视屏播放状态
18. preload() 获取或设置预加载属性
19. ready() 视屏对象加载完成后调用ready中的回调函数
20. poster() 获取或设置海报图像源url
21. reset() 重载视屏
22. src() 更换视频源
23. dispose() 销毁视频实例

更多事件以及apivideojs-api

事件监听采用on('listener', cb),off('list')移除事件监听

	this.on('firstplay', e => {});  
	this.on('progress', e => {});  
	this.on('timeupdate', e => {}); 

• 视频开始加载时会触发firstplay
• 实例化之后会触发progress,有时候实例化之后无法与后台建立连接,可以在回调设置一个定时器,监听3s后的currentTime()判断是否建立连接
• 视频播放时会不断触发timeupdate事件,结合currentTime()可以检测是否播放中断

遇到的问题

1. videojs播放窗口小于400300时无法自动播放,因为video-js.swf文件跨域.播放rtmp视频时videojs会在cdn上加载一个video-js.swf文件,该文件必须同源才能支持播放窗口小于400300时自动播放

2. 使用dispose()销毁实例时会将页面上的dom节点一并移除,如果需要二次复用,则可以在初始实例化时先将节点保存起来

3. videojs提示 (CODE:4 MEDIA_ERR_SRC_NOT_SUPPORTED) No compatible source was found for this video.可能是没有开始浏览器flash支持,chrome默认是询问,需要改成允许