xdlumia/vue3-video-play

适用于 Vue3 的 hls.js 播放器组件，配置丰富，界面还算好看

必须使用 [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.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");

组件内使用

// 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

vue3-video-play's Issues

怎么切换视频

vue-video-player 可以用this.$refs.videoPlayer.player.src('newUrl')
这个直接改options.src=newUrl 没有作用

vue3+elementplus中出现滚动条,使用插件导致滚动条位置出现问题

业务场景,聊天数据上拉加载更多数据
如果数据中存在视频,滚动条位置会直接定在视频上,导致展示出现问题

使用报错

按照demo写的，报错信息如下：

Does it support with SSR ?

Hi! I got an error when implement with Nuxt 3 SSR.

pc浏览器可以正常播放，但无法在移动设备上播放

移动端就一直在转圈圈，视频播放不出来，https://codelife.cc/vue3-video-play/这里的视频在移动端也播放不了

为什么一直报请求错误呢

<script lang="ts"> import { defineComponent, reactive } from 'vue' import 'vue3-video-play/dist/style.css' import { videoPlay } from 'vue3-video-play' export default defineComponent({ name: 'home', components: { videoPlay, }, setup() { const options = reactive({ width: '100%', // 播放器高度 height: '450px', // 播放器高度 color: '#409eff', // 主题色 muted: false, // 静音 webFullScreen: false, autoPlay: false, // 自动播放 loop: false, // 循环播放 mirror: false, // 镜像画面 ligthOff: false, // 关灯模式 volume: 0.3, // 默认音量大小 control: true, // 是否显示控制器 title: '', // 视频名称 src: './img/wendice.mp4', // 视频源 poster: '', // 封面 }) return { options, } }, })

清晰度的设置没有

如题

关于一些优化建议

链接失效或者出错时可否添加文字提示比如：‘视频跑路了’，‘链接失效等’，目前是loading转圈，不知道是何错误。

1.3.1-beta6播放HLS unmount时未销毁组件

切换页面视频流还在继续缓冲

直播时，进度条是否应该禁止推动呢

直播时，进度条是否应该禁止推动呢和只展示当前一个播放时间呢？

怎么销毁组件或者中断请求流的方法，类似于dispose()

这个问题的优先级应该是高于其他的

在 video 里有一个 dispose() 方法可以销毁请求流

作者的组件里没有这个方法，导致了，切换路由时，请求流不会中断，即便把数据对象清空，依旧在一直发送请求

再次进入组件后，会进行累加前一次的请求流，进行多次重复的请求

请问视频支持哪些格式？

up主，我现在测试的视频格式只能是：mp4格式，请问现在支持多少格式？能否出一个列表：如

• MP4
• AVI
• AV4
• 等等

ios safari兼容性不好

ios safari兼容性不好

hls m3u8 链接并不能播放 虽然一直在获取视频流，但播放器停留在loading

格式支持问题

测试后发现avi格式支持不了，是真的吗

想请教一下切换清晰度时报错？ Hls is not defined

切换清晰度时报错？runtime-core.esm-bundler.js?5c40:6769 Uncaught ReferenceError: Hls is not defined

请问是否支持 RTMP 直播

如果支持的话
type 是否需要做修改

currenttime属性控制无效

从图片中可以看到 props里面currentTime:109 已经设置了 但是视频的播放位置不变。

poster 设置不生效

动态传的poster没生效，一直都默认的那个。。。求解

how can i use source with blob?

组件使用报错

浏览器报自动播放的相关错误

错误：Uncaught (in promise) DOMException: play() failed because the user didn't interact with the document first. https://goo.gl/xX8pDD
autoPlay设置为false的时候会出现这个报错，设置为true的时候就不会出现这个报错

vue3.0 + vite使用打包报错了，请问有什么办法解决嘛

warning package.json: No license field
$ vue-tsc --noEmit && vite build
src/views/watch/index.vue(154,27): error TS7016: Could not find a declaration file for module 'vue3-video-play'. 'd:/Project/git/help-center-dlz/node_modules/vue3-video-play/dist/index.umd.js' implicitly has an 'any' type.
Try npm i --save-dev @types/vue3-video-play if it exists or add a new declaration (.d.ts) file containing declare module 'vue3-video-play';
error Command failed with exit code 2.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

试用vue2吗

滴滴滴

最新的beta.6版本，无法在手机的Safari的浏览器上播放

一直在转圈

请问怎么可以获取播放呢？进度事件

播放M3u8格式文件的时候，loading状态一直没变

播放M3u8格式文件的时候，loading状态一直没变，在DOM里吧loading删除视频已经加载出来了，不知道是不是视频过大导致，本视频 有 一小时四十四分钟 ，其他一小时的同格式视频可以正常播放，麻烦看一下呢，谢谢

not language setting

not language setting

移动端Chrome浏览器无法播放

移动端（我用的IPAD）Chrome浏览器无法播放，但是PC上的Chrome浏览器（win10 & ubuntu 20）可以播放。

甚至IPAD的Chrome无法播放 demo 中的影片 https://codelife.cc/vue3-video-play/

IPAD的Chrome Version: 95.0.4638.50

谢谢

ios浏览器无法播放

不管官网的演示视频还是我自己demo都无法在ios浏览器上播放

good job

you are a great developer.

获取播放进度和监听事件

请问如何获取播放进度呢？如何监听事件呢？

使用报错----版本问题？

vue 版本 和插件版本有限制吗？

m3u8格式文件一直loading

没走 LEVEL_SWITCHING的都播不出来。为什么会hlsLevelSwitched事件监听不到呢？

单页面上渲染多个video的时候外部dom元素的ID值均为refPlayerWrap

这样会带来很多操作dom元素的问题，比如右键一个视频，所有视频均弹出右键菜单。

使用报错 ncaught (in promise) TypeError: Cannot read properties of null (reading 'setupContext')

vite

vue3引入报错不能使用

使用默认引入后，使用后出现错误Uncaught (in promise) TypeError: Cannot read properties of null (reading 'setupContext')

请问是否可以支持flv？

是否可以控制能否拖动进度条

有一个培训需求，需要对课程视频不能拖动进度

m3u8有加密方案么？

vue3
Spring Boot

有官方加密方案么?

请问可以关闭右击菜单,关闭点击视频播放暂停,关闭键盘控制吗

请问可以关闭右击菜单,关闭点击视频播放暂停,关闭键盘控制吗

vue3+TS 引入报错 隐式拥有 "any" 类型

按提供的 demo 引入，直接报错，"vue3-video-play": "^1.3.1-beta.6"
是我写得不对？希望能告知原因

请问，是否支持h265格式

您好，请问能支持h265格式吗，我们这边是专用于华为视频这块，有部分视频为h265格式

没有类型文件

能否在ts中使用支持类型文件

视频编码格式支持

仅支持视频h264编码格式的视频吗

自动播放没有声音

自动播放没有声音，需求需要自动播放可以控制播放声音，可以实现吗

对其中一个实例右键后，每一个实例都会打开右键菜单

一个页面有多个实例时就会出现此bug

扎心了，没法代码控制播放

取消

control button text are coming in chinese

Hi @xdlumia , how can we change the control buttons text.
By default some of the buttons text are coming in chinese
Thanks!

是否支持h5

是否支持h5