1.下载依赖 我的vue3-video-play版本是1.3.1-beta.6
npm install vue3-video-play@1.3.1-beta.6
2.使用html
<videoPlay ref="aplayVideo" v-bind="options" @play="onPlay"/>
3.在需要的页面引入。文章来源：https://www.toymoban.com/news/detail-504071.html
<script lang="ts" setup>
import {ref,reactive} from "vue";
//事件示例
const onPlay = (ev) => {
console.log("播放");
};
// 视频播放组件
import "vue3-video-play/dist/style.css";
import {videoPlay} from "vue3-video-play";
//播放器
const options = reactive({
width: '100%', //播放器高度
height: '100%', //播放器高度
color: "#409eff", //主题色
title: "", //视频名称
webFullScreen:false,//网页全屏
speed:true,//是否支持快进快退
currentTime:0,//跳转到固定播放时间(s)
muted:false,//静音
autoPlay: true, //自动播放
loop:false,//循环播放
mirror:false,//镜像画面
control: true, //是否显示控制器
ligthOff:false,//关灯模式
volume:0.3,//默认音量0-1
src: '', //视频源
poster: '', //封面
speedRate: [1.0,1.25,1.5,2.0], // 可选的播放速度
controlBtns: [
"audioTrack",//音轨切换按钮
"quality",//视频质量切换按钮
"speedRate",//速率切换按钮
"volume",//音量
"setting"//设置
"pip",//画中画按钮
"pageFullScreen",//网页全屏按钮
"fullScreen",//全屏按钮
], //显示所有按钮,
})
</script>
4.附上事件列表
更详细请查看：链接: https://github.com/xdlumia/vue3-video-play/文章来源地址https://www.toymoban.com/news/detail-504071.html
到了这里，关于vue3-video-play 实现视频播放的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
