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

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

因为前端页面如果是接入视频流的话，说难也难，说不难也不难。
如果单纯提供视频流url连接，没有中间件进行转的话：
rtsp 是不能直接接近web的，因为web不能直接接入rtsp视频流，需要后端或者是中间件进行转化，把rtsp的视频流转换成其他前端可以接入的视频流格式，一般是hls，也就是m3u8。
rtmp格式视频流以前是可以接入的，但是现在不行了，因为大多数浏览器在2020年底陆续宣布不在支持flash插件，但是rtmp视频流必须使用flash插件播放，因此在浏览器不支持flash的前提下，rtmp格式的视频流也就不能在web端播放了，很遗憾！
所以说，现在视频流播放一般都会采用M3U8格式的视频流进行播放，当然了，确定也就暴露出来了，那就是资源消耗的比较大，延时性比较高，毕竟是后端对其他视频流进行转换得到的，转换、传输、展示都需要时间，延时都会在10秒左右，如果单纯看的话没问题，控制的话就体验性差了，你控制了一下，十秒钟之后才能看到移动的角度，难受，但是没办法。
但是电脑软件接入rtsp或者是rtmp是没有问题的，这个东西是浏览器不在支持，与其他东西无关。
加油，祝你好运！

安装插件

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测试连接

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

好了，希望可以有用。