用微信打开网页,如何禁止视频横屏播放?怎样设置强制视频竖屏播放?
默认video标签实现的视频播放,在ios下都会全屏播放,脱离页面。发现了webkit-playsinline这个好东西,只需要在video标签用上这个属性就能实现非全屏下播放视频:
<video webkit-playsinline="true" src=""> <p>请在支持HTML5 video标签的浏览器中</p> </video>
ios微信测试,恩,ok了!但是可悲的是目前Safari不支持该属性。那么Safari这个能解决吗?继续搜索,又发现一个好东西iphone-inline-video.browser.js(本次测试的最大惊喜,解决了多年的困惑!!!),已经有大神解决了这个问题。插件地址:https://github.com/bfred-it/i...引入插件后,只需要简单调用即可:
var video = document.querySelector('video'); makeVideoPlayableInline(video);
里面还提到用css干掉video默认居中的那个播放按钮:
.IIV::-webkit-media-controls-play-button, .IIV::-webkit-media-controls-start-playback-button { opacity: 0; pointer-events: none; width: 5px; }
<video webkit-playsinline="true" src="#"></video>
插件用起来,视频有点卡,还不能拖进度条
ios10,微信 6.5.20 ,在微信内嵌浏览器下,点击播放视频,视频依然会全屏
<video class="video" autoplay="" loop="" webkit-playsinline="true"> <source src="movie.ogg"> <source src="movie.mp4" type="video/mp4"> </video>
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
暂无简介
文章 0 评论 0
接受
发布评论
评论(4)
默认video标签实现的视频播放,在ios下都会全屏播放,脱离页面。发现了webkit-playsinline这个好东西,只需要在video标签用上这个属性就能实现非全屏下播放视频:
ios微信测试,恩,ok了!但是可悲的是目前Safari不支持该属性。那么Safari这个能解决吗?继续搜索,又发现一个好东西iphone-inline-video.browser.js(本次测试的最大惊喜,解决了多年的困惑!!!),已经有大神解决了这个问题。
插件地址:https://github.com/bfred-it/i...
引入插件后,只需要简单调用即可:
里面还提到用css干掉video默认居中的那个播放按钮:
插件用起来,视频有点卡,还不能拖进度条
ios10,微信 6.5.20 ,在微信内嵌浏览器下,点击播放视频,视频依然会全屏