解决uni-app视频组件h5手机端全屏后无法横屏播放的问题

最新推荐文章于 2024-12-25 15:13:41 发布

konsei

最新推荐文章于 2024-12-25 15:13:41 发布

阅读量4.7k

点赞数

分类专栏： uni-app 文章标签： javascript 视频 web app vue.js

本文链接：https://blog.csdn.net/TJ1532635942/article/details/125804951

版权

本文主要解决了uni-app中视频组件在H5手机端全屏时无法自动横屏播放的问题。尝试过使用CSS和transform属性手动切换横竖屏，但遇到兼容性问题，尤其是在安卓设备上。最终通过采用iframe实现横竖屏切换，解决了问题，代码简洁且在手机端及模拟器表现良好。

摘要由CSDN通过智能技术生成

最近接到需求要做一个内嵌到手机游戏里的web视频播放器，一个视频列表加一个播放页面。

很简单，一会就做好了。

但是遇到了一个问题却困扰了很久，uni-app的video组件在手机端全屏播放视频时居然无法根据视频尺寸自动横竖屏切换，看官方文档也说不支持

网上找到的解决方案都是说通过css来控制视频组件的宽高，tranform属性来手动进行横竖屏切换，例如这篇文章

uniapp 中 H5端使用 video 使其全屏横屏播放

有兴趣的同学可以参考自己做做，效果还是挺可以，但是由于手机端分安卓和ios端，安卓端还有各种屏幕适应性问题，使用时兼容性很差，搞得很头疼，我在手机模拟器里试了就出现问题了，横屏并且全屏后整个网页居然向上移动了一段距离，难搞哦！

后来看了下网上其他人写的视频网站手机端播放可以正常横竖屏全屏，于是看了下他们用的原来是iframe，顿时茅舍顿开啊，直接用iframe确实好用，自带了横竖屏切换，手机端和模拟器里切换也是正常的！而且代码非常简单，如下

<!--uni-app的video组件以及h5的video组件手机h5端播放视频无妨横屏，坑！-->
<!--直接使用iframe播放，可以自由横竖屏切换啦-->
<template>
	<iframe :src="url" class="video-box" :allowfullscreen="true" :border="0"></iframe>
</template>