我想隐藏视频播放器的所有控件,在 Windows 和 Android 中它们是隐藏的,但在 iOS 中它们是显示的,我不知道如何隐藏它们
这就是 iOS 上的样子:
你是我的:
<video
autoplay
preload muted
style="max-width: 100% !important; height: auto; box-shadow: none !important; "
controls="false"
disablepictureinpicture
controlsList="nofullscreen nodownload noremoteplayback noplaybackrate"
class="fit-picture custom-video-player "
playsInline
transition="scale-transition" @ended="onPlayerEnded($event)"
>
<source :src="`${videoUrl}`" type="video/mp4">
</video>
video::-webkit-media-controls-panel {
// Your styling here
background-image: linear-gradient(transparent, transparent) !important; //Transparent for your case
}
video::-webkit-media-controls-overlay-play-button {
display: none !important;
}
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-toggle-closed-captions-button {
display: none;
}
video::-webkit-media-controls-fullscreen-button {
display: none;
}
video::-webkit-media-controls-mute-button {
display: none;
}
video::-webkit-media-controls-fullscreen-volume-slider {
display: none;
}
video::-webkit-media-controls-volume-slider {
display: none;
}
video::-webkit-media-controls-seek-forward-button {
display: none;
}
video::-webkit-media-controls-volume-slider-mute-button{
display: none;
}
video::-webkit-media-controls-fullscreen-volume-min-button {
display: none;
}
video::-webkit-media-controls-fullscreen-volume-max-button {
display: none;
}
video::-webkit-media-text-track-container {
display: none;
}
video::-webkit-media-controls-play-button{
display: none;
}
::-webkit-media-controls {
display: none !important;
}
我已经尝试过
controls="false"
还是不行
任何可以解决的建议,就像我用 video.js 库尝试它一样,它具有隐藏控件的属性,但它仍然显示它们
也许您可以使用
opacity: 0
进行覆盖,这将阻止视频在移动设备上可点击或可触摸。这是代码:
<section class="video-container">
<video></video>
</section>
CSS代码
.video-container {
position: relative;
}
.video-container:before {
content: "";
position: absolute;
width: 100%;
height: 100%
top: 0;
left:0;
background: #000;
opacity: 0;
}
另外,你可以看看这里: 如何在 iOS 12 上隐藏 html5 视频控件