vue2使用video-player实现展示hls监控直播

一.安装

npm i videojs-contrib-hls --save

npm i vue-video-player --save

npm i video.js --save

 二.全局注册

import "videojs-contrib-hls";
import VueVideoPlayer from "vue-video-player"; // 视频播放器
import "video.js/dist/video-js.css";

Vue.use(VueVideoPlayer);

三.组件vedio.vue

<template>
  <section class="HLSPlay-component">
    <video-player
      ref="videoPlayer"
      :options="playerOptions"
      :playsinline="true"
      class="video-player-box"
      customEventName="customstatechangedeventname"
      @canplay="onPlayerCanplay($event)"
      @canplaythrough="onPlayerCanplaythrough($event)"
      @ended="onPlayerEnded($event)"
      @loadeddata="onPlayerLoadeddata($event)"
      @pause="onPlayerPause($event)"
      @play="onPlayerPlay($event)"
      @playing="onPlayerPlaying($event)"
      @ready="playerReadied"
      @statechanged="playerStateChanged($event)"
      @timeupdate="onPlayerTimeupdate($event)"
      @waiting="onPlayerWaiting($event)"
    >
    </video-player>
  </section>
</template>
<script>
import videojs from "video.js";
import hls from "videojs-contrib-hls";
try {
  if (typeof hls === "object" && typeof hls.default === "function") {
    videojs.registerPlugin("hls", hls.default);
    console.log("HLS plugin registered successfully.");
  } else if (typeof hls === "function") {
    videojs.registerPlugin("hls", hls);
    console.log("HLS plugin registered successfully.");
  } else {
    console.error("videojs-contrib-hls did not export a valid plugin.");
  }
} catch (error) {
  console.error("Failed to register HLS plugin:", error);
}
import "video.js/dist/video-js.css";
import "videojs-contrib-hls";
import { videoPlayer } from "vue-video-player";
// import videoPlayer from '@videojs-player/vue'

export default {
  name: "HLSPlay",
  props: {
    src: {
      type: String,
    },
    cover_url: {
      type: String,
    },
  },
  components: {
    videoPlayer,
  },
  data() {
    return {
      playerOptions: {
        // videojs options
        autoplay: false, // 如果true,浏览器准备好时开始回放。
        muted: false, // 默认情况下将会消除任何音频。
        preload: "auto",
        language: "zh-CN",
        fluid: true,
        playbackRates: [0.7, 1.0, 1.5, 2.0],
        sources: [
          {
            type: "application/x-mpegURL",
            src: this.src,
          },
        ],
        poster: this.cover_url, // 你的封面地址
        notSupportedMessage: "此视频暂无法播放，请稍后再试",
        controlBar: {
          timeDivider: true,
          durationDisplay: true,
          remainingTimeDisplay: false,
          fullscreenToggle: true, // 全屏按钮
          currentTimeDisplay: true, // 当前时间
          volumeControl: false, // 声音控制键
          playToggle: true, // 暂停和播放键
          progressControl: true, // 进度条
        },
      },
    };
  },
  mounted() {
    console.log("this is current player instance object", this.player);
  },
  computed: {
    player() {
      return this.$refs.videoPlayer.player;
    },
  },
  methods: {
    setSrc(src) {
      // 重新设置播放地址
      this.playerOptions["sources"][0]["src"] = src;
      setTimeout(() => {
        this.$refs.videoPlayer.player.src(this.playerOptions.sources[0]);
        // this.$refs.videoPlayer.player.play(); // 播放
      }, 1000);
      this.$emit("set-src", src);
    },
    play() {
      // 手动触发播放
      this.$refs.videoPlayer.player.play(); // 播放
      this.$emit("play");
    },
    // listen event
    onPlayerPlay(player) {
      console.log("player play!", player);
    },
    onPlayerPause(player) {
      console.log("player pause!", player);
    },
    onPlayerEnded(player) {
      console.log("player onPlayerEnded!", player);
    },
    onPlayerWaiting(player) {
      console.log("player onPlayerWaiting!", player);
    },
    onPlayerPlaying(player) {
      console.log("player onPlayerPlaying!", player);
    },
    onPlayerLoadeddata(player) {
      console.log("player onPlayerLoadeddata!", player);
    },
    onPlayerTimeupdate(player) {
      console.log("player onPlayerTimeupdate!", player);
    },
    onPlayerCanplay(player) {
      console.log("player onPlayerCanplay!", player);
    },
    onPlayerCanplaythrough(player) {
      console.log("player onPlayerCanplaythrough!", player);
    },
    // ...player event

    // or listen state event
    playerStateChanged(playerCurrentState) {
      console.log("player current update state", playerCurrentState);
    },

    // player is ready
    playerReadied(player) {
      console.log("the player is readied", player);
      this.$refs.videoPlayer.player.src(this.playerOptions.sources[0]);
      this.$refs.videoPlayer.player.play();
    },
  },
};
</script>
<style lang="less" scoped>
/deep/ .video-player {
  // 设置 fluid: true，宽高自适应
  // 默认  1024 * 576
  // .vjs_video_3-dimensions {
  //   width: 1024px;
  //   height: 576px;
  // }

  // 初始化，暂停按钮居中
  .vjs-big-play-button {
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }
}
</style>

 四.引用

<vue-video-player
              ref="videoPlayer"
              cover_url="https://axure-file.lanhuapp.com/md5__0fba30958a231f0c3ec8006822bc074f.png"
              :src="videoList[0]?.cameraLink"
/>

五.切换链接

切换链接在这里不能直接去修改src，得使用

 this.$refs.videoPlayer.setSrc('要修改的地址');

六.问题 

 有可能会出现跨域的问题，因为该项目有大量的监控设备使用，采用了后端返回路径部分

我使用

window.location.origin

 来获取协议+域名+端口号部分，进而去拼接地址。

这样可以避免后续部署需要修改地址问题。

七.检验监控链接

VLC工具下载地址：官方 VLC 媒體播放器下載，最好的開放原始碼播放器 - VideoLAN