微信安卓 H5 video视频播放自动全屏

最新推荐文章于 2023-08-02 12:02:57 发布

原创最新推荐文章于 2023-08-02 12:02:57 发布 · 1.9k 阅读

2 ·

CC 4.0 BY-SA版权

微信小程序专栏收录该内容

15 篇文章

订阅专栏

这里写自定义目录标题

1.(安卓手机)微信中禁止点击视频自动全屏
2.禁止显示进度条

本文是为了自己防止忘记了在此记录,如果不足之处还望指出一起学习
腾讯微信X5内核浏览器文档地址:https://x5.tencent.com/tbs/guide/web/x5-video.html

1.(安卓手机)微信中禁止点击视频自动全屏

最近在做到一个项目是要求微信(企业微信)中打开视频播放,但是微信在安卓手机上播放视频时会自动全屏,解决办法:( 2020-04-29测试有效,华为,小米,苹果 )

				<video id="my-video"
                       class="video-js"
                       style="object-fit: fill"
                       controls="true"
                       x-webkit-airplay="true"
                       x5-playsinline="true"
                       playsinline="true"
                       webkit-playsinline="true"
                       x5-video-orientation="portraint"
                       preload="auto"
                       width="960" height="500" poster="/static/home/images/1.jpg">

2.禁止显示进度条

但是这里有个问题就是,视频右下角会有系统自带全屏观看,进入全屏时就没有办法了

<video id="my-video1"
class="video-js vjs-big-play-centered"
style="object-fit: contain"
controls=""
x5-playsinline="true"
playsinline="true"
webkit-playsinline="true"
x5-video-player-type="h5"
x5-video-player-fullscreen="true"
x-webkit-airplay="allow"
x5-video-player-fullscreen=""
x5-video-orientation="portraint"
preload="auto"
width="960" height="500" poster="/static/home/images/2.jpg">