HTML5视频隐藏进度条 - CSS

HTML5的提出引领了web视频的普及，使得在网页里嵌入视频变得更加简单。在使用HTML5 video标签嵌入视频的时候，播放器的外观往往不能满足我们的需求。本文将介绍如何使用CSS隐藏HTML5视频的进度条。

隐藏HTML5视频进度条的方法

HTML5 video标签的默认控制条是可以自动播放、暂停、快进、重放、进度条等功能，而进度条是我们常用的一个功能。但有时我们并不需要这个功能，或者需要自定义进度条，那么这时候，我们可以使用CSS来隐藏它。

隐藏电脑端HTML5视频进度条

隐藏电脑端HTML5视频的进度条，我们可以通过以下CSS代码实现：

/*第一步：隐藏默认控制条*/
video::-webkit-media-controls{
    display:none !important;
}
video::-webkit-media-controls-enclosure{
    display:none !important;
}
video::-webkit-media-controls-play-button{
    display:none !important;
}
video::-webkit-media-controls-timeline{
    display:none !important;
}
video::-webkit-media-controls-volume-slider{
    display:none !important;
}

以上代码可以隐藏电脑端HTML5视频播放器的默认控制条。

隐藏移动端HTML5视频进度条

移动端的HTML5视频进度条隐藏起来稍微有点麻烦，我们需要注意以下几点：

• 移动端的视频播放器样式各不相同，需要分别针对不同的手机平台进行CSS样式调整，例如iOS、Android等。

• 移动端HTML5视频的进度条在很多时候并不是直接显示在video标签上，而是通过伪元素的方式实现。

• 在移动端的样式调整中需要使用媒体查询，根据不同屏幕大小设置不同的样式。

/*第一步：隐藏默认控制条*/
video::-webkit-media-controls{
    display:none !important;
}
video::-webkit-media-controls-enclosure{
    display:none !important;
}
video::-webkit-media-controls-play-button{
    display:none !important;
}
video::-webkit-media-controls-timeline{
    display:none !important;
}
video::-webkit-media-controls-volume-slider{
    display:none !important;
}

/*第二步：调整伪元素样式*/
@media screen and (max-device-width:480px){
    /*iPhoneCSS*/
    video:before{
        content:"";
        display:block;
        width:100%;
        height:3px;
        position: absolute;
        bottom:0;
        left:0;
        background-color:#ccc;
        z-index: 1;
    }
    video:after{
        content:"";
        display:block;
        width:0;
        height: 0px;
        position:absolute;
        bottom:-5px;
        left:0;
        border-style:solid;
        border-width:5px 0 0 5px;
        border-color:transparent transparent transparent #ccc;
        z-index:10;
    }
}

@media screen and (min-device-width:481px){
    /*AndroidCSS*/
    video::-webkit-media-controls-timeline{
        display:none !important;
    }
}

以上代码可以隐藏移动端的HTML5视频进度条。

结语

通过CSS隐藏HTML5视频进度条是一个比较实用的技巧，可以有效提高网页视频的用户体验。因为网页视频在不同设备上的表现不同，因此我们需要不断针对不同情况进行CSS样式调整，才能达到最佳的效果。