vue使用vue-video-player实现web视频直播展示m3u8格式-Toy模板网

这篇具有很好参考价值的文章主要介绍了vue使用vue-video-player实现web视频直播展示m3u8格式。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

最近有一个需求，就是web展示摄像头的实时画面，mentor让我先探索探索，所以我先测试一些小demo。
这里边个人想了一下啊，还是比较复杂的，包含推流和拉流等操作，还有延迟的问题要解决。
自己主要负责前端，所以先用vue-video-player播放了一下本地的视频，熟悉一下功能，然后进行流视频的测试。
下面是.m3u8直播流视频的展示代码步骤：

安装插件

npm install vue-video-player -S
npm install 'video.js' -S

安装的过程比较慢，如果等的时间比较长，可以先ctrl + C结束，设置镜像

npm config set registry https://registry.npm.taobao.org

然后再执行上边的安装指令。

引入插件

在要使用该视频播放的页面引入该插件

  // 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'

使用

在html部分

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

然后JS的data里对其进行配置

		playerOptions: {
          language: 'zh-CN',  // 语言
          playbackRates: [0.5, 1.0, 1.5, 2.0],  // 可选的播放速度
          sources: [{
            type: "application/x-mpegURL",   // 类型
            withCredentials: false,
            src: 'http://219.151.31.38/liveplay-kk.rtxapp.com/live/program/live/hnwshd/4000000/mnf.m3u8'	//自己对应视频流的url
          }],
          techOrder: ['html5'],
          flash: { hls: { withCredentials: false } },
          html5: { hls: { withCredentials: false } },
          autoplay: true,  // 是否自动播放
          controls: true,  // 是否显示控制栏
          notSupportedMessage: '无信号',
          muted: true, // 是否静音
        }

之后保存运行，就可以在页面中加载出直播了
vue使用vue-video-player实现web视频直播展示m3u8格式

注意上边代码的【自己对应视频流的url】这个改成自己的就可以了。

我是网上找的在线可以测试的m3u8流，我这会是可以的，时间是2022.08.12，之后不知道还能不能加载出视频。我找的时候，很多2020年或者2021年的，我现在测试已经放不出视频了。
这是我目前可以放出视频m3u8的网址

http://219.151.31.38/liveplay-kk.rtxapp.com/live/program/live/hnwshd/4000000/mnf.m3u8

在放视频前，可能真的不是自己代码的问题，而是测试的视频流根本就无法播放！！
下面放一个可以测试视频流是否可用的在线网址：
http://tool.liumingye.cn/m3u8/

如图，我现在用的测试流是可以的。和自己的web放的视频几乎是同步的。
vue使用vue-video-player实现web视频直播展示m3u8格式

以上就是.m3u8展示的过程。
下午和mentor交流的时候，他说m3u8格式大部分用于电视放映，而rtmp主要用于摄像头视频直播，所以还要再探索探索rtmp格式的播放。

分割线

了解了一下，rtmp流需要flash插件支持，而目前我搜到的已经实现的方法，大部分都是2020年和2021年基于flash插件实现的，我自己跑了一下代码，浏览器直接提示不支持此插件。
vue使用vue-video-player实现web视频直播展示m3u8格式
而rtsp流不能直接在浏览器中播放，有之前的办法将rtsp转为rtmp在页面播放，但是现在插件不能用，所以这个方法也不行。
最后看到的方法就是借助后端转码推流，比如RTSP转HLS、RTSP转FLV，转为这些格式在前端播放。文章来源地址https://www.toymoban.com/news/detail-421490.html