在移动端怎么将HTML5中的video标签的控件去掉或者隐藏

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

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

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

if (navigator.userAgent.match(/mobile/i)) {

$('video').hide()

}

3、浏览器运行index.html页面，此时在移动端中成功隐藏了video标签的控件。

html

<div class="camera-box">

          <img class="camera-bg" src="../../assets/camera_bg.png" alt="">

          <video id="cameraVideo" autoplay></video>

        </div>

css

.camera-box {

    width: 324px

    height: 471px

    overflow: hidden

    position: relative

    z-index: 2

    .camera-bg {

      width: 324px

      height: 471px

      position: relative

      z-index: 1

    }

    #cameraVideo {

      position: absolute

      left: 50%

      top: 0

      height: 471px

      transform: translateX(-50%)

    }

  }

不知道楼主想要的是不是这个效果

可以通过更改#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移除的一些元素和属性进行了收集整理以供参考。

---