解决uniapp跳转第三方页面video不能全屏问题

今天在各终端做兼容性测试时本以为可以安全通过呢,结果测试给到反馈说Android手机外链的url里面的视频尽然不能全屏播放。于是乎吧啦吧啦代码看看。
代码大致这样,带有video标签的页面是我的另一个项目,并且这个项目自行单独运行完全没毛病,快进、全屏等功能都是可以正常使用。但是呢一引入这个项目呢,虽然能改正常播放但是全屏效果没了。在这个使用uniapp开发的项目内,我是使用webview标签作为容器直接给src赋值跳转第三方页面的,之前也是用这种方式跳过完全没问题的呀。
问题分析:
我觉得是webview跳转在中间转换出现了问题,因为原项目是可以正常的全屏观看的。
于是乎我随意找了两个替代方案试试:
1.采用了iframe嵌入链接试了下,页面是正常出来了没错,但是还是不能全屏呀,故舍弃这个方案。
2.采用原生的方式,使用window.open()这种方式,页面可以出来,全屏也是可以的,正当满心欢喜时问题又来了。由于我使用uniapp开发的这个项目实质上也只是当H5在用内嵌到app里的,由于项目需要(主要是UI设计的原因)导航和状态栏都是H5自定义的,这就导致window.open()这种方式打开的页面会直接顶到屏幕的顶部,产品直呼不能接受。。故放弃!
至此呢,可能已经耗费数小时时间了,正当一筹莫展的时候呢,用F12在控制台看到了一个另我比较敏感的信息。如下图:


image.png

这是uniapp 使用了webview标签后转换后的页面,赫然看见video标签竟然被一层iframe标签包裹着。立马联想到我的替代方案不也是使用了iframe导致功能不好使么?!所以基本可以断定是iframe的问题。。
于是乎看看官网,有这么一句也不是特别明显:


image.png

进到特征策略基本上就会明白为什么了。
image.png

事实证明我分析的还是正确的,虽然配置起来超简单。当然这一过程也锻炼了自己解决问题的思路,最后完美解决。

其实也就这一句:allow="fullscreen",弄了半天,自嘲下顺带记录over~

你可能感兴趣的:(解决uniapp跳转第三方页面video不能全屏问题)