Vue2项目中使用videojs播放本地mp4_video放本地的mp4

要在Vue2项目中使用videojs播放本地.mp4文件，需要在Vue组件中引入videojs并创建video标签。然后通过videojs将视频加载到video标签中。

以下是一个简单的Vue组件示例，可以在其中使用videojs播放本地.mp4文件。

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

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

export default {
  name: 'MyVideoPlayer',
  mounted() {
    // 创建video标签
    const videoEl = this.$refs.videoPlayer
    // 初始化video.js播放器
    this.player = videojs(videoEl, this.options, function onPlayerReady() {
      console.log('video.js 播放器已经准备好')
    })
    // 播放本地.mp4文件
    this.player.src({
      type: 'video/mp4',
      src: '/path/to/local/video.mp4'
    })
    // 自动播放
    this.player.play()
  },
  data() {
    return {
      options: {
        autoplay: false,
        controls: true,
        sources: []
      }
    }
  },
  beforeDestroy() {
    // 销毁video.js播放器
    if (this.player) {
      this.player.dispose()
    }
  }
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44

在上面的示例中，我们首先引入videojs和video.js的CSS文件。然后创建了一个video标签，并使用ref属性来引用它。

在Vue组件的mounted钩子中，我们使用videojs初始化了播放器。我们将video标签传递给videojs构造函数，并在构造函数中传递了一些选项。然后，我们通过src方法将本地.mp4文件加载到播放器中，并使用play方法自动播放。

在组件销毁之前，我们使用了beforeDestroy钩子来销毁videojs播放器，以避免内存泄漏问题。