首先:下载依赖
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", // 视频在线地址
}
最终的视频播放页面效果图