Vue3-video-play视频播放器插件_视频播放插件

一、功能一览

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

• 支持快捷键操作
• 支持倍数播放设置
• 支持镜像画面设置
• 支持关灯模式设置
• 支持画中画模式播放
• 支持全屏/网页全屏播放
• 支持从固定时间开始播放
• 支持移动端，移动端会自动调用自带视频播放器
• 支持 hls 视频流播放，支持直播
• hls 播放支持清晰度切换

二、使用指南

安装

pnpm 安装：

pnpm i vue3-video-play --save
1

yarn 安装：

yarn add vue3-video-play --save
1

开始使用

全局使用(main.ts)：

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");
1
2
3
4
5
6
7
8
9

组件内使用：

import "vue3-video-play/dist/style.css";
import { videoPlay } from "vue3-video-play";
export default {
  components: {
    videoPlay
  }
}
1
2
3
4
5
6
7

三、基本示例

提供了丰富的配置功能

<template>
  <div class="m-8">
    <vue3VideoPlay
      v-bind="options"
      :poster="options.poster"
      @play="onPlay"
      @pause="onPause"
      @timeupdate="onTimeupdate"
      @canplay="onCanplay"
    />
  </div>
</template>

<script setup lang="ts">
import { reactive } from "vue";

const options = reactive({
  width: "800px", //播放器宽度
  height: "450px", //播放器高度
  color: "#409eff", //主题色
  title: "测试", //视频名称
  src: "https://media.w3.org/2010/05/sintel/trailer.mp4", //视频源
  poster: "https://cdn.jsdelivr.net/gh/xdlumia/files/video-play/ironMan.jpg", // 视频封面
  muted: false, //静音
  speed: 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",
  ], //显示所有按钮,
});

/**
 * 支持所有原生video事件
 */
const onPlay = (ev) => {
  console.log("播放");
};
const onPause = (ev) => {
  console.log(ev, "暂停");
};
const onTimeupdate = (ev) => {
  console.log(ev, "时间更新");
};
const onCanplay = (ev) => {
  console.log(ev, "可以播放");
};
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61

四、Hls m3u8 视频/直播

支持 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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

五、Props

vue3-video-play 支持 video 原生所有 Attributes video 原生属性 使用方式和 props 属性使用一致

props属性 controlBtns 按钮说明

六、Events

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

七、快捷键说明

支持快捷键操作