H5-video视频播放标签-隐藏部分controls

最近开发项目遇到，需求文档中需要将视频标签下的部分功能隐藏

1.可以使用controlslist来限制展示内容

  <video class="md:w-full md:h-video md:mt-4" id="video" ref="videos" controls
         controlslist="nodownload noremoteplayback noplaybackrate"
         disablePictureInPicture>
    <source :src="video_url" type="video/mp4">
    <source :src="video_url" type="video/ogg">
</video>
<!-- 1、nodownload: 不要下载按钮-->
<!-- 2、nofullscreen: 不要全屏按钮-->
<!-- 3、noremoteplayback: 不要远程回放-->
<!-- 4、disablePictureInPicture 不要画中画 按钮-->
<!-- 5、noplaybackrate 不要播放速度按钮-->

2.还可以通过样式来隐藏别的功能

   // 隐藏video 音量按钮
    video::-webkit-media-controls-mute-button {
        display: none !important;
    }

    // 隐藏video 当前按钮
    video::-webkit-media-controls-current-time-display {
        display: none !important;
    }

    // 隐藏video 总时间
    video::-webkit-media-controls-time-remaining-display {
        display: none !important;
    }

    // 隐藏video 全屏按钮
    video::-webkit-media-controls-fullscreen-button {
        display: none !important;
    }