具体思路和实现如下:
html中将video标签外包一层,
<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掉。









