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

时间:2024-04-02 19:04:11

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

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

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

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

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

解决方案:

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属性
      }
 });

解决结果:

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