解决微信浏览器video全屏的问题及黑边问题

                     

这是苹果和安卓在微信上的效果图:
解决微信浏览器video全屏的问题及黑边问题
解决微信浏览器video全屏的问题及黑边问题

<video src="./mp4/v1.mp4" x5-video-player-type="h5"  id="player" height="100%" width="100%" webkit-playsinline playsinline x5-playsinline x5-video-player-fullscreen="true">                    your browser does not support the video tag                </video>
  • 1
  • 2
  • 3

还有个问题,在android的微信里面,就算加上了上面的属性,还会出现上下有黑边,不能全屏的问题。所以需要设置:object-fit: fill

#player{                position: absolute;                z-index: 1;                margin: 0;                padding: 0;                object-fit: fill;            }
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
           
                     

这是苹果和安卓在微信上的效果图:
解决微信浏览器video全屏的问题及黑边问题
解决微信浏览器video全屏的问题及黑边问题

<video src="./mp4/v1.mp4" x5-video-player-type="h5"  id="player" height="100%" width="100%" webkit-playsinline playsinline x5-playsinline x5-video-player-fullscreen="true">                    your browser does not support the video tag                </video>
  • 1
  • 2
  • 3

还有个问题,在android的微信里面,就算加上了上面的属性,还会出现上下有黑边,不能全屏的问题。所以需要设置:object-fit: fill

#player{                position: absolute;                z-index: 1;                margin: 0;                padding: 0;                object-fit: fill;            }
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7