Question

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

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

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

Answer 1

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

Answer 2

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

Answer 3

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

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

全屏删除html5视频播放器的进度条

3 个答案: