Vue使用 video-player 播放 M3U8 视频流

安装插件

npm install vue-video-player -S

npm install 'video.js' -S

使用

首先引入

  // require styles
  import 'video.js/dist/video-js.css'
  import 'vue-video-player/src/custom-theme.css'
  //引入hls.js
  import 'videojs-contrib-hls'
  // video-player
  import { videoPlayer } from 'vue-video-player'

然后在data创建一个对象对播放器进行设置

		playerOptions: {
          language: 'zh-CN',  // 语言
          playbackRates: [0.5, 1.0, 1.5, 2.0],  // 可选的播放速度
          sources: [{
            type: "application/x-mpegURL",   // 类型
            withCredentials: false,
            src: 'http://cctvalih5ca.v.myalicdn.com/live/cctv1_2/index.m3u8' // 中央1 M3U8连接
          }],
          techOrder: ['html5'],
          flash: { hls: { withCredentials: false } },
          html5: { hls: { withCredentials: false } },
          autoplay: true,  // 是否自动播放
          controls: true,  // 是否显示控制栏
          notSupportedMessage: '无信号',
          muted: true, // 是否静音
        }

然后HTML创建一个播放器。

<video-player ref="videoPlayer" style="width: 100%;height: 100%;" class="vjs-custom-skin" :options="playerOptions"></video-player>

然后页面就可以正常显示视频了！

这里有一篇更详细的介绍博文：https://www.jianshu.com/p/9f9e996768ba

然后给大家几个测试的 m3u8 连接： M3U8测试连接

我自己在项目里面测试过，是没有问题的，都是经过当时验证的。

好了，希望可以有用。