插件github地址 vue-video-player，星星我已给上。
文档很详细，所以安装配置都非常快
第一步就是先npm安装
npm i vue3-video-play -S
第二步，引入，可以选择全局引入或者局部引入
这里就演示局部引入文章来源：https://www.toymoban.com/news/detail-605417.html
import "vue3-video-play/dist/style.css";
import vue3VideoPlay from "vue3-video-play";
import { reactive } from "vue";
完整代码示例文章来源地址https://www.toymoban.com/news/detail-605417.html
<template>
<div>
<vue3VideoPlay v-bind="options" :poster="poster />
</div>
</template>
<script>
import “vue3-video-play/dist/style.css”;
import vue3VideoPlay from “vue3-video-play”;
import { reactive, toRefs } from “vue”;
export default {
components: {
vue3VideoPlay,
},
props:[‘video_url’,‘poster’],
setup(props){
let data = reactive({
options:{
width: “800px”, //播放器高度
height: “450px”, //播放器高度
color: “#409eff”, //主题色
title: “”, //视频名称
src: props.video_url, //视频源
muted: false, //静音
webFullScreen: false,
speedRate: [“0.75”, “1.0”, “1.25”, “1.5”, “2.0”], //播放倍速
autoPlay: false, //自动播放
loop: false, //循环播放
mirror: false, //镜像画面
ligthOff: true, //关灯模式
volume: 0.3, //默认音量大小
control: true, //是否显示控制
controlBtns: [
“audioTrack”,
“quality”,
“speedRate”,
“volume”,
“setting”,
“pip”,
“pageFullScreen”,
“fullScreen”,
], //显示所有按钮,
},
poster:props.poster
});
return {
...toRefs(data)
}
}
};
</script>
这里封装成组件，只要传入视频源地址（video_url）以及视频封面（poster）就可以了，
视频测试地址 复制一个测试地址去感受下这个插件吧，功能相对来说还是很齐全的。
预览：
插件github地址 vue-video-player，星星我已给上。
文档很详细，所以安装配置都非常快
第一步就是先npm安装
npm i vue3-video-play -S
第二步，引入，可以选择全局引入或者局部引入
这里就演示局部引入
import "vue3-video-play/dist/style.css";
import vue3VideoPlay from "vue3-video-play";
import { reactive } from "vue";
完整代码示例
<template>
<div>
<vue3VideoPlay v-bind="options" :poster="poster />
</div>
</template>
到了这里，关于vue3-video-play 一个更好的适合vue3的视频插件的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
