vue-core-video-player-基於vue.js的視訊播放器元件

super發表於2022-04-30
IDEVue.js播放器元件

一 介紹

一款基於 vue.js 的輕量級的視訊播放器外掛外掛

  • 個性化配置
  • i18n
  • 服務端渲染
  • 畫中畫模式
  • 事件訂閱
  • 易於開發
  • 移動端適配

1.1 官方文件

https://core-player.github.io/vue-core-video-player/zh/get-started.html

1.2 安裝和快速使用

第一步：安裝

NPM

npm install --save vue-core-video-player

或者使用 yarn

yarn add -S vue-core-video-player

第二步：main.js引入

預設英語，你如果想成中文就加一個lang
en: 英語
zh-CN: 簡體中文
jp: 日本

import VueCoreVideoPlayer from 'vue-core-video-player'
Vue.use(VueCoreVideoPlayer)
//或者
Vue.use(VueCoreVideoPlayer, {
  lang: 'zh-CN'
})

Use custom language data

import VueCoreVideoPlayer from 'vue-core-video-player'

const kr = {

...

"dashboard" : {

"btn": {

....

"pause": "일시적인",

"fullscreen": "전체화면",

"exitFullscreen": "전체 화면 종료",

},

}


Vue.use(VueCoreVideoPlayer, {

lang: kr

})

第三步：在元件中寫入

<div id="app">
  <div class="player-container">
    <vue-core-video-player src="http://img.ksbbs.com/asset/Mon_1703/05cacb4e02f9d9e.mp4"></vue-core-video-player>
  </div>
</div>

第四步：本地路徑問題

外部路徑：
非常簡單！就是直接上！

 <vue-core-video-player src="http://img.ksbbs.com/asset/Mon_1703/05cacb4e02f9d9e.mp4">
 </vue-core-video-player>

本地路徑：
不能直接./assets/1.mp4，無效的。需要使用require("...")

<template>
  <div id="app">
       <vue-core-video-player :src="url"></vue-core-video-player>
  </div>
</template>

<script>

export default{

data(){

return{

url:require("./assets/1.mp4")

}

}

}

</script>

二 基本配置

2.1 解析度切換

<template>
  <div id="app">
       <vue-core-video-player :src="mp4_url"></vue-core-video-player>
  </div>
</template>

<script>

export default{

data(){

return{

mp4_url: [

{

src: 'http://rb1x3v1fm.sabkt.gdipper.com/致命誘惑320p.mp4',

resolution: 360,

},

{

src: 'http://rb1x3v1fm.sabkt.gdipper.com/致命誘惑720p.mp4',

resolution: 720,

},

{

src: 'http://rb1x3v1fm.sabkt.gdipper.com/致命誘惑4k.mp4',

resolution: '4k',


                }],
        }
    }
}



</script>

2.2 不通瀏覽器播放不同檔案

const videoSource = [
  {
    src: 'https://media.vued.vanthink.cn/sparkle_your_name_am720p.webm',
    type: 'video/webm',
  }, {
    src: 'https://media.vued.vanthink.cn/sparkle_your_name_am720p.mp4',
    type: 'video/mp4',
  }
]

2.3 底部控制欄

// 底部控制欄 controls 屬性 可以用來控制底部控制欄的顯示隱藏

// 1 String 型別

'fixed' 表示底部導航欄會一直固定顯示；

'auto' 表示底部導航欄在使用者未產生任何互動操作後自動消失，預設的形式；


// 2 Boolean 型別

false 表示始終不顯示導航欄；

true 預設值；它和設定 'auto' 形式類似；

2.4 自動播放

//如果你設定了 autoplay, 播放器會嘗試自動播放視訊；
//由於不同的瀏覽器對自動播放行為的限制不一樣；
//如果播放器自動播放失敗會顯示播放按鈕，方便使用者手動觸發

2.5 視訊播放控制

元件保持了和原生 HTML Video 屬性配置的對接

Props Type Example Description
volume number 0.5 控制視訊音量(0-1)
muted boolean true 設定為 true, 視訊會靜音
cover string './cover.png' 顯示視訊的封面，如果設定 autoplay，自動播放成功後，不會顯示
title string 'your title' 展示視訊的標題，方便 SEO
logo string './logo.png' 顯示播放器的 logo
loop boolean true 會迴圈播放當前視訊
preload string 'metadata' 'none' 表示不會預載入視訊; 'metadata' 表示只載入視訊 metadata 資訊部分
cover string 圖片地址 預覽圖

案例

<vue-core-video-player :src="mp4_url"
     :muted="true"
     :autoplay="false"
     title="致命誘惑"
     preload="nona"
     :loop="true"
     controls="auto"
     cover='https://img1.wxzxzj.com/vpc-example-cover-your-name-c.png'
></vue-core-video-player>

三 事件

3.1 基本事件

VueCoreVideoPlayer遵循W3C標準的媒體事件API,你可以前往MDN獲取這些細節，下面羅列一些非常常用的事件：

  • play 表示當播放器開始播放或者通過 play() 方法從暫停狀態恢復。
  • pause 當播放器停止播放的時候觸發。
  • progress 當播放器正在下載媒體資源。
  • loadeddata 當播放器開始載入第一幀時候觸發。
  • canplay 當載入足夠資料可以滿足基本播放後觸發.。
  • durationchange 當媒體獲取一定資料，並且完整的解析出 metadata 資訊。
  • ended 當媒體播放結束時候觸發。
  • timeupdate 當播放的媒體 currenttime 發生改變時候觸發。
  • seeked 當使用者 seek 操作完成觸發。
<template>
  <div class="player-container">
    <vue-core-video-player @loadedmetadata="loaded" @play="playFunc" @pause="pauseFunc" src="./videos/your_video.mp4"></vue-core-video-player>
  </div>
<template>

<script>

export default {

methods: {

loaded () {

// your code

},

playFunc () {

// your code

},

pauseFunc () {


    <span class="hljs-comment">// your code</span>
}



}

}

3.2 播放錯誤

播放錯誤偶有發生， 我們提供了播放錯誤碼方便開發者或者使用者瞭解一些原因.

<template>
  <div class="player-container">
    <vue-core-video-player @error="errorHandle" src="./videos/your_video.mp4"></vue-core-video-player>
  </div>
<template>

<script>

export default {

methods: {

errorHandle (e) {

// handle error

},

}

}

全屏效果圖

image

效果圖

image

四 播放 HLS

HLS（HTTP Live Streaming）——基於HTTP的自適應位元速率流媒體傳輸協議。HLS描述了一組通過網際網路提供音視訊服務的工具和程式。一個視訊可以被分割成多個視訊切片，這些切片的傳送位置和順序在一組被稱為播放列表的XML檔案中，該檔案以副檔名m3u8結尾。人們可以使用相容了HLS的播放器播放視訊

playcore-hls 是一款 HLS 解碼外掛，方便支援 HLS 的播放。

4.1 快速開始

$ npm install @core-player/playcore-hls --save

<template>
  <div id="app">
    <div class="player-container">
      <vue-core-video-player :core="HLSCore" src="your_file.m3u8"></vue-core-video-player>
    </div>
  </div>
</template>
<script>
import VueCoreVideoPlayer from 'vue-core-video-player'
import HLSCore from '@core-player/playcore-hls

Vue.use(VueCoreVideoPlayer)


export default {

name: 'App',

data () {

return {

HLSCore

}

}

}


</script>

相關文章