视频video.js使用

<template>
  <div id="app">
    <div class="header">
      <video ref="videoPlayer" class="video-js"></video>
      <button @click="start">开始</button>
      <button @click="end">结束</button>
      <button @click="change">切换</button>
      <button @click="destory">销毁</button>
    </div>
  </div>
</template>

<script>
export default {
  name: "App",
  components: {},
  data() {
    return {
      player: null,
    };
  },
  mounted() {
    let options = {
      autoplay: true,
      controls: true,
      sources: [
        {
          src: "https://jvod.300hu.com/vod/product/6c26f107-b845-4711-83c7-07ec7892ea4b/344aabdb728b4e1e9f3e823fc9204227.mp4",
        },
      ],
    };
    this.player = this.$video(this.$refs.videoPlayer, options, function () {
      this.on("play", () => {
        console.log("视频已经开始播放，祝你有好的体验");
      });
      this.on("pause", () => {
        console.log("视频已经暂停");
      });
    });
  },
  methods: {
    start() {
      console.log("开始");
      this.player.play();
    },
    end() {
      console.log("暂停");
      this.player.pause();
    },
    change() {
      console.log("切换");
      this.player.src(
        "https://jvod.300hu.com/vod/product/8756de0d-2603-49b4-acc5-a504da4b6cf9/4f0972ef8e674a19952227a67d7890bb.mp4"
      );
      this.player.play();
    },
    destory() {
      console.log("销毁");
      this.player.dispose();
    },
  },
};
</script>

<style>
* {
  margin: 0px;
  padding: 0px;
}
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}
.header {
  width: 100%;
  height: 30vh;
}
.video-js {
  width: 100%;
  height: 300px;
}
</style>

import Vue from "vue";
import App from "./App.vue";
import videojs from "video.js";
import "video.js/dist/video-js.css";
Vue.prototype.$video = videojs;

Vue.config.productionTip = false;
import "video.js/dist/video-js.min.css";

new Vue({
  render: (h) => h(App),
}).$mount("#app");