vue3实现首页背景插入视频（vue3-video-Play）：禁用视频点击事件；！！用自带的＜video＞实现视频做背景超简单

要求：首页背景是一个循环播放的视频，上层添加跳转按钮。

步骤：

1、安装vue3-video-Play

npm install vue3-video-play -S

2、main.js全局引入

import vue3videoPlay from "vue3-video-play"; // 引入组件
import "vue3-video-play/dist/style.css"; // 引入css


const app = createApp(App);
app.use(vue3videoPlay)

3、页面配置:

<template>
<div>
    <div style="position: absolute;left: 20.31vw;top: 77.78vh;">按钮</div>

    <!-- 视频播放器 -->
    <vue3VideoPlay
        width="100vw"
        height="92.6vh"
        ref="videoPlayer"
        class="video-player"
        :playsinline="true" //属性的值为true时，代表着视频将在Web页面中播放，而不是全屏播放
        v-bind="playerOptions"
        @play="onPlay"
        @pause="onPause" 
        @timeupdate="onTimeupdate" 
        @canplay="onCanplay">
    </vue3VideoPlay>
</div>
</template>

4、视频其他参数配置：

<script setup>
import { ref,reactive } from 'vue';

const videoPlayer=ref()
const playerOptions = reactive({
    //width