vue3-eggplant

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

Vue3-video-play

適用於 Vue3 的 hls.js 播放器元件 | 並且支援 MP4/WebM/Ogg 格式 配置強大，UI 還算好看

功能一覽

1. 支援快捷鍵操作
2. 支援倍速播放設定
3. 支援映象畫面設定
4. 支援關燈模式設定
5. 支援畫中畫模式播放
6. 支援全屏/網頁全屏播放
7. 支援從固定時間開始播放
8. 支援移動端，移動端會自動呼叫自帶視訊播放器
9. 支援 hls 視訊流播放，支援直播
10. hls 播放支援清晰度切換

主頁示例

https://codelife.cc/vue3-video-play/

近期更新 v1.3.1-beta.3 🎉

• 新增: 支援 hls 視訊流播放
• 新增: 新增畫質切換，需視訊流支援
• 新增: 新增畫音視切換，需視訊流支援
• 新增: props 引數增加currentTime屬性，可跳轉到固定時間播放
• 新增: props 引數增加type屬性，視訊格式
• 新增: props 引數增加controlBtns屬性，自定義控制器按鈕顯示
• 新增: 右鍵選單功能，右鍵選單包涵，視訊濾鏡調節、快捷鍵說明、複製當前視訊網址
• 新增: mirrorChange loopChange lightOffChange 事件
• 新增: 增加空格快捷鍵 播放/暫停 的操作
• 優化: 如果音量為 0 關閉靜音按鈕 音量設定為 5

使用指南

安裝

npm 安裝：

npm i vue3-video-play --save

yarn 安裝：

yarn add vue3-video-play --save

開始使用

全域性使用

import { createApp } from "vue";
import App from "./App.vue";
let app = createApp(App);

import vue3videoPlay from "vue3-video-play"; // 引入元件
import "vue3-video-play/dist/style.css"; // 引入css
app.use(vue3videoPlay);

app.mount("#app");

元件內使用

// require style
import "vue3-video-play/dist/style.css";
import { videoPlay } from "vue3-video-play";
export default {
  components: {
    videoPlay,
  },
};

基本示例

提供了豐富了配置功能 :::demo 自定義配置 比如自定義 poster。

<template>
  <div>
    <vue3VideoPlay
      v-bind="options"
      poster="https://cdn.jsdelivr.net/gh/xdlumia/files/video-play/ironMan.jpg"
    />
  </div>
</template>

<script setup lang="ts">
import { reactive } from "vue";
const options = reactive({
  width: "800px", //播放器寬度
  height: "450px", //播放器高度
  color: "#409eff", //主題色
  title: "", //視訊名稱
  src: "https://cdn.jsdelivr.net/gh/xdlumia/files/video-play/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, //是否顯示控制
  controlBtns: [
    "audioTrack",
    "quality",
    "speedRate",
    "volume",
    "setting",
    "pip",
    "pageFullScreen",
    "fullScreen",
  ], //顯示所有按鈕,
});
</script>

<style scoped></style>

:::

可以通過props的speed開啟或關閉進度條功能, 並且通過 currentTime屬性控制從 60 秒開始播放

:::demo 通過speed關閉進度條拖動功能。 並且通過 currentTime屬性控制從 60 秒開始播放

<template>
  <div>
    <vue3VideoPlay
      v-bind="options"
      poster="https://cdn.jsdelivr.net/gh/xdlumia/files/video-play/ironMan.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://cdn.jsdelivr.net/gh/xdlumia/files/video-play/IronMan.mp4", //視訊源
});
</script>

<style scoped></style>

:::

還可以通過props的control屬性 來控制是否顯示控制器 :::demo 通過control 來控制是否顯示控制器

<template>
  <div>
    <vue3VideoPlay
      v-bind="options"
      poster="https://cdn.jsdelivr.net/gh/xdlumia/files/video-play/ironMan.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://cdn.jsdelivr.net/gh/xdlumia/files/video-play/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://cdn.jsdelivr.net/gh/xdlumia/files/video-play/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
color	播放器主色調	string	-	#409eff
src	視訊資源	string	-	-
title	視訊名稱	string	-	-
type	視訊型別	string	-	video/mp4
poster	視訊封面	string	-	視訊第一幀
webFullScreen	網頁全屏	boolean	-	false
speed	是否支援快進快退	boolean	-	true
currentTime	跳轉到固定播放時間(s)	number	-	0
playsinline	ios 點選螢幕是否全屏	boolean	-	false
muted	靜音	boolean	-	false
speedRate	倍速配置	array	-	["2.0", "1.0", "1.5", "1.25", "0.75", "0.5"]
autoPlay	自動播放	boolean	-	false,為 true 時會自動靜音
loop	迴圈播放	boolean	-	false
mirror	映象畫面	boolean	-	false
ligthOff	關燈模式	boolean	-	false
volume	預設音量	number	0-1	0.3
control	是否顯示控制器	boolean	-	true
controlBtns	控制器顯示的按鈕	array	['audioTrack', 'quality', 'speedRate', 'volume', 'setting', 'pip', 'pageFullScreen', 'fullScreen']	['audioTrack', 'quality', 'speedRate', 'volume', 'setting', 'pip', 'pageFullScreen', 'fullScreen']
preload	預載入	string	meta/auto/none	auto

props屬性 controlBtns 按鈕說明

名稱	說明
audioTrack	音軌切換按鈕
quality	視訊質量切換按鈕
speedRate	速率切換按鈕
volume	音量
setting	設定
pip	畫中畫按鈕
pageFullScreen	網頁全屏按鈕
fullScreen	全屏按鈕

Events

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	全屏/退出全屏

Author

xdlumia

點個 start

vue3-video-play