html5 中的 video 如何隐藏底部的全屏按钮或控制条

Posted 2023-04-14

可以通过更改#document片段的CSS来实现这一点，这些是DOM1规范，所有浏览器都支持。 

以下解决方案是特定于webkit的

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

display: none;

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

video::-webkit-media-controls-timeline

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

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

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

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

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

扩展资料：

TML5相对于之前的标准添加了许多新的语法特征，其中包括<video>、<audio>和<canvas>元素，同时集成了SVG内容。这些元素是为了更容易的在网页中添加和处理多媒体和图片内容。其它新的元素如<section>、<article>、<header>和<nav>则是为了丰富文档的数据内容。

同时也有一些属性和元素被移除掉，一些元素被重新定义或标准化。同时APIs和DOM已经成为html5中的基础部分了。HTML5还定义了处理非法文档的具体细节，使得所有浏览器和客户端程序能够一致地处理语法错误。

HTML5标准规范文档对于如何提高浏览器兼容性和SEO，保持代码结构的整洁性，标签元素的正确嵌套，自定义属性以及字符实体的使用，进行了详细的描述，其中也对HTML5移除的一些元素和属性进行了收集整理以供参考。

参考技术A <video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
您的浏览器不支持 HTML5 video 标签。
</video>
将video中的controls去掉，controls：如果出现该属性，则向用户显示控件，比如播放按钮。
希望对你有帮助，望采纳！追问

你好 去掉controls="controls" 播放界面上什么都没了 我希望只保留中间部分的播放按钮 该如何修改呢

追答

试了好几次没有发现能只去掉下面的属性，去掉controls后可以添加autoplay让其自动播放。

参考技术B 不写controls，中间部分的播放按钮可以用一个图片来代替，覆盖到视频页面上，通过点击该按钮来实现播放的功能，js有相应的api 参考技术C

将<video width="800px" height="400px" id="vid" src="a.mp4" controls="controls">中的controls="controls"删掉就没了

拓展：

1、万维网的核心语言、标准通用标记语言下的一个应用超文本标记语言(HTML)的第五次重大修改(这是一项推荐标准、外语原文:W3C Recommendation、见本处参考资料原文内容:)。2014年10月29日，万维网联盟宣布，经过接近8年的艰苦努力，该标准规范终于制定完成。

2、HTML标准自1999年12月发布的HTML4.01后，后继的HTML5和其它标准被束之高阁，为了推动Web标准化运动的发展，一些公司联合起来，成立了一个叫做 Web Hypertext Application Technology Working Group （Web超文本应用技术工作组 -WHATWG） 的组织。WHATWG 致力于 Web 表单和应用程序，而W3C（World Wide Web Consortium，万维网联盟） 专注于XHTML2.0。在 2006 年，双方决定进行合作，来创建一个新版本的 HTML。

参考技术D 可以用poster属性自定义张图片，然后去掉controls

Kotlin 实现从底部自定义像Activity一样的全屏弹窗的功能

实现：

主工程项目要导入的第三方项目library，如下图：

温馨提示：第三方项目library里面的不同弹窗有很多：从顶部弹窗、从底部弹窗、自由定位弹窗、自定义全屏弹窗、显示旋转弹窗(动画)…，适合工作，你想改什么样的弹窗就在这项目library里直接拿就即可，就是方便。订阅后CSDN私聊我，我就发给第三方项目library

代码：
1、CustomFullScreenPopup.kt

class CustomFullScreenPopup(context: Context) :