全屏从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>

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

以前的方法仅适用于某些浏览器，例如 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>

js

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

（仅包含导航标签和 css 以添加一些样式）

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