解决苹果手机video标签直接全屏播放

发布时间 2023-12-12 14:16:22作者: 刘星Stars

当video在ios上面点击播放会自动全屏播放,这个体验有点不好,因为上面有全屏播放提示,如果用户真的需要全屏可以自己点击全屏播放按钮,所以需要禁止video在ios系统自动全屏播放。

一、解决思路:

ios中:

只需要在标签里面写上:webkit-playsinline='true'    playsinline='true'

android中:

android端部分视频也会存在自动全屏问题,添加:x5-video-player-type="h5-page"

 <video ref="video" x5-video-player-type="h5" webkit-playsinline="true" x-webkit-airplay="true" x5-video-orientation="portraint" playsInline="true" 
x5-video-player-fullscreen="portraint" x5-video-ignore-metadata='true' style="width: 100%; height: calc(100vh - 18vh)" crossorigin="anonymous" autoplay></video>

  为了保障直接全部加上以绝后患!

原文链接:大佬的https://www.cnblogs.com/redFeather/p/17010521.html