video 一进入就会全屏播放，但是在安卓手机最后会弹出腾讯的广告，解决办法；
<video class="video" style=‘position: fixed;
left: 0;
top:0;
width: 100%;
height: 100%;'
x5-video-player-type="h5"
x5-video-player-fullscreen="true"
webkit-playsinline="true"
playsinline="true"
x-webkit-airplay=”allow”>
其实本质是内层播放，只不过这个内层扩大到全屏
在微信里面不全屏播放：
安卓：x5-video-player-type=”h5″
ios：x-webkit-airplay=”true” playsinline webkit-playsinline=”true”
最后形成代码：
<video id="video" src="mp4.mp4" x-webkit-airplay="true" playsinline webkit-playsinline="true" x5-video-player-type="h5"></video>
其他属性：
preload="auto" 开启视频缓冲，页面加载完即加载视频
webkit-playsinline="true" 控制当前视频在当前设置的div里面播放，不脱离文档流
x-webkit-airplay="true" 支持Airplay的设备
x5-video-player-type="h5" 开启同层播放器，取消播放器的默认的播放按钮和播放器控制器控制面板，整个页面只保留微信默认自带的返回和关闭菜单
x5-video-player-type="h5" x5-video-player-fullscreen="true" 同层播放器设置类型为h5和设置视频播放为全屏幕
style="object-fit:fill;" css3样式设置填充整个屏幕 video铺满整个屏幕，不按照视频的原始比例
通过属性的设置和样式的控制让视频全屏显示。
微信里面给src或者source赋值后，视频不会二次加载，采用了后台截取第一帧返回图片的方式
手机中video 的事件如onload()、canplay()不执行，原因是 手机播放视频是边下载边播放，ios的话你会发现当你点击播放后会触发onload()、canplay()事件，想要触发安卓的话这样做
var reader = new FileReader();
reader.onload = function (e) {
}
reader.readAsDataURL(input.files[0]);
注意：readAsDataURL 是有bug 会让视频源体积变大，ajax上传50MB时程序卡死不动
播放结束、退出全屏
myVideo=document.getElementsByClassName('video')[0];
myVideo.addEventListener('ended', function (e) {
// 播放结束时触发
console.log('播放完毕');
$('.bofang').css('display','block');
});
//退出全屏
myVideo.addEventListener("x5videoexitfullscreen", function(){
$('.bofang').css('display','block');
this.webkitExitFullScreen();
});
上传文件是size的单位是B
解决input 弹出后body高度的变化
解决input 弹出后body高度的变化
var viewHeight = window.innerHeight; //获取可视区域高度
$("input").focus(function()
{
$(".index").css("height",viewHeight);
}).blur(function()
{
$(".index").css("height","100%");
});
//ios 键盘不回弹
$('.tel').blur(function () {
window.scroll(0, 0);
});
网友评论