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

Posted 2023-03-04

用网页打开优酷和B站的视频发现他们的视频控件不是h5自带的样式，恰好自己最近在研究这个项目想知道解决方法... 用网页打开优酷和B站的视频发现他们的视频控件不是h5自带的样式，恰好自己最近在研究这个项目 想知道解决方法 展开

参考技术A 看看这个或许对你有帮助奥！
控制条始终是最下方的，可不可以让视频的尺寸放大些，将控制条顶到浏览窗口外面，就看不到了嘛，于是我将视频宽高放大到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:
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而已。
哦了，终于可以搞一个全屏视频伪装的东西了。