如何使用 Vue.js 设置 Video.js？

Video.js 是一款现代的网页视频播放器，支持许多标准的视频播放格式以及最新的视频播放格式。Video.js 非常流行用于创建视频播放器，并且拥有庞大的社区支持。

Video.js 最棒的一点在于它非常容易导入和使用到您的项目中。它还支持各种流行的框架，如 React.js、Vue.js 和 Angular.js。

在本教程中，我们将了解如何使用 vue.js 框架设置 video.js。我们还将实现一个基本示例，使用 video.js 和 vue.js 创建视频播放器。

如何使用 Vue.js 设置 Video.js？

为了在我们的项目中使用 vue.js 框架中的 video.js，我们首先需要在项目中创建一个 Vue 组件，然后我们可以在项目的各个地方使用该组件来创建视频播放器。

创建用于 video.js 的 vue.js 组件

在本教程的这一部分中，我们将了解如何创建一个名为“VideoJS”的 Vue 组件以及如何在项目中使用它。然后，我们将导入“VideoJS”组件并利用它来创建一个 mp4 视频播放器。

<template>
   <div>
      <video ref="videoJsPlayer" class="video-js vjs-defaultskin"></ video>
   </div>
</template>
<script>
   // Importing video-js
   import videojs from 'video.js';
   export default {
      name: 'VideoJsPlayer',
      props: {
         options: {
            type: Object,
            default() {
               return {};
            }
         }
      },
      data() {
         return {
         player: null
      }
   },
   // initializing the video player
   // when the component is being mounted
   mounted() {
      this.player = videojs(this.$refs.videoPlayer, this.options,() => {
         this.player.log('video player ready', this);
      });
   },
   // destroying the video player
   // when the component is being destroyed
   beforeDestroy() {
      if (this.player) {
         this.player.dispose();
      }
   }
}
</script>

在上面的示例中，我们创建了一个 vue.js 组件，它返回一个带有“video-js vjs-default-skin”类的 <video> 元素，并将其引用为“VideoJsPlayer”。在 <script> 标签内，我们首先导入了 video.js 库，然后我们导出一个名为“VideoJsPlayer”的 Vue.js 组件。该组件将接收一些 video.js 选项对象作为 props。

稍后，当组件被挂载时，即当组件被创建时，我们还将初始化 video.js 视频播放器并在控制台中记录文本“video player ready”。同样，当组件被卸载或销毁时，我们也将销毁对 video.js 视频播放器的引用。

现在，既然我们已经创建了一个名为“VideoJsPlayer”的用于 video.js 的 vue.js 组件，它返回一个视频播放器，让我们看看如何在项目的其他部分使用此组件来创建视频播放器。

使用 video.js 组件在 vue.js 中创建视频播放器

首先，我们将“VideoJsPlayer”组件导入到我们的新组件中。然后，我们需要使用导入创建新的视频播放器，并通过将它们作为 props 传递给视频播放器来设置一些视频选项。

请考虑以下代码示例，以导入我们在前面部分创建的“VideoJsPlayer”并将其用于创建 video.js mp4 播放器。

<template>
   <div>
      <video-js-player :options="videoOptions" />
   </div>
</template>
<script>
// Importing VideoJSPlayer component created in the previous step
import VideoJSPlayer from '@/components/VideoPlayer.vue';
export default {
   name: 'VideoJSExample',
   components: {
      VideoJsPlayer
   },
   data() {
      return {
      
         // setting the video options for the video player
         videoOptions: {
            autoplay: true,
            controls: true,
            preload: true,
            fluid: true,
            sources: [
               {
               src:
                  'https://tutorialspoint.com/videos/myVideo.mp4',
                  type: 'video/mp4'
               }
            ]
         }
      };
   }
};
</script>

在上面的代码示例中，我们导入了在本文前面部分创建的“VideoJsPlayer”组件。

稍后，我们将组件导出为“VideoJSExample”，它引用了“VideoJsPlayer”组件，然后我们为视频播放器设置一些标准的视频选项，如控制、预加载、自动播放和自适应。

在视频选项的底部，我们有一个 sources 数组，在其中我们传递所有带有路径和 MIME 类型的视频文件。在我们的例子中，它是一个 mp4 文件，因此我们传递了 mp4 文件的路径，类型为“video/mp4”。Sources 属性是一个对象数组，因此您可以传递多个视频文件。

最后，我们在 <template> 标签内使用 <video-js-player>，并将选项作为“VideoJsOptions”对象传递。

因此，当您执行上述代码时，您会注意到在 Web 浏览器中创建了一个视频播放器，并且将 controls、preload、autoplay 和 fluid 选项设置为 true。现在，我们可以在项目的任何地方导入“VideoJsPlayer”组件并使用它为各种视频创建视频播放器。

注意 - 将 sources 数组中的 src 路径替换为您自己的 mp4 视频文件的路径，以使代码正常工作。

结论

在本教程中，我们了解了如何通过创建一个名为“VideoJsPlayer”的组件来设置 video.js 和 Vue.js。随后，我们还了解了如何导入创建的组件，以借助示例为我们的视频文件创建 mp4 视频播放器。

更新于: 2022-11-11

3K+ 浏览量

开启您的 职业生涯

通过完成课程获得认证

开始学习
广告