first commit

历届学生/逯帅帅/项目开发/上课项目/my-project/src/components/Video.vue

@@ -0,0 +1,78 @@
+<template lang="pug">
+  video-player.video-player-box(ref='videoPlayer', :options='playerOptions',
+    :playsinline='true' v-show="show")
+</template>
+
+<script>
+export default {
+  name: 'Video',
+  props: {
+    show: {
+      type: Boolean,
+      default: true
+    },
+    videoUrl: {
+      type: Array,
+      default: () => [{
+        type: 'audio/x-mpegurl',
+        src: 'https://vse-as-all44.secdn.net/logos-channel/live/biblescreen-ad-free/chunklist_sess390797962.m3u8'
+      }]
+    }
+  },
+  data () {
+    return {
+      playerOptions: {
+        // videojs options
+        language: 'zh-CN',
+        aspectRatio: '16:9',
+        autoplay: false,
+        muted: false,
+        loop: false,
+        preload: 'none',
+        playbackRates: [0.7, 1.0, 1.5, 2.0, 3.0],
+        sources: this.videoUrl,
+        controlBar: {
+          // 当前时间和总时间的 分隔符
+          timeDivider: true,
+          //当前播放时间
+          currentTimeDisplay: true,
+          // 总时间
+          durationDisplay: true,
+
+          /**
+           * 区分 currentTimeDisplay,timeDivider,durationDisplay
+           * remainingTimeDisplay显示默认样式，只显示当前播放时间，一般
+           * 为false
+           */
+          remainingTimeDisplay: false,
+          fullscreenToggle: true
+        }
+      }
+    }
+  },
+  created () {},
+  mounted () {},
+  methods: {
+    play() {
+      this.$refs.videoPlayer.player.play()
+    },
+    stop() {
+      this.$refs.videoPlayer.player.pause()
+    }
+  }
+}
+</script>
+
+<style lang='less' scoped>
+/deep/.video-js.vjs-fluid,
+.video-js.vjs-16-9,
+.video-js.vjs-4-3 {
+  margin-top: 1.33rem;
+}
+
+/deep/.video-js .vjs-big-play-button {
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+</style>