如何使用 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.tw/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+ 瀏覽量

開啟您的 職業生涯

透過完成課程獲得認證

開始學習
廣告