html5阻止video的默认全屏播放

最新推荐文章于 2024-03-12 19:16:55 发布
最新推荐文章于 2024-03-12 19:16:55 发布
阅读量1.2k 收藏
点赞数 1
分类专栏： html 文章标签： html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/jinlx_/article/details/108848874
版权

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

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

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

前端渣渣辉
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
html5 video全屏播放/自动播放的实现示例
01-21
近期开始开发公司新版官网， 首页顶部（header）是一个全屏播放的小视频, 现简单总结如下： 页面代码 <header class=header xss=removed> <?php if(!Helper::isMobile()) { ?> <video id=homeVideo class=home-video autoplay loop muted poster=res/video/cover.jpg> <source src=res/video/home_video.mp4 ty
微信 支持html5 video,H5.video在微信中禁止全屏播放视频和直播流
weixin_32633271的博客
06-07 597
这段时间在做一个直播项目，有直播需求，也有视频播放需求，要求能在微信中以半屏的方式播放，另外半屏可以做一些操作，还有些组件需要悬浮在视频上方。网上各种扒拉，各种实验，以求在微信中实现不全屏就能播放和自动播放，最终还是用了单纯的video标签。自动播放到目前还是没找到完美的解决方法。非全屏播放视频loopautoPlaysrc={url}controls={true}poster={pic}play...
HTML中 video标签样式铺满全屏
最新发布
qq_63608386的博客
03-12 1174
video标签默认不是铺满的，即使手动设置宽高100%也不会生效，所以当需要video铺满div时，需要加上一个css样式stylewidth100%;height100%;
html5 video 不让手机全屏播放,webView h5 video标签设置不全屏播放
weixin_39535557的博客
06-17 1490
最近有个需求在h5页面中加载视频，并在网页内自动播放。但是实际呢视频能直接播放，但是会弹出视频播放器全屏播放。而需求是不全屏自动播放，不符合需求要怎么办呢？只能改改改。。。解决办法：1.h5标签中要设置video标签iOS端webView设置(UIWebView在 iOS 8.0之后可使用WKWebView替代)self.webView.allowsInlineMediaPlayback = YE...
SpringBoot使用Ckediter上传图片
kevin.yau
07-28 755
需求通过ckediter的自带上传图片的插件，上传图片到我们自己的服务器上。实现ckediter的配置部分：找到ckeditor/ckeditor.js。//后面的地址改为你上传图片的地址 config.filebrowserImageUploadUrl= '/article/uploadImage'后台Controller部分@Controller public class FileUploadC
Html5原生video标签禁止全屏播放的实现
阿酷tony
03-18 2893
制作移动端H5，需要添加视频，点击播放的时候会自动全屏播放，记录一下处理局部播放的问题。 <video id="pageVideo" x5-playsinline="true" //安卓需要设置的属性 playsinline="true" //ios需要设置的属性 webkit-playsinline="true" //ios10需要设置的
h5，video禁止拖动进度条，禁止快进
03-24
利用jq简单控制h5视频播放进度条，让使用者不能快进，可以后退。原理是每500毫秒记录一次进度条时间，如果下一个500毫秒的进度减去上一个500毫秒的进度大于1秒，那么就让视频返回到上一个进度，因项目开发中对于视频播放只有这么一个要求，所以搞得比较简单。代码仅作参考。大神轻喷。
h5 播放视频怎么禁止全屏？
weixin_39963132的博客
08-16 1691
用h5的video标签来做视频会有很多问题，比如说：如何禁止全屏呢？ 添加上以下三行代码即可： 注意：笔者用的是video-react，所以属性是playsInline，如果直接使用video标签的话，那么属性就是playsinline webkit-playsInline={true} // ios x5-playsInline ={true} // android playsInline ={true} //ios10 更多的关于视频的问题，可看笔者关于h5播放视频的整理：github、segmen
全球异地多方连线视频直播（效果截图）
专注企业级视频应用，企业视频直播、MR虚拟直播、教育培训连麦直播
11-12 795
直播场景需求： 异地（全球）多方做视频连线； 异地嘉宾连线； 直播观看高并发需求； 观看端全终端适配。 2020中国医疗峰会 视频直播（直播截图） 未完待续~~ 我的热门文章推荐 多路视频直播用在线云导播切换的效果测试 如何把视频转换生成二维码，扫码直接播放？ 有哪些网站上传视频是不会插入广告的？ 怎么把视频生成二维码？微信扫二维码就可以观看？不要广告的 常用照片尺寸对照表，照片大小看这个表就对了 视频直播推流攻略（整理的各大平台推流界面） html5视频...
关于video标签，禁止点击播放时自动全屏，和video出现诡异窗口重叠
qq_42780323的博客
04-29 3124
加上x5-playsinline属性或者x5-video-player-type=“h5”，都可以禁用全屏，其中x5-video-player-type="h5"可以解决视频层级过高问题。 我的代码如下： <videowidth="100%"height="100%"id="video"style="object-fit:contain;"controlswebkit-playsinline="true"playsinline="true"x5-video-play...
HTML5 video播放器全屏(fullScreen)方法实例
09-28
主要介绍了HTML5 video播放器全屏(fullScreen)方法实例,本文直接给出一个完整代码实例,需要的朋友可以参考下
Android编程使WebView支持HTML5 Video全屏播放的解决方法
09-03
主要介绍了Android编程使WebView支持HTML5 Video全屏播放的解决方法,较为详细的分析了全屏播放所涉及的相关技巧,并给出了完整代码下载地址供读者参考,需要的朋友可以参考下
Android webview全屏播放HTML video
10-02
http://blog.csdn.net/zrzlj/article/details/8050633的样例代码，解压以后，用eclipse导入工程，将例子视频放在sdcard下面即可
html采用video播放hls视频流
10-13
1、本文详细描述了html采用video播放hls视频流的方法及源代码。 2、通过详细示例，让读者更直观地阅读，更清晰的理解。 3、示例代码可直接复制，编译后可直接运行。 4、根据示例以及运行结果，让读者加强记忆及...
HTML5微信播放全屏问题的解决方法
01-19
在ios和安卓手机里的微信下播放视频时，会遇到不少问题，例如需要手动点击，视频才会播放，并且视频会跳出微信框，出现控制条，如果视频不是腾讯视频，播放完毕会出现腾讯视频的广告推送等问题 解决办法：给video...
HTML5视频播放插件 video.js介绍
09-22
主要介绍了HTML5视频播放插件 video.js介绍 ,需要的朋友可以参考下
HTML5 Video/Audio播放本地文件示例介绍
09-28
在得到用户允许后我们还是可以播放本地文件的，在页面中插入一个input节点并指定type为file，然后把该url设置为audio或video的src值即可
video全屏背景视频播放特效
07-24
video全屏背景视频播放特效是一款大气全屏的视频播放，视频为背景的文字内容布局。
video默认全屏播放属性
05-23
可以通过在 video 标签中添加 `fullscreen` 属性来设置视频默认全屏播放。例如： ```html <video src="video.mp4" controls fullscreen></video> ``` 这样，在页面加载时，视频将自动全屏播放。请注意，此属性可能...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值