video标签的属性、播放按钮+右侧三个点儿等播放控件样式的隐藏、禁止点击右键行为

王富婆

已于 2024-10-14 15:32:01 修改

阅读量2.5k

点赞数 30

文章标签： javascript 开发语言 ecmascript

于 2024-10-14 14:05:20 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_69924839/article/details/142914768

版权

一.video标签属性

src ：视频路径
autoplay：自动播放
muted：视频静音播放，（与autoplay属性结合使用时，可以在不触发浏览器自动播放限制的情况下实现静音自动播放）
loop：循环播放
poster：视频封面（没播放时显示的图片）
preload：预加载（有助于优化媒体内容的加载和播放体验，特别是在网络条件不稳定或内容较大时）。属性值：auto（根据浏览器决定预加载多少，通常是尽可能多的内容）；metadata（只加载元数据，如视频长度和轨道信息）；none（不预先加载任何视频数据）；
controls：启用浏览器默认控件（如播放/暂停按钮、进度条、音量控制等）
width：视频宽度（也可自己添加class设置）
height：视频高度（也可自己添加class设置）
crossorigin：指定视频以cors（跨域资源共享）方式加载。属性值：anonymous（请求不包含凭据； use-credentials（请求包含凭据，如cookie、HTTP认证等）
controlslist：指定一组特定的控件功能是否应该被显示或启用。controlslist属性值可以是一个或多个以下选项，以空格分隔：

nodownload：隐藏下载按钮（如果浏览器提供了下载功能）。
nofullscreen：禁用全屏按钮。
noremoteplayback：禁用远程播放按钮（例如，通过电视或蓝牙音箱播放）。
hidden-captions-menu：隐藏字幕菜单。

二.示例

示例6：preload属性使用（实现浏览器只会预加载视频的元数据，而不会加载实际的视频内容）

<video controls preload="metadata" src="example.mp4"> </video>

说明：

元数据通常包括：

视频的时长
视频的宽度和高度
视频的轨道信息（如音频轨道、字幕轨道等）
视频的编码格式

不会加载实际的视频内容意味着：

浏览器不会下载视频文件的视频帧数据
视频不会在用户未明确播放之前开始缓冲视频内容

目的：

减少页面加载时的数据使用量，特别是在网络条件不佳或用户可能不会观看所有视频内容的情况下。通过只加载元数据，页面可以更快地加载完成，并且用户可以在不消耗大量带宽的情况下浏览页面上的其他内容

示例11：controlslist属性的使用（实现下载按钮和全屏按钮被禁用）：

<video width="640" height="360" controls controlslist="nodownload nofullscreen" src="example.mp4">  
</video>

三.CSS 隐藏控制栏中“播放”、“进度条”、“三个点”等

下面的图片是所有控件：

通过css设置隐藏所有控件或者分别隐藏单个控件：

/*所有控件*/
video::-webkit-media-controls-enclosure {
    display: none;
}
/*播放按钮*/
video::-webkit-media-controls-play-button {
    display: none;
}
/*进度条*/
video::-webkit-media-controls-timeline {
    display: none;
}
/*全屏按钮*/
video::-webkit-media-controls-fullscreen-button {
    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;
}

四、禁止右键出现画中画、显示控件的行为

说明：

当设置不显示所有控件时，在pc端点击右键，会出现绿框里的选项，会导致控件重新显示。

所以需要对右键行为进行限制，当点击右键时不显示绿框所有内容。

<template>
  <div>
    <video autoplay muted  class="video" @contextmenu="contextmenu" src="test.mp4"></video>
  </div>
</template>
<script setup>
//禁止右键行为
const contextmenu = (e) => {
  e.returnValue = false
}
</script>