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

逃离我推掉我的手 2022-05-18 01:10 261阅读 0赞

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

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

![70][]

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

![70 1][]

解决方案：

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：

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();//隐藏上层图片  
                        \}

点击全屏设置：

$("\#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属性  
      \}  
 \});

解决结果：

![70 2][]

[70]: /images/20220518/6bfaf73067aa408fbf59a7b9cf87d54f.png
[70 1]: /images/20220518/bc10f303489249dc91095c9c8e464fbe.png
[70 2]: /images/20220518/e915152fd2cd4d8da4c8a3b11ee65edb.png