H5播放Rtmp之vue-video-player

一、简介

我们看到了HLS播放视频实时性非常差，好的在6-7s，差点的就要10-12s了，也就是人走了，估计视频上还能看到，这对观感效果造成了很大的影响！但是好处就是它是基于http协议文件下载的，所以不需要任何插件，到处播放，处处兼容，所以rtmp和hls在web端的特点如下：

• HLS
  (1) 使用http协议，兼容所有浏览器。
  (2) 延时非常大，不太适合实时视频源，适合文件点播或历史录像直播。
• RTMP
  (1) 使用flash插件播放，不兼容所有浏览器(特别2020年12月后chrome带头不再支持flash)
  (2) 浏览器播放需要对浏览器安全进行设置，此外点播可能还会弹出确定提示，交互体验较差
  (3) 更贴近传统监控的实时协议，实时性非常好，基本与实时视频点播一致

考虑到实时性，我们可能还会选择使用rtmp协议点播我们的视频，所以就实时性而言还是很有必要考虑rtmp协议的使用，接下来，我要跟大家一起分享的就是在web端使用rtmp协议查看视频。

二、vue-video-player播放Rtmp

vue项目使用vue-video-player底层其实还是用的是videojs，只不过是vue的一个插件而已，首先我们需要在vue项目中安装该插件

npm install vue-video-player

然后，我们直接在HelloWorld组件中使用播放器即可

<template>
  <videoPlayer
    class="vjs-custom-skin videoPlayer"
    :options="playerOptions"
  ></videoPlayer>
</template>

<script>
import "@/video-js.css";
import { videoPlayer } from "vue-video-player";
import "videojs-flash";
export default {
  components: {
    videoPlayer,
  },
  data() {
    return {
      playerOptions: {
        height: "300",
        sources: [
          {
            type: "rtmp/mp4",
            src: "rtmp://192.168.12.187:1935/live/1",
          },
        ],
        techOrder: ["flash"],
        autoplay: false,
        controls: true,
      },
    };
  },
};
</script>

启用运行项目：

npm run serve

如果是chrome浏览器则需要允许插件访问：

允许播放后可以看到rtmp视频了

测试发现vue版本的插件有点延迟，大概在3s左右。

源码获取、合作、技术交流请获取如下联系方式：
QQ交流群：961179337

微信账号：lixiang6153
公众号：IT技术快餐
电子邮箱：[e-mail]