vue2接实时视频流

首先需要安装两个插件

vue-dplayer 

hls.js

cnpm i vue-dplayer 

cnpm i hls.js

 写一个vPlayer.vue组件

<template>
  <div class="v_box">
    <div
      :id="'dplayer' + vID"
      ref="player"
      style="width: 100%; height: 100%"
      class="dplayer video-box"
    ></div>
  </div>
</template>
<script>
import Hls from "hls.js";
import VueDPlayer from "vue-dplayer";
import DPlayer from "dplayer";
import "vue-dplayer/dist/vue-dplayer.css";
export default {
  name: "YrHgyVPlayer",
  components: {
    "d-player": VueDPlayer,
  },
  props: {
    vID: {
      type: [String, Number],
    },
    vUrl: {
      type: String,
      default: "https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8",
    },
  },
  data() {
    return {
      dp: {},
    };
  },

  mounted() {
    this.initVideo(this.vUrl, this.vID);
  },

  methods: {
    initVideo(val, id) {
      let domId = "dplayer" + id;
      //   console.log("domId", domId);
      this.dp = new DPlayer({
        //播放器的一些参数
        container: document.getElementById(domId),
        video: {
          url: val, //视频地址
          type: "customHls",
          customType: {
            customHls: function (video, player) {
              const hls = new Hls(); //实例化Hls  用于解析m3u8
              hls.loadSource(video.src);
              hls.attachMedia(video);
            },
          },
        },
        autoplay: true, //是否自动播放
        theme: "#FADFA3", //主题色
        loop: false, //视频是否循环播放
        lang: "zh-cn",
        screenshot: false, //是否开启截图
        hotkey: false, //是否开启热键
        preload: "auto", //视频是否预加载
        volume: 0, //默认音量
        contextmenu: [],
        highlight: [],
        mutex: false, //阻止多个播放器同时播放，当前播放器播放时暂停其他播放器
      });
    },
  },
  watch: {
    vUrl: {
      handler(val) {
        this.initVideo(val, this.vID);
      },
      deep: true,
    },
  },
};
</script>
<style>
.dplayer-icons-left,
.dplayer-bar-wrap,
.dplayer-setting,
.dplayer-full-in-icon {
    display: none !important;
}

.video-box {
    width: 100%;
    height: 100%;
    max-width: 5rem;
    max-height: 5rem;
}
</style>
<style lang="less" scoped>
.v_box {
    width: 100%;
    height: 100%;
}
</style>

在页面中引用

import vPlayer from "@/components/vPlayer.vue";

 components: {
    vPlayer,
  },

<vPlayer :vID="1" :vUrl="https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8"></vPlayer>