iOS wkWebview播放HTML5 video视频 自动全屏问题解决

HTML5使用video播放视频,限制视频的尺寸,但在ios中出现的全屏问题

使用html5 的video标签播放视频的时候,限制视频的尺寸,在android上是没有问题的,但是在ios上发现,视频没有开始播放的时候还是好的,但是一旦播放开是,就会全屏,非常奇怪。

  <video id="video" width="100%" poster="images/video.jpg" preload width="100%" controls>
   	<source type="video/mp4" src="sex8.mp4" >
   </video>

解决方案:

  1. HTML里video必须加上webkit-playsinline属性;
  2. IOS客户端在Obj-C里,webview设置allowsInlineMediaPlayback属性为YES
// HTML里video必须加上webkit-playsinline属性
<video id="player" width="480" height="320" webkit-playsinline>

// Obj-C里,webview设置allowsInlineMediaPlayback属性为YES
webview.allowsInlineMediaPlayback = YES;

经过尝试发现果然好用
html代码如下:

<video id="video" width="100%" poster="images/video.jpg" preload width="100%" controls webkit-playsinline>
	<source type="video/mp4" src="sex8.mp4" >
</video>

objective-c 代码如下:

  config.allowsInlineMediaPlayback = YES;
  • 2
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
iOS上,<video>标签默认是不支持自动全屏播放的。但是,你可以通过以下方式实现自动全屏播放,并且在横屏时自动切换到横屏模式: 1. 在<video>标签中添加webkit-playsinline属性,这将允许视频在页面内播放而不是全屏播放。 ``` <video src="video.mp4" webkit-playsinline></video> ``` 2. 为了实现自动全屏播放,你需要使用JavaScript来控制<video>标签。在页面加载完成后,使用以下代码将视频播放: ``` var video = document.querySelector('video'); video.play(); ``` 3. 为了在横屏时自动切换到横屏模式,你需要在JavaScript中监听屏幕旋转事件(orientationchange),并在事件发生时修改<video>标签的样式,将其宽度设置为屏幕的高度,将其高度设置为屏幕的宽度,同时还需要将页面的viewport元标签设置为允许横屏显示: ``` //监听屏幕旋转事件 window.addEventListener("orientationchange", function() { if (window.orientation == 90 || window.orientation == -90) { //横屏时将视频全屏,并修改viewport元标签 document.querySelector('video').style.width = window.innerHeight + 'px'; document.querySelector('video').style.height = window.innerWidth + 'px'; document.querySelector('meta[name=viewport]').setAttribute('content', 'width=device-height, initial-scale=1.0'); } else { //竖屏时将视频恢复原始尺寸,并修改viewport元标签 document.querySelector('video').style.width = '100%'; document.querySelector('video').style.height = 'auto'; document.querySelector('meta[name=viewport]').setAttribute('content', 'width=device-width, initial-scale=1.0'); } }); ``` 这样就可以实现iOS上<video>标签的自动全屏播放,并且在横屏时自动切换到横屏模式。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

回忆哆啦没有A梦

你的鼓励将是我创作的最大动力!

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值