video播放mp4

最新推荐文章于 2024-06-26 00:14:15 发布

我家二爷

最新推荐文章于 2024-06-26 00:14:15 发布

阅读量152

点赞数 1

文章标签： java 前端 html

本文链接：https://blog.csdn.net/Guanerye0314/article/details/130622104

版权

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8" />

<meta http-equiv="X-UA-Compatible" content="IE=edge" />

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

<title>Document</title>

<style>

/* 进度条 */

video::-webkit-media-controls-timeline {

display: none;

}

video::-webkit-media-controls-toggle-closed-captions-button {

display: none;

}

</style>

</head>

<body>



<div style="width: 600px; height: 400px; margin: 30px">

<video

controls

src="./demo.mp4"

controlslist="nodownload noremoteplayback noplaybackrate "

disablepictureinpicture

style="width: 100%; height: 100%"

></video>

</div>

</body>

</html>

css

//全屏按钮

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;

}

如何去掉右下角的三个点点

当一个video标签需要使用controls时候可以对其属性进行设置

利用controlslist属性可以设置其

<video

:src="item.videoAdd"

ref="video"

controls="controls"

controlslist="nodownload nofullscreen noremoteplayback"

:disablePictureInPicture="true"

:poster="item.videoCover"></video>

nodownload: 不要下载

nofullscreen: 不要全屏

noremoteplayback: 不要远程回放

disablePictureInPicture 不要画中画

只要把上面的都处理下就不会显示右侧的三个点了