Vue+Video.js rtmp/flv直播流媒体配置

rtmp/flv直播配置

必须引入flash 

//npm install videojs-flash

//import videojs-flash

playVideo() {
var videoPlayer = videojs(
"my-player",
{
sources: [
{
src: "rtmp://www.91cb.site:8510/live/product1621",
type: "rtmp/flv"
}
],
muted: true,
controls: true,
autoplay: true,
loop: true,
techOrder: ["html5", "flash"],
width: "1200",
height: "640"
},
function() {
this.play();
}
);
},
}

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() 销毁视频实例

更多事件以及

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

   默认是询问,需要改成

   允许

转载于:https://www.cnblogs.com/65Seeker/p/11244428.html

• 点赞
• 收藏
• 分享
• 文章举报