video 适应手机端的播放控制栏设置

video 设置了controls=“controls”属性，会获得浏览器默认的播放控制栏，不同浏览器的播放控制栏样式不同。

在微信公众号开发过程中，使用了这个属性，视频是左侧小窗，出现了播放控制栏展现不全的问题：

点击三个点以后是这样的：

解决方案：

1.iOS下没有这个问题，所以直接用controls属性即可

2.安卓手机下，先不设置controls属性，将一个中间为播放按钮周边为透明的图片放置在原视频框上，设置其层级（z-index）高于视频框，将这两个框重叠，点击这个框的域放大视频框，再给video设置controls属性，退出全屏去除controls属性。

实现：

上层图片样式：

.top_img{
    width: 80px;
    height: 80px;
    z-index: 999;//设置高层级
    background-image: url(images/video_play.png);
    position: absolute;
    background-size: cover;
}

视频框样式：

#video-show {
    width: 80px;
    height: 80px;
    display: inline-block;
    background-size: cover;
    background-repeat: no-repeat;
    position: relative;
}

#video-show video {
    display: block;
    margin: 0 auto;
    max-height: 200px;
}

body两个div：

<div id="video-show" class="video-show" >
                     <div class="top_img"></div>
</div>

js添加video：

var video = document.createElement('video');
                        video.src = reader.result;
                        video.id = 'local-video';
                        container.appendChild(video);
                        var ele = document.getElementById("local-video");
                        if(!(ele .requestFullscreen||ele .mozRequestFullScreen||ele .webkitRequestFullScreen)){//判断是iOS系统
                           ele.setAttribute('controls', 'controls');//添加controls属性
                           $(".top_img").hide();//隐藏上层图片
                        }

点击全屏设置：

function FullScreen() {
    var ele = document.getElementById("local-video");
    if (ele .requestFullscreen) {
        ele .requestFullscreen();
    } else if (ele .mozRequestFullScreen) {
        ele .mozRequestFullScreen();
    } else if (ele .webkitRequestFullScreen) {
        ele .webkitRequestFullScreen();
    }
}

$("#video-show").click(function(){
      var ele=document.getElementById("local-video");
      if(ele .requestFullscreen||ele .mozRequestFullScreen||ele .webkitRequestFullScreen){//判断是安卓系统
          ele.setAttribute('controls', 'controls');//添加controls属性
          FullScreen();//全屏
          ele.controls = '';//退出全屏去除controls属性
      }
 });

解决结果：