如何控制html5 video 控制条显示和隐藏时间

Posted 2023-04-16

参考技术A

需要准备的材料分别有：电脑、浏览器、html编辑器。

1、首先，打开html编辑器，新建html文件，例如：index.html，输入问题基础代码。

2、在index.html中的<script>标签中，输入js代码：

setTimeout(fun, 120*1000);

function fun()

$('video').attr('controls', 1);

3、浏览器运行index.html页面，此时运行2分钟后，才会显示出控制条。

控制 video 标签的控制栏组件

参考技术A 当 video 标签添加上 controls 属性时，页面上会显示出所有的控制组件。若有些组件不需要只需要在css中设置相关属性把它隐藏掉即可。

 <video

              style="width:500px;height:100%"

              controls="controls"

              autoplay

              poster="视频未加载时封面图片"

              id="video"

   ></video>

//全屏按钮

video::-webkit-media-controls-fullscreen-button

display: none;

   

    //播放按钮

video::-webkit-media-controls-play-button

display: none;

   

    //进度条

video::-webkit-media-controls-timeline

display: none;

   

    //观看的当前时间

video::-webkit-media-controls-current-time-display

display: none;

   

    //剩余时间

video::-webkit-media-controls-time-remaining-display

display: none;

   

    //音量按钮

video::-webkit-media-controls-mute-button

display: none;

   

video::-webkit-media-controls-toggle-closed-captions-button

display: none;

   

    //音量的控制条

video::-webkit-media-controls-volume-slider

display: none;

   

    //所有控件

video::-webkit-media-controls-enclosure

display: none;