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: "100vw",  //播放器宽度
    //height: "92.6vh",  //播放器高度
    //color: "#000000",  //主题色
    title: "首页",  //视频名称
    type: "video/mp4",

    poster: require('封面地址'),  //因为是本地图片，前面加require
    src: require('视频地址'),  //因为是本地视频，前面加require

    speedRate: ["2.0", "1.0", "1.5", "1.25", "0.75", "0.5"],  //视频倍速
    autoplay: true,  //浏览器准备好时自动开始回放。
    muted: false,  // 默认情况下将会消除任何音频。
    webFullScreen: false,  //全屏
    loop: true,  //循环播放
    mirror: false,  //镜像画面
    ligthOff: false,  //关灯模式
    volume: 0.3,  //默认音量大小
    preload: 'auto',  //预加载
    //speed: false,  // 关闭进度条拖动
    language: 'zh-CN',
    aspectRatio:'16:9',// 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值（值应该代表一个比例）。
    fluid: true, // 当true时，Video.js player将按比例缩放以适应其容器。

    //notSupportedMessage: '此视频暂无法播放，请稍后再试',
    //timeDivider: false,   //当前时间和持续时间的分隔符
    //durationDisplay: false,   //显示持续时间
    //remainingTimeDisplay: false,  //是否显示剩余时间功能
    //fullscreenToggle: false,  //全屏按钮
    //showPlayButton: false,   //播放按钮
    control: false,  //隐藏控制条
});


// const onPlay = (ev) => {
//   console.log("播放");
// };
// const onPause = (ev) => {
//   console.log(ev, "暂停");
// };
// const onTimeupdate = (ev) => {
//   console.log(ev, "时间更新");
// };
// const onCanplay = (ev) => {
//   console.log(ev, "可以播放");
// };

</script>

遇到问题：

1、引入本地文件时，地址（src）要在前面加require；

poster: require('封面地址'),  
src: require('视频地址'),  

2、隐藏视频下方控制条   ：

control: false

3、如何禁用鼠标点击事件：(待更新）

搜到方法没生效：

.vjs-custom-skin :deep(.video-js) {

  pointer-events: none

}

.vjs-tech {

  pointer-events: none;

}

 直接用了最笨的办法：在视频上方覆盖了一个盒子

 <div style="position: absolute;width: 100vw;height: 100vh;z-index: 999;"></div>

4、在视频上实现点击跳转：

div绝对定位：position

5、报错：play() failed because the user didn't interact with the document first. https://goo.gl/xX8pDD

自动播放可能会干扰用户，把静音打开：

autoplay: true,    //浏览器准备好时自动开始回放。
muted: true,    //静音

 

Video原生属性：

名称	说明	类型	可选值	默认值
width	播放器宽度	string
height	播放器高度	string
color	播放器主色调	string
title	视频名称	string
type	视频类型	string		video/mp4
poster	视频封面	string		视频第一帧
src	视频资源	string
speedRate	倍速配置	array		[“2.0”, “1.0”, “1.5”, “1.25”, “0.75”, “0.5”]
autoPlay	自动播放	boolean	true/false	false,为 true 时会自动静音
muted	静音	boolean	true/false	false
webFullScreen	网页全屏	boolean	true/false	false
loop	循环播放	boolean	true/false	false
mirror	镜像画面	boolean	true/false	false
ligthOff	关灯模式	boolean	true/false	false
volume	默认音量	number	0-1	0.3
preload	预加载	string	meta/auto/none	auto
speed	进度条拖动	boolean	true/false	true
aspectRatio	纵横比	比值	'16:9'/'4:3'
notSupportedMessage	无法播放媒体源时 显示的默认消息	string
control	显示控制条	boolean	true/false	true
fluid	跟随外层容器 变化大小（宽度）	boolean	true/false	true
currentTime	跳转到播放时间	number		0
playsinline	在Web页面中播放 （不全屏播放）	boolean	true/false	false

！！用<video></video>超级简单就能实现： 

<video class="videoStyle" id="Id" playsinline="true" autoplay="true" muted="false" loop="true">
    <source src="视频地址" type="video/mp4">
</video>

原来根本不需要用插件啊啊啊！！！！