• 在微信浏览器无法自动播放，在安卓和ios浏览器均可

安装

npm install video.js @videojs/http-streaming --save

页面

<template>
  <div>
    <video ref="playerContainer" style="width: 50%; height: 50%"></video>
  </div>
</template>

<script>
import "video.js/dist/video-js.css";
import videojs from "video.js";
import "@videojs/http-streaming/dist/videojs-http-streaming.min.js"; // 引入HLS插件

export default {
  data() {
    return {
      player: null,
      streamUrl: "http://192.168.2.16:8091/hls/mtw.m3u8",
    };
  },
  mounted() {
    this.initPlayer();
  },
  methods: {
    initPlayer() {
      const playerOptions = {
        autoplay: true, // 自动播放
        controls: false, // 显示控制条
        errorDisplay: false, // 隐藏错误提示
        muted: true, // 静音
        sources: [
          {
            src: "http://192.168.2.16:8091/hls/mtw.m3u8",
            type: "application/x-mpegURL",
          },
        ],
      };

      this.player = videojs(this.$refs.playerContainer, playerOptions, () => {
        console.log("Video.js player is ready");
      });
    },
  },
  beforeDestroy() {
    if (this.player) {
      this.player.dispose();
      this.player = null;
    }
  },
};
</script>