發布于:2021-08-23
之前的vue項目中用到視頻播放器，但是UI不是很好看，索性就打算寫一個視頻播放器插件緊隨著vue3的發布，vue3的生態還不是很完整，就索性把這個視頻播放器插件修改成了vue3版，最終使用vite2+vue3開發
插件Github地址?vue-video-player
hls.js player component for Vue3.
適用于 Vue3 的 hls.js 播放器組件。
先看一下這個播放器(vue3-video-play)的界面吧
vue3-video-play視頻播放插件基于原生的HTML5的 <video>?標簽 開發，所以支持的視頻格式和?<video>?一致，并且支持<video>標簽的所有原生屬性和方法
必須使用 vue@3.2.4及以上版本
支持快捷鍵操作
支持倍速播放設置
支持鏡像畫面設置
支持關燈模式設置
支持畫中畫模式播放
支持全屏/網頁全屏播放
支持從固定時間開始播放
支持移動端，移動端會自動調用自帶視頻播放器
支持hls視頻流播放，支持直播
hls播放支持清晰度切換
新增: 支持hls視頻流播放
新增: 新增畫質切換，需視頻流支持
新增: 新增畫音視切換，需視頻流支持
新增: props參數增加currentTime屬性，可跳轉到固定時間播放
新增: props參數增加type屬性，視頻格式
新增: 右鍵菜單功能，右鍵菜單包涵，視頻濾鏡調節、快捷鍵說明、復制當前視頻網址
新增:?mirrorChange?loopChange?lightOffChange?事件
新增: 增加空格快捷鍵?播放/暫停?的操作
優化: 如果音量為 0 關閉靜音按鈕 音量設置為 5
npm安裝：
npm i vue3-video-play --save
yarn安裝：
yarn add vue3-video-play --save
import{ createApp }from'vue'importAppfrom'./App.vue'letapp = createApp(App)importvue3videoPlayfrom'vue3-video-play'// 引入組件import'vue3-video-play/dist/style.css'// 引入cssapp.use(vue3videoPlay)app.mount('#app')
// require styleimport'vue3-video-play/dist/style.css'import{ videoPlay }from'vue-video-play'exportdefault{components: {? ? videoPlay? }}
提供了豐富了配置功能
:::demo 自定義配置 比如自定義poster。
<template>
? <div>
? ? <vue3VideoPlay v-bind="options" poster='https://go.dreamwq.com/videos/ironMan.jpg'/>
? </div>
</template>
<script setup lang="ts">
import { reactive } from 'vue';
const options = reactive({
? width: '800px', //播放器高度
? height: '450px', //播放器高度
? color: "#409eff", //主題色
? title: '', //視頻名稱
? src: "https://go.dreamwq.com/videos/IronMan.mp4", //視頻源
? muted: false, //靜音
? webFullScreen: false,
? speedRate: ["0.75", "1.0", "1.25", "1.5", "2.0"], //播放倍速
? autoPlay: false, //自動播放
? loop: false, //循環播放
? mirror: false, //鏡像畫面
? ligthOff: false,? //關燈模式
? volume: 0.3, //默認音量大小
? control: true, //是否顯示控制器
})
</script>
<style scoped>
</style>
:::
可以通過props的speed開啟或關閉進度條功能, 并且通過?currentTime屬性控制從60秒開始播放
:::demo 通過speed關閉進度條拖動功能。 并且通過?currentTime屬性控制從60秒開始播放
<template>
? <div>
? ? <vue3VideoPlay v-bind="options" poster='https://xdlumia.oss-cn-beijing.aliyuncs.com/videos/02.jpg'/>
? </div>
</template>
<script setup lang="ts">
import { reactive } from 'vue';
const options = reactive({
? width: '500px', //播放器高度
? height: '260px', //播放器高度
? color: "#409eff", //主題色
? currentTime:60,
? speed:false, //關閉進度條拖動
? title: '', //視頻名稱
? src: "https://go.dreamwq.com/videos/IronMan.mp4", //視頻源
})
</script>
<style scoped>
</style>
:::
還可以通過props的control屬性 來控制是否顯示控制器
:::demo 通過control?來控制是否顯示控制器
<template>
? <div>
? ? <vue3VideoPlay v-bind="options" poster='https://xdlumia.oss-cn-beijing.aliyuncs.com/videos/02.jpg'/>
? </div>
</template>
<script setup lang="ts">
import { reactive } from 'vue';
const options = reactive({
? width: '500px', //播放器高度
? height: '260px', //播放器高度
? color: "#409eff", //主題色
? control: false, //是否顯示控制器
? title: '', //視頻名稱
? src: "https://go.dreamwq.com/videos/IronMan.mp4", //視頻源
})
</script>
<style scoped>
</style>
:::
:::demo?vue3-video-play?支持原生video所有事件。
<template>
? <div>
? ? ? <vue3VideoPlay
? ? ? width="800px"
? ? ? title="鋼鐵俠"
? ? ? :src="options.src"
? ? ? :poster="options.poster"
? ? ? @play="onPlay"
? ? ? @pause="onPause"
? ? ? @timeupdate="onTimeupdate"
? ? ? @canplay="onCanplay" />
? </div>
</template>
<script setup lang="ts">
import { reactive } from 'vue';
const options = reactive({
? src: "https://go.dreamwq.com/videos/IronMan.mp4", //視頻源
? poster: '', //封面
})
const onPlay = (ev) => {
? console.log('播放')
}
const onPause = (ev) => {
? console.log(ev, '暫停')
}
const onTimeupdate = (ev) => {
? console.log(ev, '時間更新')
}
const onCanplay = (ev) => {
? console.log(ev, '可以播放')
}
</script>
<style scoped>
</style>
:::
:::demo?vue3-video-play?支持m3u8(hls)播放
<template>
? <div>
? ? ? <vue3VideoPlay
? ? ? width="800px"
? ? ? title="冰河世紀"
? ? ? :src="options.src"
? ? ? :type="options.type"
? ? ? :autoPlay="false"
? ? ? />
? </div>
</template>
<script setup lang="ts">
import { reactive } from 'vue';
const options = reactive({
? src: "https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8", //視頻源
? type: 'm3u8', //視頻類型
})
</script>
<style scoped>
</style>
:::
vue3-video-play 支持video原生所有Attributes?video原生屬性?使用方式和props屬性使用一致
名稱說明類型可選值默認值
width播放器寬度string-800px
height播放器高度string-450px
title視頻名稱string--
src視頻資源string--
type視頻類型string-video/mp4
color播放器主色調string-#409eff
webFullScreen網頁全屏boolean-false
speed是否支持快進快退boolean-true
currentTime跳轉到固定播放時間(s)number-0
speedRate倍速配置array-[“2.0”, “1.0”, “1.5”, “1.25”, “0.75”, “0.5”]
mirror鏡像畫面boolean-false
ligthOff關燈模式boolean-false
muted靜音boolean-false
autoPlay自動播放boolean-false,為true時會自動靜音
loop循環播放boolean-false
volume默認音量0.30-10.3
poster視頻封面string-視頻第一幀
vue3-video-play支持video原生所有事件?video默認事件
事件名稱說明回調
mirrorChange鏡像翻轉事件val
loopChange循環播放開關事件val
lightOffChange關燈模式事件val
loadstart客戶端開始請求數據event
progress客戶端正在請求數據event
error請求數據時遇到錯誤event
stalled網速失速event
play開始播放時觸發event
pause暫停時觸發event
loadedmetadata成功獲取資源長度event
loadeddata緩沖中event
waiting等待數據，并非錯誤event
playing開始回放event
canplay暫停狀態下可以播放event
canplaythrough可以持續播放event
timeupdate更新播放時間event
ended播放結束event
ratechange播放速率改變event
durationchange資源長度改變event
volumechange音量改變event
支持快捷鍵操作
鍵名說明
Space暫停/播放
方向右鍵 →單次快進 10s，長按 5 倍速播放
方向左鍵 ←快退 10s
方向上鍵 ↑音量+10%
方向下鍵 ↓音量-10%
Esc退出全屏/退出網頁全屏
F全屏/退出全屏
