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

看看这个或许对你有帮助奥！

控制条始终是最下方的，可不可以让视频的尺寸放大些，将控制条顶到浏览窗口外面，就看不到了嘛，于是我将视频宽高放大到120%-----控件条神奇的‘消失’了（其实是顶到视窗外面了），惊喜万分啊。

<div class="videobox">

<video id="mainvideo" webkit-playsinline="true" src="http://7xvl2z.com1.z0.glb.clouddn.com/nigg2.mp4"></video>

</div>

初始样式表如下：

html,body

{

padding:

0

margin:

0

width:

100%

height:

100%

-webkit-user-select:

none

user-select:

none

overflow:

hidden

}.videobox

{

width:

100%

height:

100%

position:

absolute

left:

0

top:

0

overflow:

hidden

}video

{width:

1pxdisplay:

blcok}/*

注：html，body里的overflow：hidden，非常重要，不能省。

因为微信android的播放器是脱离DOM结构的，也不会响应click、touch等事件。

如果视频尺寸大了，会产生滚动条，必须在html和body加overflow：hidden，

在videobox加没用的。

*/

当视频要播放时改变video的宽度（高度会等比缩放，即使自定义高度也是没用的，会被忽略）

var

video

=

document.querySelector('#mainvideo')

var

videobox

=

document.querySelector('.videobox')

//播放时改变外层包裹的宽度，使video宽度增加，

//相应高度也增加了,播放器控件被挤下去，配合overflow：hidden

//控件看不见也触摸不到了

var

setVideoStyle

=

function

(){

videobox.style.width

=

'120%'

videobox.style.left

=

'-10%'

video.style.width

=

'100%'

}

当然上面这样写参杂了一些需求逻辑，也可以直接样式表就width:120%,或者更大；这个根据自己的需要来，但基本思路就是将播放器控件顶出视窗之外，达到一种‘去除’、‘消失’的效果。连‘小窗’字样也被顶出去了，用过android或测试过的同学都知道点了小窗后会怎样....（原版的即使去掉了播放器，但小窗字样还在，不能算完全的隐藏播放控件吧）

相应产生的一些问题的解决办法：

1，视频被放大了，画面会被截掉一部分怎么办？

这个可以在视频输出的时候两边和下边留一些留白，即留白可以没用画面黑色底，但又属于视频尺寸的一部分，放视频放大后，将主体画面置满视窗，被挤到外面都是留白的即可。

2，视频播放完毕后会中间自动出现播放控件按钮

如果确实不想在播放完是出现一个按钮，哪怕只有零点几秒，就把视频remove掉，可以使用timeupdate监听视频播放，用video.duration-video.currentTime的差值判断是否快要结束了，在结束前零点几秒提前remove掉。

3，要是不是全屏视频怎么搞？

可以，思路是一样的，将视频控件顶出外层的包裹层，利用overflow：hidden。只是全屏的外层包裹是body而已。

哦了，终于可以搞一个全屏视频伪装的东西了。

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

只要去掉controls 这个参数就可以了，

例子：123<video width="352" height="264" controls autobuffer><source src=".." type='video/mp4'></source></video>

实现点击按钮控制音乐的播放和暂停。默认为播放，若想默认不播放，修改audio的autoplay属性即可。

介绍：

1、HTML标准自1999年12月发布的 HTML 4.01 后，后继的 HTML 5 和其它标准被束之高阁，为了推动Web标准化运动的发展，一些公司联合起来，成立了一个叫做 Web Hypertext Application Technology Working Group （Web超文本应用技术工作组 - WHATWG） 的组织。

2、WHATWG 致力于 Web 表单和应用程序，而 W3C（World Wide Web Consortium，万维网联盟）专注于 XHTML 2.0。在 2006 年，双方决定进行合作，来创建一个新版本的 HTML。

---