关于videobox的信息
在移动端怎么将HTML5中的video标签的控件去掉或者隐藏
看看这个或许对你有帮助奥！
控制条始终是最下方的，可不可以让视频的尺寸放大些，将控制条顶到浏览窗口外面，就看不到了嘛，于是我将视频宽高放大到120%-----控件条神奇的‘消失’了（其实是顶到视窗外面了），惊喜万分啊。
div class="videobox"
video id="mainvideo" webkit-playsinline="true" src=""/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:
1px;display:
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而已。
哦了，终于可以搞一个全屏视频伪装的东西了。
点击图片弹出视频
!DOCTYPE?html
html
head
????meta?charset="utf-8"
????title/title
/head
body
img?id="testimg"?src="#"?alt="测试图片"?width="100px"?height="100px"?style="cursor:?pointer"
div?id="videobox"?style="width:?500px;?height:?500px;?border:?1px?solid?#ddd;?position:?fixed;?top:?50%;?margin-top:?-250px;?left:?50%;?margin-left:?-250px;?z-index:?999;?display:?none"
????span?id="closex"?style="position:?absolute;?right:?0;?top:?0;?z-index:?1000;?display:?block;?width:?20px;?line-height:?20px;?text-align:?center;?cursor:?pointer"x/span
????video?id="video"?width="500px"?height="500px"?src="#"/video
/div
script?type="text/javascript"
var?testimg?=?document.getElementById('testimg');
var?videobox?=?document.getElementById('videobox');
var?closex??=?document.getElementById('closex');
testimg.onclick?=?function()
{
????videobox.style.display?=?'block';
}
closex.onclick?=?function()
{
????videobox.style.display?=?'none';
}
/script
/body
/html
已经写得很明显了，自己照这个去改
videobox 是什么！？
E-videobox
输入关键词搜索您想看的视频
播放视频搜索结果
收藏视频到本地
分类视频管理