Vue 隐藏 video 元素 控制栏 全屏，下载 等按钮

<template>
    <!-- 隐藏 画中画,远程播放,全屏,播放速度,下载 -->
    <video id="video" src="http://xxx.mp4" ref="video" controls disablePictureInPicture controlslist="nodownload nofullscreen noplaybackrate noremoteplayback" muted @play="handlePlay" @pause="handlePause" @contextmenu="contextmenu" @timeupdate="handleTimeChange"></video>
</template>
<script setup lang="ts">
import { ref, onMounted, nextTick } from 'vue';

const video = ref();
const videomax = ref(0);
const values = ref([0, 0]);

const handlePlay = () => { values.value = [video.value.currentTime, values.value[1]] }
const handlePause = () => { values.value = [values.value[0], video.value.currentTime] }
const contextmenu = (e: MouseEvent) => { e.preventDefault() };
const handleTimeChange = () => { values.value = [video.value.currentTime, values.value[1]] };
</script>
<style scoped lang="less">
video {
        width: 100%;
        height: 100%;
}

//全屏按钮
video::-webkit-media-controls-fullscreen-button {
        display: none;
}
//播放按钮
video::-webkit-media-controls-play-button {
        display: none;
}
//进度条
video::-webkit-media-controls-timeline {
        display: none;
}
//观看的当前时间
video::-webkit-media-controls-current-time-display{
        display: none;            
}
//剩余时间
video::-webkit-media-controls-time-remaining-display {
        display: none;            
}
//音量按钮
video::-webkit-media-controls-mute-button {
        display: none;
}
video::-webkit-media-controls-toggle-closed-captions-button {
        display: none;
}
//音量的控制条
video::-webkit-media-controls-volume-slider {
        display: none;
}
//所有控件
video::-webkit-media-controls-enclosure{ 
        display: none;
}
</style>