vue播放rtmp视频直播流方法

1,在你的文件夹下打开终端,下载

npm install vue-video-player -S 

2,在min.js文件夹里加入

/*video*/
 import VideoPlayer from 'vue-video-player';
 import 'video.js/dist/video-js.css';
 import 'videojs-flash';
 Vue.use(VideoPlayer)

3.在代码中写入

<videoPlayer class="vjs-custom-skin videoPlayer" :options="playerOptions" data-setup="{}" muted></videoPlayer>

4,script中

<script>
    import 'video.js/dist/video-js.css'
    import {videoPlayer} from 'vue-video-player'
    import 'videojs-flash'
  export default {
      components: {
          videoPlayer,
      },
    data() {
      return {
           /*视频*/
        playerOptions: {
        width:'420',
          height: '290',
          sources: [{
            type: "rtmp/flv",
            /*测试 rtmp://58.200.131.2:1935/livetv/hunantv*/
            src: "rtmp://58.200.131.2:1935/livetv/hunantv"
          }],
          techOrder: ['flash', 'html5'],// 兼容顺序
          flash:{
              hls: { withCredentials: false },
              swf:"../../static/js/video-js.swf"
          },
          autoplay: true,/*自动播放*/
          controls: true,/*进度条*/
        }
      }
    }
  }
</script>

5,我在开发的时候发现一直不能自动播放,设置了autoplay也不行,后来发现谷歌对html做了限制,播放窗口小于400*300不能自动播放,有两个解决办法1、窗口大于等于400*300,我刚我做的事九宫格,每个页面都小于,所以第二个方法2、跨源插件,就是video—js.swf文件,成功解决,我在解决的时候还发现有人说谷歌还做了下面的限制,(静音才能自动播放,我没遇到,也试了,没有静音也能播放.进度条隐藏不能自动播放,我也试了,没有影响。视频隐藏不能自动播放,没有试,估计只有恶意才会用到吧)放个swf链接吧https://download.csdn.net/download/wqnmlgbsz/12269385

 

 

当然也可以看看这个https://zhuanlan.zhihu.com/p/136959101

 

  • 1
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 6
    评论
评论 6
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值