下載video.js

npm install --save-dev video.js

main.js引入video

import Video from 'video.js'
import 'video.js/dist/video-js.css'
Vue.prototype.$video = Video //引入Video播放器

創(chuàng)建視頻播放器組件

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

<script>
  import videojs from 'video.js'
  //不要忘記包括視頻.js CSS，位于 .<code>video.js/dist/video-js.css</code>

  export default {
    name: 'VideoPlayer',
    props: {
      options: {
        type: Object,
        default() {
          return {}
        }
      }
    },
    data() {
      return {
        player: null
      }
    },
    mounted() {
      this.player = videojs(this.$refs.videoPlayer, this.options, function onPlayerReady() {
        console.log('onPlayerReady', this)
      })
    },
    beforeDestroy() {
      if (this.player) {
        this.player.dispose()
      }
    }
  }
</script>

<style lang="less" scoped>
  .VideoPlayer {
    width: 100%;
    height: 100%;
  }

  .video-js {
    width: 100%;
    height: 100%;
    background: #faf6fa;
  }
</style>

在組件中引入視頻組件

<template>
  <div class="Index">
    <!--    <iframe-->
    <!--      width="500"-->
    <!--      height="100"-->
    <!--      src="http://t.zoukankan.com/520BigBear-p-14291680.html"-->
    <!--    ></iframe>-->
    <video-player :options="videoOptions" />
  </div>
</template>

<script>
  import VideoPlayer from '@/components/module/Video/VideoPlayer'//引入組件

  export default {
    name: 'Index',
    components: {
      VideoPlayer
    },
    data() {
      return {
        videoOptions: {
          autoplay: true,
          controls: true,
          sources: [
            {
              src: '/image/video.mp4',
              type: 'video/mp4'
            }
          ]
        }
      }
    },
    props: {},
    watch: {},
    methods: {},
    computed: {},
    created() {},
    mounted() {},
    destroyed() {}
  }
</script>

<style lang="less" scoped>
  .Index {
    width: 100%;
    height: 100%;
  }
</style>

video配置

常用事件

1、播放 this.play()
2、停止 – video沒有stop方法，可以用pause 暫停獲得同樣的效果
3、暫停 this.pause()
4、銷毀 this.dispose()
5、監(jiān)聽 this.on(‘click‘,fn)
6、觸發(fā)事件this.trigger(‘dispose‘)

常用選項

autoplay : true/false 播放器準備好之后，是否自動播放 【默認false】
controls : true/false 是否擁有控制條 【默認true】,如果設(shè)為false ,那么只能通過api進行控制了。也就是說界面上不會出現(xiàn)任何控制按鈕
height: 視頻容器的高度，字符串或數(shù)字 單位像素 比如： height:300 or height:‘300px‘
width: 視頻容器的寬度, 字符串或數(shù)字 單位像素
loop : true/false 視頻播放結(jié)束后，是否循環(huán)播放
muted : true/false 是否靜音
poster: 播放前顯示的視頻畫面，播放開始之后自動移除。通常傳入一個URL
preload:預(yù)加載
‘a(chǎn)uto‘ 自動
’metadata‘ 元數(shù)據(jù)信息 ，比如視頻長度，尺寸等
‘none‘ 不預(yù)加載任何數(shù)據(jù)，直到用戶開始播放才開始下載
children: Array | Object 可選子組件 從基礎(chǔ)的Component組件繼承而來的子組件，數(shù)組中的順序?qū)⒂绊懡M件的創(chuàng)建順序哦。

options 選項

標準元素選項
這些選項中的每一個也可用作標準元素屬性 ; 因此，可以使用設(shè)置指南中列出的所有三種方式定義它們。通常，未列出默認值，因為這是留給瀏覽器供應(yīng)商的。

autoplay
類型： boolean
如果true/作為屬性存在，則在播放器準備就緒時開始播放。

注意：從iOS 10開始，Apple autoplay在Safari中提供支持。有關(guān)詳細信息，請參閱“新增功能。

controls
類型： boolean
確定播放器是否具有用戶可以與之交互的控件。沒有控件，啟動視頻播放的唯一方法是使用autoplay屬性或通過Player API。

height
類型： string|number
設(shè)置視頻播放器的顯示高度（以像素為單位）。

loop
類型： boolean
使視頻一結(jié)束就重新開始。

muted
類型： boolean
默認情況下會靜音任何音頻。

poster
類型： string
在視頻開始播放之前顯示的圖像的URL。這通常是視頻的框架或自定義標題屏幕。一旦用戶點擊“播放”，圖像就會消失。

preload
類型： string
建議瀏覽器是否應(yīng)在加載元素后立即開始下載視頻數(shù)據(jù)。支持的值是：
‘a(chǎn)uto’
立即開始加載視頻（如果瀏覽器支持）。某些移動設(shè)備不會預(yù)加載視頻，以保護用戶的帶寬/數(shù)據(jù)使用。這就是為什么這個價值被稱為’汽車’，而不是更具決定性的東西’true’。
這往往是最常見和推薦的值，因為它允許瀏覽器選擇最佳行為。
‘metadata’
僅加載視頻的元數(shù)據(jù)，其中包括視頻的持續(xù)時間和尺寸等信息。有時，元數(shù)據(jù)將通過下載幾幀視頻來加載。
‘none’
不要預(yù)加載任何數(shù)據(jù)。瀏覽器將等待用戶點擊“播放”開始下載。

src
類型： string
要嵌入的視頻源的源URL。

width
類型： string|number
設(shè)置視頻播放器的顯示寬度（以像素為單位）。

Video.js特定的選項
undefined除非另有說明，否則默認情況下每個選項

aspectRatio
類型： string
將播放器置于流體模式，并在計算播放器的動態(tài)大小時使用該值。該值應(yīng)表示比率 - 由冒號（例如"16:9"或"4:3"）分隔的兩個數(shù)字。

autoSetup
類型： boolean
阻止播放器為具有data-setup屬性的媒體元素運行autoSetup 。

注意：必須在與videojs.options.autoSetup = falsevideojs源加載生效的同一時刻全局設(shè)置。

children
類型： Array|Object
此選項繼承自基Component類。

fluid
類型： boolean
何時true，Video.js播放器將具有流暢的大小。換句話說，它將擴展以適應(yīng)其容器。

此外，如果元素具有"vjs-fluid"，則此選項自動設(shè)置為true。

inactivityTimeout
類型： number
Video.js表示用戶通過"vjs-user-active"和"vjs-user-inactive"類以及"useractive"事件與玩家進行交互。

在inactivityTimeout決定了不活動的許多毫秒聲明用戶閑置之前是必需的。值為0表示沒有inactivityTimeout，用戶永遠不會被視為非活動狀態(tài)。

language
鍵入：string，默認值：瀏覽器默認值或’en’
與播放器中的一種可用語言匹配的語言代碼。這為播放器設(shè)置了初始語言，但始終可以更改。

在Video.js中了解有關(guān)語言的更多信息。

languages
類型： Object
自定義播放器中可用的語言。此對象的鍵將是語言代碼，值將是具有英語鍵和翻譯值的對象。

在Video.js中了解有關(guān)語言的更多信息

注意：通常，不需要此選項，最好將自定義語言傳遞給videojs.addLanguage()所有玩家！

nativeControlsForTouch
類型： boolean
明確設(shè)置關(guān)聯(lián)技術(shù)選項的默認值。

notSupportedMessage
類型： string
允許覆蓋Video.js無法播放媒體源時顯示的默認消息。

playbackRates
類型： Array
嚴格大于0的數(shù)字數(shù)組，其中1表示常速（100％），0.5表示半速（50％），2表示雙速（200％）等。如果指定，Video.js顯示控件（類vjs-playback-rate）允許用戶從選擇數(shù)組中選擇播放速度。選項以從下到上的指定順序顯示。
參考：https://blog.csdn.net/a0405221/article/details/80923090