發(fā)布于:2021-08-23

之前的vue項目中用到視頻播放器猬仁，但是UI不是很好看湾趾，索性就打算寫一個視頻播放器插件緊隨著vue3的發(fā)布羡微，vue3的生態(tài)還不是很完整，就索性把這個視頻播放器插件修改成了vue3版，最終使用vite2+vue3開發(fā)

插件Github地址?vue-video-player

hls.js player component for Vue3.

適用于 Vue3 的 hls.js 播放器組件。

先看一下這個播放器(vue3-video-play)的界面吧

vue3-video-play視頻播放插件基于原生的HTML5的 <video>?標簽 開發(fā)，所以支持的視頻格式和?<video>?一致赃春，并且支持<video>標簽的所有原生屬性和方法

必須使用 vue@3.2.4及以上版本

功能一覽

支持快捷鍵操作

支持倍速播放設置

支持鏡像畫面設置

支持關燈模式設置

支持畫中畫模式播放

支持全屏/網頁全屏播放

支持從固定時間開始播放

支持移動端，移動端會自動調用自帶視頻播放器

支持hls視頻流播放劫乱，支持直播

hls播放支持清晰度切換

主頁示例

https://xdlumia.github.io

rc版本 v1.3.0-rc.3 ??

新增: 支持hls視頻流播放

新增: 新增畫質切換织中，需視頻流支持

新增: 新增畫音視切換，需視頻流支持

新增: props參數增加currentTime屬性衷戈，可跳轉到固定時間播放

新增: props參數增加type屬性抠璃，視頻格式

近期更新 v1.2.52 ??

新增: 右鍵菜單功能，右鍵菜單包涵脱惰，視頻濾鏡調節(jié)、快捷鍵說明窿春、復制當前視頻網址

新增:?mirrorChange?loopChange?lightOffChange?事件

新增: 增加空格快捷鍵?播放/暫停?的操作

優(yōu)化: 如果音量為 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, //循環(huán)播放

? 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>

:::

Hls m3u8視頻/直播

:::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>

:::

Props

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循環(huán)播放boolean-false

volume默認音量0.30-10.3

poster視頻封面string-視頻第一幀

Events

vue3-video-play支持video原生所有事件?video默認事件

事件名稱說明回調

mirrorChange鏡像翻轉事件val

loopChange循環(huán)播放開關事件val

lightOffChange關燈模式事件val

loadstart客戶端開始請求數據event

progress客戶端正在請求數據event

error請求數據時遇到錯誤event

stalled網速失速event

play開始播放時觸發(fā)event

pause暫停時觸發(fā)event

loadedmetadata成功獲取資源長度event

loadeddata緩沖中event

waiting等待數據蔚润，并非錯誤event

playing開始回放event

canplay暫停狀態(tài)下可以播放event

canplaythrough可以持續(xù)播放event

timeupdate更新播放時間event

ended播放結束event

ratechange播放速率改變event

durationchange資源長度改變event

volumechange音量改變event

快捷鍵說明

支持快捷鍵操作

鍵名說明

Space暫停/播放

方向右鍵 →單次快進 10s磅氨，長按 5 倍速播放

方向左鍵 ←快退 10s

方向上鍵 ↑音量+10%

方向下鍵 ↓音量-10%

Esc退出全屏/退出網頁全屏

F全屏/退出全屏

Author

xdlumia

點個start

vue3-video-play