CSS video控件去掉视频播放条

2023-12-13 12:47:13

两种方法如下:

1、用css隐藏video视频播放控件:

<style type="text/css">
    video::-webkit-media-controls{
        display:none !important;
    }
</style>

css隐藏原生html5 video controls,这么设置后即使没有设置controls为false,native controls也不会再出现。其他的按钮,包括播放按钮、播放进度条、静音按钮、音量条等,都可以像全屏按钮一样自定义样式。不止是隐藏。

2、用js隐藏video视频播放控件:

<script type="text/javascript">
     var video=document.getElementById("video"); 
     video.controls=false;
</script>

tips

HTML5的video虽然可用controls来展示控件,并进行控制播放暂停等,但是不同的浏览器显示的效果可能不一样,所以很多时候需要使用Dom来进行自定义的一些操作和控制。

文章来源:https://blog.csdn.net/Maxueyingying/article/details/134882991
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。