乐趣区

关于视频播放器:H5播放Rtmp之vuevideoplayer播放播放

jiezi

一、简介

咱们看到了 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 技术快餐
电子邮箱：lixx2048@163.com

退出移动版