<video>标签如何禁用播放速度

查询MDN文档发现并没有描述有这么一个属性可以禁用播放速度

• controls

• 如果存在该属性，浏览器会在视频底部提供一个控制面板，允许用户控制视频的播放，包括音量、拖动进度、暂停或恢复播放。

• controlslist

• 当浏览器显示视频底部的播放控制面板（例如，指定了 controls 属性）时，controlslist 属性会帮助浏览器选择在控制面板上显示哪些 video 元素控件。

  允许的值有 nodownload、nofullscreen 和 noremoteplayback。

  如果要禁用画中画模式（和控件），请使用 disablepictureinpicture 属性。

• disablepictureinpicture

• 防止浏览器显示画中画上下文菜单或在某些情况下自动请求画中画模式。

通过翻阅源码找到了这么一个属性controlslist="noplaybackrate"

    <video
        src="@/assets/video/training.mp4"
        controls
        controlslist="nodownload noremoteplayback nofullscreen noplaybackrate"
        disablepictureinpicture
        @contextmenu="contextmenu"
    ></video>

nodownload：禁止下载

noremoteplayback：禁止远程播放

nofullscreen：禁止全屏

noplaybackrate：禁用播放速度

disablepictureinpicture：禁用画中画

@contextmenu="contextmenu"可以防止用户右键进行操作

const contextmenu = (e) => {
  e.returnValue = false; //禁用右键
};

伪元素为::-webkit-media-controls 通过设置display:none !important样式隐藏

// 播放按钮 
video::-webkit-media-controls-play-button {display: none !important; } 
// 当前播放时间 
video::-webkit-media-controls-current-time-display { display: none !important; } 
// 剩余时间 
video::-webkit-media-controls-time-remaining-display { display: none !important; }
// 音量按钮 
video::-webkit-media-controls-volume-control-container { display: none !important; } 
// 全屏 
video::-webkit-media-controls-fullscreen-button { display: none !important; } 
// 时间轴 
video::-webkit-media-controls-timeline { display: none !important; }