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

Vue3-video-play

适用于 Vue3 的 hls.js 播放器组件 | 同时支持 MP4/WebM/Ogg 格式 配置强大，界面美观

功能概览

1. 支持快捷键操作
2. 支持倍速播放设置
3. 支持镜像画面设置
4. 支持关灯模式设置
5. 支持画中画模式播放
6. 支持全屏/网页全屏播放
7. 支持从指定时间开始播放
8. 支持移动端，自动调用原生视频播放器
9. 支持 hls 视频流播放，支持直播
10. hls 播放支持清晰度切换

演示主页

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

最新更新 v1.3.3 🎉

• 修复: 右键事件错误

使用指南

安装

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");

组件内使用

// 引入样式
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秒开始播放

通过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属性来控制是否显示控制器

通过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>

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>

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 标签属性 video 原生属性，使用方式与 props 属性相同

props属性 controlBtns 按钮说明

事件

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

快捷键说明

支持快捷键操作

作者

xdlumia

点个星标

vue3-video-play