在Vue组件中使用Video播放rtmp视频流

最近接手一个项目,里面需要实现播放实时监控视频的功能找了很久,发现用VideoJs可以实现播放rtmp视频流,于是便开始了踩坑之旅了

videoJs()接收三个参数, DOM元素的ID, videoJs的配置, 以及一个回调函数

然后便可以重新实例化videojs, 加载url播放视频

一、ios上无法自动播放（autoplay 是失效的）原因：

移动端为了避免浪费用户的流量，默认video是不能够自动播放的，即使加了autoplay属性，也只能实现在PC端自动播放，在移动端依旧不能自动播放。

二、网上探索解决办法：

方法1、网上好多帖子的解决办法是监听微信的WeixinJSBridgeReady

但是我用了后还是没就解决，还是没有自己播放。此方法行不通。

2、利用微信js解决。

首先需要引入

然后

最后，try it ! 竟然成功了，进入页面视频自动播放了，哦耶！此方法可行！

方法二：

引入微信jssdk，<script src=">

videojs有跨域限制跨域问题是浏览器对于ajax请求的一种安全限制。一个页面发起的ajax请求，只能是于当前页同域名的路径，这能有效的阻止跨站攻击。跨域问题是针对ajax的一种限制。

1播放器外层容器定义动态样式，播放器本身增加动画

2定义变量记录当前是否处于全模式

3切换全屏方法

4页面样式控制的相关计算属性

5部分css样式

以上就是关于在Vue组件中使用Video播放rtmp视频流全部的内容，包括:在Vue组件中使用Video播放rtmp视频流、H5 video在IOS微信上无法自动播放、为什么videojs有跨域限制等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！