❤
npm
Sign UpSign In

vue3-eggplant

1.1.3 • Public • Published

Version Downloads GitHub stars GitHub issues GitHub forks GitHub last commit license

NPM

必須使用 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

Readme

Keywords

Package Sidebar

Install

npm i vue3-eggplant

Repository

cloudraise.com

Homepage

cloudraise.com/

Weekly Downloads

3

Version

1.1.3

License

ISC

Unpacked Size

1.45 MB

Total Files

25

Last publish

Collaborators

  • evalhero
Try on RunKit
Report malware