在移动端播放video视频会自动全屏的问题

原创已于 2022-06-19 00:09:38 修改 · 1.2k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#前端

于 2022-06-18 23:50:05 首次发布

本文介绍了如何通过添加HTML属性`x5-video-player-type=h5`, `playsinline`和`webkit-playsinline`来避免视频在播放时自动全屏，适用于移动端Web开发中的视频播放体验优化。

这边需要给video添加以下属性，就可以解决播放就全屏问题

        x5-video-player-type="h5"
        playsinline
        webkit-playsinline

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

何云东

关注关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

移动端视频作为全屏背景播放

Ricale的博客

09-05

477

在此之前搜寻了两天使用video标签的解决办法，x5-video-player-type和webkit-playsinline属性都不管用，出项的问题是，进入首页自动播放时会唤起手机的视频播放器（safari），还有不会自动播放的（微信内嵌网页）以下是我在react项目中涉及到的相关代码，可做相关参考。滴滴的移动端官网就是这样的办法实现的类似效果。最后终于遇到参考文章的办法，序列图片视频化。

vue3开发移动端H5页面中video无交互自动播放完美解决方案

你好！刘斩仙

01-17

2760

移动端测试视频正常播放无需交互，亲测有效！，声音未测试，本次需求无需声音。几乎所有转化默认都是MPEG-2，一定要确认！如果黑屏就是格式不对，如果跨越就设置下。

参与评论您还未登录，请先登录后发表或查看评论

自定义video播放组件-可全屏可加速兼容移动端

10-21

自定义video播放组件，自写控制条，可全屏观看，可调节播放倍速，兼容移动端

h5使用video标签解决自动全屏问题

qq_24978681的博客

10-19

1万+

h5使用video标签解决自动全屏问题

手机移动端视频全屏播放（兼容Android与iOS）

qq_40721240的博客

09-21

1万+

在做移动端项目时，做个视频播放是不可避免的，大部分情况下都是点击一个按钮，视频全屏播放，下面将对这个情况进行分析与记录。 html: <video height="100%" id="videoPlay1" playsinline preload="auto" src="video.mp4" type="video/mp4" width="100%" x5-video-

解决移动端video全屏播放问题

夏天的风

05-12

5271

移动端开发过程中，有的时候会遇到video播放（不让全屏播放），但是浏览器默认都是点击自动全屏去播放。下面看解决方法：

vue-video-player 解决微信自动全屏播放问题(横竖屏导致样式错乱问题)

11-21

然而，在实际开发过程中，尤其在移动设备上，尤其是在微信内置浏览器中，可能会遇到一些特定的问题，如自动全屏播放、横竖屏切换导致的样式错乱等。在微信环境中，由于它使用了不同的渲染引擎（如腾讯自家的 X5 ...

跨平台HTML5视频全屏播放解决方案_支持iOS和Android设备自动适配_通过原生video标签属性设置和JS动态生成两种方式实现全屏播放_解决移动端浏览器视频播放兼容性问题_.zip

07-18

然而，由于不同移动设备的浏览器对HTML5的video标签支持程度不同，开发者在开发移动端视频播放功能时往往会遇到诸多兼容性问题。为了解决这一问题，我们提出了一种跨平台的HTML5视频全屏播放解决方案，旨在实现iOS和...

vue2移动端video标签点击视频全屏播放

最新发布

08-05

在移动端，尤其是 iOS 上，视频默认会在全屏模式下播放。为了控制视频播放时是否自动全屏，可以使用 `webkit-playsinline` 和 `playsinline` 属性，允许视频在内联状态下播放，而不是强制进入全屏模式。 ```html ...

禁止视频在手机移动端页面中全屏播放代码范例

专注企业级视频应用，企业视频直播、MR虚拟直播、教育培训连麦直播

12-22

648

禁止视频在手机移动端页面中全屏播放代码范例 <video controls autoplay loop preload="auto" poster="img/popup-img.png" webkit-playsinline="true" playsinline="true" x5-video-player-type="h5" x5-video-player-fullscreen="true" x-webkit-air...

video标签android全屏,视频video标签在移动端微信中默认全屏播放的解决方案

weixin_32734143的博客

05-26

1721

最近后盾人移动端上线了，开发挺顺利，但也遇到几个小坑。后盾人中的视频是用video视频标签引入的，当在微信中打开后盾人，播放视频的时候，视频默认会全屏播放。安卓和ios下都存在此问题，解决方法如下：iOS端：给video标签加上 playsinline=”true” 属性就行了。一开始看网上有很多人说加webkit-playsinline=’true’属性就好使，但我在iOS 11.2，最新版微...

解决移动端、苹果端、安卓端点击视频自动全屏问题的方法

阿酷tony

12-11

5350

video标签中增加： x5-playsinline="" playsinline="" webkit-playsinline="" 经测ios有效，但是，但是国内部分浏览器，比如国内不讲规则的QQ浏览器是无效的。

video视频播放自动进入全屏模式

weixin_42401268的博客

04-26

2239

通过设置 playsinline 有的设备会不生效，可以设置 webkit-playsinline。两个可以同时设置，保证包含所有情况。另外，验证时，发现点击视频的时候会出现切换画中画的按钮，实际需求是不需要的。其中介绍了playsinline属性可以设置视频播放的时候不直接全屏播放。但是每次进入页面，视频加载完成播放的时候，会直接进入全屏模式播放。同过mdn查询video标签的参数发现并没有相关介绍。混合开发，原生使用webview内嵌h5页面。转移思路，查询多媒体相关的设置。

解决网页内嵌＜video＞视频在手机端播放时自动全屏的问题

浦东余春娇

07-30

1380

<video playsinline="true" webkit-playsinline="true"></video>

解决video在ios中自动全屏问题

weixin_42082342的博客

07-31

1485

在开发APP的时候，发现video视频在ios中点击播放会自动全屏的问题，在小程序端正常，查了资料做出以下总结，顺便记录一下。

video自动全屏播放

weixin_33852020的博客

07-27

1031

video自动全屏播放关于Screen.lockOrientation() https://developer.mozilla.org/en-US/docs/Web/API/Screen/lockOrientation 这个是实验性的功能，只有在全屏模式下才有效果，比如我的mi4上没开全屏模式就提示： Uncaught (in promise) DOMException: lockOrienta...

h5移动端实现视频手动全屏，以及左右滑动切换视频。附带调试微信小程序内部webview页面方案

zhuanggenhua的博客

05-02

1595

uniapp 小程序中的webview使用jessibuca直播流，全屏出现拉伸。

html5 video全屏播放/自动播放