Vue3 使用Vue3-video-play视频播放 - 附完整示例

适用于 Vue3 的 hls.js 播放器组件 | 并且支持 MP4/WebM/Ogg 格式 配置强大，UI 还算好看

目录

一、官网

二、功能一览

三、使用指南

1、安装

1）npm安装

2）yarn安装

2、开始使用

1）全局使用

2）组件内使用

3、基本示例

四、完整示例

五、Props、Events和快捷键说明

1、Props

props属性 controlBtns 按钮说明

2、Events

3、快捷键说明

一、官网

https://xdlumia.github.io/

二、功能一览

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

三、使用指南

1、安装

1）npm安装

npm i vue3-video-play --save

2）yarn安装

yarn add vue3-video-play --save

2、开始使用

1）全局使用

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')

2）组件内使用

import 'vue3-video-play/dist/style.css' import { videoPlay } from 'vue-video-play'

3、基本示例

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

四、完整示例

<template> <div style="width: 800px; height: 500px;"> <vue3VideoPlay ref="videoRef" width="800" height="500" :src="options.src" :poster="options.poster" @play="onPlay" @pause="onPause" @timeupdate="onTimeupdate" @canplay="onCanplay" /> </div> </template> <script setup lang="ts"> import { reactive, ref, onMounted } from 'vue'; import vue3VideoPlay from 'vue3-video-play'; import 'vue3-video-play/dist/style.css'; // 创建视频DOM引用 const videoRef = ref(null); const options = reactive({ src: "https://www.w3school.com.cn/i/movie.mp4", // 视频源 poster: "", // 封面 }); // 事件监听 const onPlay = (ev) => { console.log("播放"); }; const onPause = (ev) => { console.log("暂停"); }; const onTimeupdate = (ev) => { console.log("时间更新"); }; const onCanplay = (ev) => { console.log("可以播放"); };

五、Props、Events和快捷键说明

1、Props

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

props属性controlBtns按钮说明

2、Events

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

3、快捷键说明