如何在Vue3中使用视频库Video.js实现视频播放功能

npm install -g @vue/cli

vue create vue-videojs-demo

cd vue-videojs-demo

npm install video.js

yarn add video.js

<template>
  <div ref="videoContainer" class="video-container">
    <video ref="videoPlayer" class="video-js vjs-default-skin" controls preload="auto" :data-setup="{}">
      <!-- 可以在这里插入source标签以指定你的视频源 -->
      <source src="https://vjs.zencdn.net/v/oceans.mp4" type="video/mp4">
    </video>
  </div>
</template>

<script>
import videojs from 'video.js';
import 'video.js/dist/video-js.css';

export default {
  name: 'VideoPlayer',
  data() {
    return {
      player: null
    };
  },
  mounted() {
    this.player = videojs(this.$refs.videoPlayer, {
      autoplay: false,
      controls: true,
      sources: [{
        src: 'https://vjs.zencdn.net/v/oceans.mp4',
        type: 'video/mp4'
      }],
    });
  },
  beforeUnmount() {
    if (this.player) {
      this.player.dispose();
    }
  }
}
</script>

<style scoped>
.video-container {
  width: 100%;
  max-width: 640px;
  margin: 0 auto;
}
</style>

<template>
  <div id="app">
    <h1>Vue3 与 Video.js 视频播放器示例</h1>
    <VideoPlayer />
  </div>
</template>

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

export default {
  name: 'App',
  components: {
    VideoPlayer
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

npm install videojs-buttons

<template>
  <div ref="videoContainer" class="video-container">
    <video ref="videoPlayer" class="video-js vjs-default-skin" controls preload="auto" :data-setup="{}">
      <source src="https://vjs.zencdn.net/v/oceans.mp4" type="video/mp4">
    </video>
  </div>
</template>

<script>
import videojs from 'video.js';
import 'video.js/dist/video-js.css';
import 'videojs-buttons';  

export default {
  name: 'VideoPlayer',
  data() {
    return {
      player: null
    };
  },
  mounted() {
    this.player = videojs(this.$refs.videoPlayer, {
      autoplay: false,
      controls: true,
      sources: [{
        src: 'https://vjs.zencdn.net/v/oceans.mp4',
        type: 'video/mp4'
      }],
    });

    this.player.ready(() => {
      let Button = videojs.getComponent('Button');
      let myButton = videojs.extend(Button, {
        constructor: function() {
          Button.apply(this, arguments);
          this.addClass('vjs-icon-play');
        },
        handleClick: function() {
          window.alert('Hello World!');
        }
      });
      videojs.registerComponent('MyButton', myButton);
      this.player.getChild('controlBar').addChild('MyButton', {}, 0);
    });
  },
  beforeUnmount() {
    if (this.player) {
      this.player.dispose();
    }
  }
}
</script>

<style scoped>
.video-container {
  width: 100%;
  max-width: 640px;
  margin: 0 auto;
}
</style>