vue-core-video-player 非常不错的一个视频播放插件

安装

 npm install @core-player/playcore-hls --save

更多具体用法，可直接百度 vue-core-video-player

代码示例

<template>
  <div>
    <div class="player-container">
      <vue-core-video-player
        ref="VideoPlayer"
        :src="get_VIDEO_URL"
        :cover="poster"
        :muted="true"
        preload="metadata"
        :autoplay="false"
        :title="title"
      ></vue-core-video-player>
    </div>
  </div>
</template>

<script>
import HLSCore from "@core-player/playcore-hls";
export default {
  name: "Video",
  props: {
    title: { //视频标题
      type: String,
      default: "",
    },
    poster:{ //封面
      type:String,
      default:""
    }
  },
  data() {
    return {
      HLSCore,
    };
  },
  computed: {
    // 视屏的url
    get_VIDEO_URL() {
      return this.$store.state.videoMvState.videoSrc;
    },
  },
  watch: {
    get_VIDEO_URL(newVal, oldVal) {
      if (oldVal !== newVal) {
        this.$refs("VideoPlayer").reload();
      }
    },
  },
};
</script>

<style lang="scss" scoped></style>