vue3 使用 vue3-video-play实现在线视频播放
作者：逆风优雅
这篇文章主要介绍了vue3 使用 vue3-video-play 进行在线视频播放,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
首先：下载依赖
npm i vue3-video-play --save 或 yarn add vue3-video-play
其次：在项目的组件中使用
<script lang="ts">
import { videoPlay } from 'vue3-video-play' // 引入视频播放的组件
import 'vue3-video-play/dist/style.css' // 引入相关的css
export default defineComponent({
name: "TypicalExampleIndex",
components: { // 注册成为子组件
videoPlay
},
setup(){}
})
</script>使用：
<div class="map-content">
<videoPlay class="my-video" ref="videoPlayer" v-bind="playerOptions" :playsinline="true">
</videoPlay>
</div>
其中v-bind 后面的playerOptions为视频播放的相关配置信息
playerOptions: {
width: "852px", //播放器高度
height: "588px", //播放器高度
color: "#0e5f6d", //主题色
title: "", //视频名称
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.5, //默认音量大小
control: true, //是否显示控制
poster: '',
controlBtns: [
"audioTrack",
"quality",
"speedRate",
"volume",
"pip",
"fullScreen",
], //显示所有按钮,
src: "http://www.baidu.mp4", // 视频在线地址
}最终的视频播放页面效果图
到此这篇关于vue3 使用 vue3-video-play 进行在线视频播放的文章就介绍到这了,更多相关vue3-video-play在线视频播放内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！