html5-video 层级高的问题、全屏播放、canplay不执行

video 一进入就会全屏播放，但是在安卓手机最后会弹出腾讯的广告，解决办法；

            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”

最后形成代码：

其他属性：

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);

});