vue視頻播放插件 vue-video-player

一、安裝

npm install vue-video-player --save

1、全局引用， 在main.js里面導入並引用

import VideoPlayer from 'vue-video-player'
import 'vue-video-player/src/custom-theme.css'
import 'video.js/dist/video-js.css'

Vue.use(VideoPlayer)

2、組件內引用

import { videoPlayer } from 'vue-video-player'
import 'video.js/dist/video-js.css'
import 'vue-video-player/src/custom-theme.css'

export default {
  components: {
    videoPlayer
  }
}

3、控制播放和暫停

this.$refs.videoPlayer.player.play()   // 播放
this.$refs.videoPlayer.player.pause()  // 暫停
this.$refs.videoPlayer.player.src(src) // 重置進度條復制代碼
this.playerOptions.sources[0].src = 'vue-mobile/media/sh.mp4'; // 視頻地址

Math.ceil(player.cache_.currentTime)  // 當前播放時長
Math.floor(player.cache_.duration)    // 總時長

4、視頻格式

type："video/webm"   // 可以播放，用ogg也可打開
type："video/ogg"    // 可以播放，用webm也可打開
type："video/3gp"    // 可以播放
type："video/mp4"    // 可以播放
type："video/avi"    // 打不開
type："video/flv"    // 打不開
type："video/mkv"    // 打不開
type："video/mov"    // 打不開
type："video/mpg"    // 打不開
type："video/swf"    // 打不開
type："video/ts"     // 打不開
type："video/wmv"    // 打不開
type："video/vob"    // 沒轉化
type："video/mxf"    // 轉化出錯
type: "video/rm"     // 轉化出錯復制代碼

5、完整代碼

<template>
  <div class="video_wrap">
    <video-player class="vjs-custom-skin" ref="videoPlayer" :playsinline="true" :options="playerOptions" 
      @play="onPlay($event)"
      @playing="onPlaying($event)"
      @pause="onPause($event)"
      @ended="onEnded($event)"
      @waiting="onWaiting($event)"
      @loadeddata="onLoadeddata($event)"
      @timeupdate="onTimeupdate($event)"
      @canplay="onCanplay($event)"
      @canplaythrough="onCanplaythrough($event)"
      @statechanged="playerStateChanged($event)" 
      @ready="playerReadied" />
  </div>
</template>

<script>
import { videoPlayer } from 'vue-video-player';
import 'video.js/dist/video-js.css';
import 'vue-video-player/src/custom-theme.css';// 不引入該文件，持續時間會不顯示
export default {
  components: { videoPlayer },
  data() {
    return {
      playerOptions: {
        controls: true,  // 是否顯示控制欄
        playbackRates: [0.5, 1.0, 1.5, 2.0], // 播放速度
        autoplay: false, // 如果為true,瀏覽器准備好時開始回放
        muted: false,    // 默認情況下將會消除任何音頻。
        loop: false,     // 是否視頻一結束就重新開始。
        preload: 'auto', // 建議瀏覽器在<video>加載元素后是否應該開始下載視頻數據。auto瀏覽器選擇最佳行為,立即開始加載視頻（如果瀏覽器支持）
        language: 'zh-CN',
        aspectRatio: '16:9', // 將播放器置於流暢模式，並在計算播放器的動態大小時使用該值。值應該代表一個比例 - 用冒號分隔的兩個數字（例如"16:9"或"4:3"）
        fluid: true, // 當true時，Video.js player將擁有流體大小。換句話說，它將按比例縮放以適應其容器。
        sources: [{
          type: "video/mp4",
          src: '/vue-mobile/media/sh.mp4'
        }],
        poster: '', // 封面地址
        width: document.documentElement.clientWidth,
        notSupportedMessage: '此視頻暫無法播放，請稍后再試', // 允許覆蓋Video.js無法播放媒體源時顯示的默認信息。
        controlBar: {
          timeDivider: true,           // 當前時間和持續時間的分隔符
          durationDisplay: true,       // 顯示持續時間
          remainingTimeDisplay: false, // 是否顯示剩余時間功能
          fullscreenToggle: true       // 是否顯示全屏按鈕
        }
      },
      playtimes: 5,     // 視頻觀看起點  (視頻將從5s處開始播放)
      currentTime: 0,   // 當前播放進度
      duration: 0,      // 總時長
    }
  },
  watch: {
    playtimes(val, oldVal) {
      this.playerReadied(this.$refs.videoPlayer.player, val);
    }
  },
  computed: {
    // 掛載視頻組件（非必須）不寫這一步也可以實現播放，添加這個是為了自定義按鈕使用
    player() {
      return this.$refs.videoPlayer.player  // 自定義播放
    }
  },
  methods: {
    // 當文件就緒可以開始播放時
    onCanplay(player) {
      this.duration = Math.floor(player.cache_.duration);// 總時長
    },
    // 當媒介數據已加載時
    onLoadeddata(player) {
      player.currentTime(this.playtimes); // 指定時間播放
    },
    // 當播放位置改變時（比如快進到媒介中一個不同的位置時）
    onTimeupdate(player) {
      this.currentTime = Math.ceil(player.cache_.currentTime);// 當前播放時長
    },
    // 播放回調
    onPlay(player) {},
    // 已開始播放回調
    onPlaying(player) {},
    // 暫停回調
    onPause(player) {},
    // 視頻播完回調
    onEnded(player) {},
    // 當視頻播放完畢已停止播放，再次點擊播放時觸發
    onWaiting(player) {},
    // 當媒介能夠無需因緩沖而停止即可播放至結尾時
    onCanplaythrough(player) {},
    // 播放狀態改變回調
    playerStateChanged(CurrentState) {},
    // 將偵聽器綁定到組件的就緒狀態。與事件監聽器的不同之處在於，如果ready事件已經發生，它將立即觸發該函數。。
    playerReadied(player) { }
  }
}
</script>

 

二、擴展

1、如果需要兼容m3u8的需要下載插件

npm install --save videojs-contrib-hls

2、在文件中引入

import 'videojs-contrib-hls';
// 這么引入會出現找不到文件，沒找到問題所在，如果這么引入不行，可以改為在main.js文件中

 const hls = require('videojs-contrib-hls')
 Vue.use(hls)

3、在頁面中測試

{
    type: 'application/x-mpegURL', // 這里的種類支持很多種：基本視頻格式、直播、流媒體等，具體可以參看git網址項目
    src: 'https://cdn.letv-cdn.com/2018/12/05/JOCeEEUuoteFrjCg/playlist.m3u8' // url地址，從別的博主那看來的地址，親測可用
}