一 介紹
一款基於 vue.js 的輕量級的影片播放器插件插件
- 個性化配置
- i18n
- 服務端渲染
- 畫中畫模式
- 事件訂閱
- 易於開發
- 移動端適配
1.1 官方文檔
//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="//img.ksbbs.com/asset/Mon_1703/05cacb4e02f9d9e.mp4"></vue-core-video-player>
</div>
</div>
第四步:本地路徑問題
外部路徑:
非常簡單!就是直接上!
<vue-core-video-player src="//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: '//rb1x3v1fm.sabkt.gdipper.com/致命誘惑320p.mp4',
resolution: 360,
},
{
src: '//rb1x3v1fm.sabkt.gdipper.com/致命誘惑720p.mp4',
resolution: 720,
},
{
src: '//rb1x3v1fm.sabkt.gdipper.com/致命誘惑4k.mp4',
resolution: '4k',
}],
}
}
}
</script>
2.2 不通瀏覽器播放不同文件
const videoSource = [
{
src: '//media.vued.vanthink.cn/sparkle_your_name_am720p.webm',
type: 'video/webm',
}, {
src: '//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='//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
},
}
}
全螢幕效果圖
效果圖
四 播放 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>