html5阻止video的默认全屏播放

最新推荐文章于 2023-04-23 15:35:31 发布

原创最新推荐文章于 2023-04-23 15:35:31 发布 · 1.5k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html

html 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了在iOS上使用H5 video标签时，如何通过设置`webkit-playsinline`和`playsinline`属性来避免视频默认全屏显示的问题，确保视频在网页中正常显示。

近期做视频播放相关的H5时，发现video标签在ios上播放视频时会默认全屏显示，通过给video标签添加下面属性可以解决。

<video id="welcome-video" src="" poster="./images/voice/poster.png"  webkit-playsinline="true" playsinline="true"></video>

webkit-playsinline和 playsinline两个属性必须都设置

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

前端渣渣辉

关注关注

1
点赞
踩
0

收藏

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

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

html5 video标签(属性和事件)

ArturiaTop的博客

11-28

1910

html5 video标签学习(基础标签属性和事件)： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initi

h5，video禁止拖动进度条，禁止快进

03-24

利用jq简单控制h5视频播放进度条，让使用者不能快进，可以后退。原理是每500毫秒记录一次进度条时间，如果下一个500毫秒的进度减去上一个500毫秒的进度大于1秒，那么就让视频返回到上一个进度，因项目开发中对于视频播放只有这么一个要求，所以搞得比较简单。代码仅作参考。大神轻喷。

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

html5 中 video 标签,H5页面中 video 标签的坑

weixin_36308872的博客

07-03

1148

兼容性差因为是原生组件层级最高iOS系统和安卓系统展示方式不一样整理了一些有效的方法关于标签的 css 样式//全屏按钮video::-webkit-media-controls-fullscreen-button {display: none;}//播放按钮video::-webkit-media-controls-play-button {display: none;}//进度条vide...

h5 播放视频怎么禁止全屏？

weixin_39963132的博客

08-16

1926

用h5的video标签来做视频会有很多问题，比如说：如何禁止全屏呢？添加上以下三行代码即可：注意：笔者用的是video-react，所以属性是playsInline，如果直接使用video标签的话，那么属性就是playsinline webkit-playsInline={true} // ios x5-playsInline ={true} // android playsInline ={true} //ios10 更多的关于视频的问题，可看笔者关于h5播放视频的整理：github、segmen

微信支持html5 video,H5.video在微信中禁止全屏播放视频和直播流

weixin_32633271的博客

06-07

767

这段时间在做一个直播项目，有直播需求，也有视频播放需求，要求能在微信中以半屏的方式播放，另外半屏可以做一些操作，还有些组件需要悬浮在视频上方。网上各种扒拉，各种实验，以求在微信中实现不全屏就能播放和自动播放，最终还是用了单纯的video标签。自动播放到目前还是没找到完美的解决方法。非全屏播放视频loopautoPlaysrc={url}controls={true}poster={pic}play...

html5 video 不让手机全屏播放,webView h5 video标签设置不全屏播放

weixin_39535557的博客

06-17

1845

最近有个需求在h5页面中加载视频，并在网页内自动播放。但是实际呢视频能直接播放，但是会弹出视频播放器全屏播放。而需求是不全屏自动播放，不符合需求要怎么办呢？只能改改改。。。解决办法：1.h5标签中要设置video标签iOS端webView设置(UIWebView在 iOS 8.0之后可使用WKWebView替代)self.webView.allowsInlineMediaPlayback = YE...

Html5原生video标签禁止全屏播放的实现

阿酷tony

03-18

3816

制作移动端H5，需要添加视频，点击播放的时候会自动全屏播放，记录一下处理局部播放的问题。 <video id="pageVideo" x5-playsinline="true" //安卓需要设置的属性 playsinline="true" //ios需要设置的属性 webkit-playsinline="true" //ios10需要设置的

uniapp video默认全屏播放

11-13

uniApp 的 Video 组件支持默认全屏播放的功能，这是为了让用户有更好的观看体验。要在 uniApp 中实现视频的默认全屏模式，你可以这样做： 1. 在 `<video>` 标签中设置 `playsinline="false"` 属性，阻止视频在小...

禁止iPhone Safari video标签视频自动全屏的办法

09-03

总结起来，尽管开发者社区提出了许多尝试和建议，但在当前的技术环境下，无法完全禁止iPhone Safari浏览器中的`<video>`标签视频自动全屏播放。如果你需要在网页上实现非全屏视频播放，可能需要考虑其他设计策略或者...

video h5 在ios下默认全屏不生效

11-29

H5视频在iOS设备上默认全屏显示的问题可能是由于苹果的安全策略以及对HTML5 Video API的一些限制。当你直接在网页上嵌入video元素，并尝试设置`webkit-playsinline`属性使其能在Safari等内置浏览器上像普通元素一样...

前端安卓设备播放视频默认全屏

最新发布

09-02

在安卓设备（特别是微信等内置浏览器）中实现视频默认全屏播放，需结合特殊属性和API调用。以下是具体解决方案： #### 核心方法 ```html <video id="videoPlayer" src="video.mp4" controls playsinline <!-- ...

解决方法：html5阻止video的默认全屏播放

gaoxugen的博客

06-09

412

解决方法：html5阻止video的默认全屏播放 ios上禁止不了，尝试用了 <video src=“src.mp4” id=“video” -webkit-playsinline webkit-playsinline> 根本没有软用啊！弄了挺久，在看iphone-inline-video这个插件的时候找到了一个方法。有用了，换了一个属性，ios微信里总算不会跳全屏了。好评五星。 ...

html video强制不全屏播放

qq_37172634的博客

08-10

781

html video不全屏代码 <video src="'videoSrc" playsinline="true" webkit-playsinline="true" x5-playsinline="true" x5-video-player-type="h5" x5-video-player-fullscreen="false" autoplay></video> 可试用于大部分手机大部分webview 测试遇到不可用的平台有 IOS版微博 OPPO上的QQ 华为/荣耀上的钉

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

qq_24978681的博客

10-19

1万+

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

ios h5怎么不让视频全屏播放

湾流~ 的博客

04-23

1403

在 iOS 中，H5 页面中的视频通常会在用户点击全屏按钮时自动进入全屏播放模式。使用 playsinline 属性：将标签中的 playsinline 属性设置为 true。playsinline 属性告诉 iOS 在视频播放时将视频保持在页面内，而不是切换到全屏模式。

html中控制video标签全屏