从全屏html5视频播放器中删除进度条答案

【问题标题】：Remove progress bar from html5 video player in full screen从全屏html5视频播放器中删除进度条
【发布时间】：2015-07-31 09:34:39
【问题描述】：

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

<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>

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

【问题讨论】：

我已经使用 css 修复了它，让我知道他们是否有更好的选择

标签： javascript html video

【解决方案1】：

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

【讨论】：

您也可以使用:fullscreen { style properties } 仅在全屏模式下应用您的样式
这不是解决方案，这只适用于 Chrome 和 Firefox

【解决方案2】：

以前的方法仅适用于某些浏览器，如 chrome 或 safari，但不适用于 Firefox 或 Internet Explorer 我建议您构建自己的视频播放器，这样您就可以控制控制元素

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

HTML

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

function loadVideo(){
    myMovie=document.getElementById('myMovie');
    playButton=document.getElementById('playButton');
    playButton.addEventListener('click', playOrPause, false);
}

function playOrPause() {
    if (!myMovie.paused && !myMovie.ended){
        myMovie.pause();
        playButton.innerHTML='Play';
    } else {
        myMovie.play();
        playButton.innerHTML='Pause';
    }
}

window.addEventListener('load',loadVideo,false);

CSS

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

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

【讨论】：

我在 HTML 部分的视频标签中添加了 nocontrols，这删除了视频上的所有控件，我在这里使用了您的播放按钮来播放和暂停。这对我有用，希望解决方案也适用于其他人。

【解决方案3】：

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

【讨论】：

虽然此代码可以解决 OP 的问题，但最好包含关于您的代码如何解决 OP 问题的说明。通过这种方式，未来的访问者可以从您的帖子中学习，并将其应用到他们自己的代码中。 SO 不是编码服务，而是知识资源。此外，高质量、完整的答案更有可能得到支持。这些功能，以及所有帖子都是独立的要求，是 SO 作为一个平台的一些优势，使其与论坛区分开来。您可以编辑以添加其他信息和/或使用源文档补充您的解释。