vue使用vue-video-player插件播放視頻的步驟講解

更新時間：2022年12月21日 15:05:55 作者：相與還

在最近的項目中有一個視頻播放的功能,在之前的項目中沒有接觸過類似的功能,第一次接觸,把具體操作步驟一下,這篇文章主要給大家介紹了關(guān)于vue使用vue-video-player插件播放視頻的相關(guān)資料,需要的朋友可以參考下

前言

在我的一個項目中，需要進(jìn)行播放視頻，于是進(jìn)行研究，那么本次也是將我怎么用vue-video-player插件進(jìn)行播放視頻的步驟進(jìn)行講解

官網(wǎng)文檔

在進(jìn)行正式講解的時候，我覺得還是應(yīng)該把它官網(wǎng)的文檔進(jìn)行發(fā)出來，因為我這邊只是講我有使用到的方法和屬性，但是實際上，你們正式需要用到的可能不完全和我相同；這個時候就需要進(jìn)行官方文檔的查找了。

文檔鏈接:vue-video-player

步驟

下載依賴和配置

首先我們需要在我們的項目進(jìn)行安裝下載該插件的依賴

npm install vue-video-player

在你需要進(jìn)行播放視頻的頁面引入

import {<!--{C}%3C!%2D%2D%20%2D%2D%3E--> videoPlayer } from "vue-video-player";

這里我們用videoPlayer進(jìn)行標(biāo)注名稱

編寫頁面

引入完成后，我們就需要編寫頁面能夠播放視頻了

<template>
	<div>
	// 視頻
	<video-player class="video-player" ref="videoPlayer"></video-player>
	</div>
</template>

以上是最最基礎(chǔ)的播放視頻的結(jié)構(gòu)，而如果你想播放視頻的時候進(jìn)行某些操作，或者設(shè)置視頻的參數(shù)、按鈕控制等等就需要定義屬性和方法了。
如

<template>
	<div>
	// 視頻
	   <video-player
        class="video-player"
        ref="videoPlayer"
        :options="playerOptions"
        @pause="onPlayerPause($event)"
        @ended="onPlayerEnded($event)"
        @timeupdate="onPlayerTimeupdate($event)"
      >
      </video-player>
	</div>
</template>

其中

options代表的是對視頻控件的設(shè)置
pause代表的是暫停回調(diào)，當(dāng)視頻暫停的時候進(jìn)行操作
ended代表的是視頻播放結(jié)束的回調(diào)，當(dāng)視頻播放完成的時候進(jìn)行操作
timeupdate 代表的是時候監(jiān)聽每一秒進(jìn)行操作

以上只是其中一部分，下面我會列出一些比較常用的方法

本人項目播放視頻代碼

單純播放視頻是很簡單的，關(guān)鍵是你需要實現(xiàn)不同的需求，進(jìn)行不同的回調(diào)調(diào)用。
那么在播放視頻的部分，首先你需要接收到后端傳過來的路徑，以我的路徑:

D:/EXAM_MATERIAL/NEW-STAFF/VIDEO/B-0001/1/B-0001.mp4

為例

ps：這里我會只實現(xiàn)播放，具體的其他回調(diào)我不會寫進(jìn)來

界面:

<template>
	<div>
	<!--視頻組件-->
	   <video-player
        class="video-player"
        ref="videoPlayer"
        :options="playerOptions"
      >
      </video-player>
	</div>
</template>

js邏輯

<script>
import { videoPlayer } from "vue-video-player";
export default {
  name: "newStaffMediaPlay",
  // 添加組件
  components: {
    videoPlayer,
  },
  // 定義變量
   data() {
    return {
		mediaUrl: null, // 播放視頻的路徑
		// 視頻控制設(shè)置
		playerOptions: {
	        playbackRates: [1.0], // 可選的播放速度
	        autoplay: true, // 如果為true,瀏覽器準(zhǔn)備好時開始回放。
	        muted: false, // 默認(rèn)情況下將會消除任何音頻。
	        loop: false, // 是否視頻一結(jié)束就重新開始。
	        preload: "auto", // 建議瀏覽器在<video>加載元素后是否應(yīng)該開始下載視頻數(shù)據(jù)。auto瀏覽器選擇最佳行為,立即開始加載視頻（如果瀏覽器支持）
	        language: "zh-CN",
	        aspectRatio: "16:9", // 將播放器置于流暢模式，并在計算播放器的動態(tài)大小時使用該值。值應(yīng)該代表一個比例 - 用冒號分隔的兩個數(shù)字（例如"16:9"或"4:3"）
	        fluid: true, // 當(dāng)true時，Video.js player將擁有流體大小。換句話說，它將按比例縮放以適應(yīng)其容器。
	        sources: [
	          {
	            type: "video/mp4", // 類型
	            src: "", // url地址
	          },
	        ],
	        poster: "", // 封面地址
	        notSupportedMessage: "此視頻暫無法播放，請稍后再試", // 允許覆蓋Video.js無法播放媒體源時顯示的默認(rèn)信息。
	        controlBar: {
	          timeDivider: true, // 當(dāng)前時間和持續(xù)時間的分隔符
	          durationDisplay: true, // 顯示持續(xù)時間
	          remainingTimeDisplay: true, // 是否顯示剩余時間功能
	          fullscreenToggle: true, // 是否顯示全屏按鈕
        },
      },
	}
  },
  // 方法
  methods: {
  // 獲取視頻路徑方法
	  getMedia() {
	  // 假定此臨時變量為后端獲取的路徑
	  	let mediaPath = "D:/EXAM_MATERIAL/NEW-STAFF/VIDEO/B-0001/1/B-0001.mp4";
	  	// 處理路徑，防止出現(xiàn)瀏覽器禁止訪問問題
        mediaPath = mediaPath.replace("D:/EXAM_MATERIAL", "/EXAM_MATERIAL");
        let name = mediaPath.substring(mediaPath.lastIndexOf("/") + 1);
        this.mediaUrl =
          mediaPath.substring(0, mediaPath.lastIndexOf("/") + 1) +
          encodeURI(name);
          // 在視頻控件設(shè)置視頻路徑
        this.playerOptions.sources[0].src = this.mediaUrl;
	  }
	},
  // created
  created() {
	// 進(jìn)入頁面加載獲取后端傳過來的視頻路徑進(jìn)行播放
	this.getMedia();
	},
}
</script>

實際效果

以下截圖為我項目播放視頻截圖

常用回調(diào)

  <template>
    <div class='demo'>
      <video-player class="video-player vjs-custom-skin" 
        ref="videoPlayer" 
        :playsinline="true" 
        :options="playerOptions"
        @play="onPlayerPlay($event)" 
        @pause="onPlayerPause($event)"
        @ended="onPlayerEnded($event)"
        @waiting="onPlayerWaiting($event)"
        @playing="onPlayerPlaying($event)"
        @loadeddata="onPlayerLoadeddata($event)"
        @timeupdate="onPlayerTimeupdate($event)"
        @canplay="onPlayerCanplay($event)"
        @canplaythrough="onPlayerCanplaythrough($event)"
        @statechanged="playerStateChanged($event)"
        @ready="playerReadied"
      >
      </video-player>
    </div>
  </template>

 <script>
    export default {
      methods: {
        // 播放回調(diào)
        onPlayerPlay(player) {
          console.log('player play!', player)
        },

        // 暫停回調(diào)
        onPlayerPause(player) {
          console.log('player pause!', player)
        },

        // 視頻播完回調(diào)
        onPlayerEnded($event) {
          console.log(player)
        },

        // DOM元素上的readyState更改導(dǎo)致播放停止
        onPlayerWaiting($event) {
          console.log(player)
        },

        // 已開始播放回調(diào)
        onPlayerPlaying($event) {
          console.log(player)
        },

        // 當(dāng)播放器在當(dāng)前播放位置下載數(shù)據(jù)時觸發(fā)
        onPlayerLoadeddata($event) {
          console.log(player)
        },

        // 當(dāng)前播放位置發(fā)生變化時觸發(fā)。
        onPlayerTimeupdate($event) {
          console.log(player)
        },

        //媒體的readyState為HAVE_FUTURE_DATA或更高
        onPlayerCanplay(player) {
          // console.log('player Canplay!', player)
        },

        //媒體的readyState為HAVE_ENOUGH_DATA或更高。這意味著可以在不緩沖的情況下播放整個媒體文件。
        onPlayerCanplaythrough(player) {
          // console.log('player Canplaythrough!', player)
        },

        //播放狀態(tài)改變回調(diào)
        playerStateChanged(playerCurrentState) {
          console.log('player current update state', playerCurrentState)
        },

        //將偵聽器綁定到組件的就緒狀態(tài)。與事件監(jiān)聽器的不同之處在于，如果ready事件已經(jīng)發(fā)生，它將立即觸發(fā)該函數(shù)。。
        playerReadied(player) {
          console.log('example player 1 readied', player);
        }

      },
    }
 </script>