Video.js 指南

这些指南涵盖了 Video.js 用户的各种主题

Vue 和 Video.js

这是一个基本的 Vue 和 Video.js 播放器实现。此示例组件在 mounted 时实例化播放器，并在 beforeDestroy 时销毁播放器。

<template>
  <div>
    <video ref="videoPlayer" class="video-js"></video>
  </div>
</template>

<script>
import videojs from 'video.js';

export default {
  name: 'VideoPlayer',
  props: {
    options: {
      type: Object,
      default() {
        return {};
      }
    }
  },
  data() {
    return {
      player: null
    }
  },
  mounted() {
    this.player = videojs(this.$refs.videoPlayer, this.options, () => {
      this.player.log('onPlayerReady', this);
    });
  },
  beforeDestroy() {
    if (this.player) {
      this.player.dispose();
    }
  }
}
</script>

最后，像这样使用组件（参见 Video.js 选项参考）

<template>
  <div>
    <video-player :options="videoOptions" />
  </div>
</template>

<script>
import VideoPlayer from '@/components/VideoPlayer.vue';

export default {
  name: 'VideoExample',
  components: {
    VideoPlayer
  },
  data() {
    return {
      videoOptions: {
        autoplay: true,
        controls: true,
        sources: [
          {
            src:
              '/path/to/video.mp4',
              type: 'video/mp4'
          }
        ]
      }
    };
  }
};
</script>

别忘了包含 Video.js 的 CSS，它位于 video.js/dist/video-js.css！