必須使用 [email protected]及以上版本

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