Javascript 从html5视频播放器全屏移除进度条

我的页面上有一个视频元素，代码如下

<video autoplay="" audiovolume="100" src="blob:https%3A//cccxxx.com/ccde5479" class="OT_video-element" style="transform: rotate(0deg); top: -74.4193878173828px; width: 770.440307617188px; height: 577.830230712891px;">Sorry, Web RTC is not available in your browser</video>

抱歉，您的浏览器中没有Web RTC

---

我想删除此视频元素的进度条，我该怎么做？

以前的方法仅适用于某些浏览器，如chrome或safari，但不适用于firefox或internet explorer

audio::-webkit-media-controls-timeline,
video::-webkit-media-controls-timeline {
    display: none;
}
audio::-webkit-media-controls,
video::-webkit-media-controls {
    display: none;
}

我建议你建立自己的视频播放器，这样你就可以控制控制元素了

在这种情况下，我只需要播放/暂停按钮，因此用户无法快进视频

HTML

<section class="skin">
    <video id="myMovie">
        <source src="video_url"/>
    </video>
    <nav>
        <button id="playButton">Play</button>
    </nav>
</section>

CSS

.skin {
    width:640px;
    margin:10px auto;
    padding:5px;
}
nav {
    width:70px;
    height:22px;
    padding: 5px 0px;
    margin: 0 auto;
}

---

（导航标签和css仅用于添加一些样式）

我已经使用css修复了它，请告诉我他们是否有更好的选择您也可以使用

：fullscreen{style properties}

仅在fullscreen模式下应用您的样式，而此代码可以解决OP的问题，最好包括关于代码如何解决OP问题的解释。通过这种方式，未来的访问者可以从您的帖子中学习，并将其应用到自己的代码中。因此，它不是一种编码服务，而是一种知识资源。此外，高质量、完整的答案更有可能被提升。这些特性，以及所有帖子都是独立的要求，是SO作为一个平台的一些优势，使其区别于论坛。您可以进行编辑以添加其他信息和/或使用源文档补充说明。我在HTML部分的视频标记中添加了nocontrols，删除了视频上的所有控件，并使用此处的播放按钮播放和暂停。这对我有效，希望解决方案对其他人也有效。

.skin {
    width:640px;
    margin:10px auto;
    padding:5px;
}
nav {
    width:70px;
    height:22px;
    padding: 5px 0px;
    margin: 0 auto;
}

video::-webkit-media-controls-timeline {
    display: none;
}