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