fix:项目初始化

src/components/VueDplayerHls/index.vue

@@ -0,0 +1,140 @@
+<template>
+  <div id="dplayer" ref="dplayer"></div>
+</template>
+
+<script>
+import DPlayer from 'dplayer'
+import Hls from 'hls.js';
+window.Hls = Hls;
+export default {
+  props: {
+    autoplay: {
+      type: Boolean,
+      default: false
+    },
+    theme: { // 主题色
+      type: String,
+      default: '#FADFA3'
+    },
+    loop: {
+      type: Boolean,
+      default: true
+    },
+    lang: {
+      type: String,
+      default: 'zh'
+    },
+    screenshot: { // 是否开启截图
+      type: Boolean,
+      default: false
+    },
+    hotkey: { // 是否开启热键
+      type: Boolean,
+      default: true
+    },
+    preload: {
+      type: String,
+      default: 'auto'
+    },
+    contextmenu: { // 自定义右键菜单
+      type: Array,
+      default: () => []
+    },
+    logo: {
+      type: String,
+      default: ''
+    },
+    video: {
+      type: Object, // 可选值：‘auto’,'hls','flv','dash','webtorrent','normal'
+      required: true,
+      validator(value) {
+        return typeof value.url === 'string'
+      }
+    },
+    option: {
+      type: Object,
+      require: false,
+      default() {
+        return {}
+      }
+    }
+  },
+  data() {
+    return {
+      dp: null
+    }
+  },
+  watch: {
+    video(val) {
+      if (this.dp) {
+        this.dp.switchVideo(val) // 切换到其他视频
+      }
+    }
+  },
+  beforeDestroy() {
+    if (this.dp) {
+      this.dp.destroy()
+    }
+  },
+  mounted() {
+    const player = (this.dp = new DPlayer({
+      ...{
+        container: this.$refs.dplayer,
+        autoplay: false,
+        theme: this.theme,
+        loop: this.loop,
+        lang: this.lang,
+        screenshot: this.screenshot,
+        hotkey: this.hotkey,
+        preload: this.preload,
+        contextmenu: this.contextmenu,
+        logo: this.logo,
+        video: {
+          url: this.video.url,
+          pic: this.video.pic,
+          type: this.video.type
+        }
+      },
+      ...this.option
+    }))
+    player.video.muted = true
+    player.on('play', () => {
+      this.$emit('play')
+    })
+    player.on('playing', () => {
+      this.$emit('playing')
+    })
+    player.on('pause', () => {
+      this.$emit('pause')
+    })
+    player.on('canplay', () => {
+      this.$emit('canplay')
+    })
+    player.on('ended', () => {
+      this.$emit('ended')
+    })
+    player.on('error', () => {
+      this.$emit('error')
+    })
+    player.on('loadeddata', () => {
+      this.$emit('loadeddata')
+      if (this.autoplay) {
+        player.play()
+        player.video.muted = false
+      }
+    })
+    player.on('loadedmetadata', () => {
+      this.$emit('loadedmetadata')
+    })
+    player.on('waiting', () => {
+      this.$emit('waiting')
+    })
+  }
+}
+</script>
+<style lang="scss" scoped>
+#dplayer {
+  width: 100%;
+  height: 100%;
+}
+</style>