vue好看的视频插件（vue3）

今天给大家分享一款不错的 vue3.js 开发的支持多种格式的播放器Vue3VideoPlay。

vue3-video-play 适用于 Vue3 的 hls.js 播放器组件 | 并且支持 MP4/WebM/Ogg 格式，配置强大。

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

<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>功能特性

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

vue3-video-play 提供了非常丰富的配置参数。支持原生video所有事件。

如果对vue3播放器感兴趣的可以去看下。

# 文档地址 https://codelife.cc/vue3-video-play/ # 仓库地址 https://github.com/xdlumia/vue3-video-play

Oka，今天的分享就到这里了。