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

 

Logo

前往低代码交流专区

更多推荐