标签：插件 Vue M3U8 视频流 hls player video 播放

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

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

好了，希望可以有用。

标签：插件,Vue,M3U8,视频流,hls,player,video,播放
来源： https://blog.csdn.net/weixin_42776111/article/details/122555943

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。