webview video全屏的解决方案

2022-03-26 21:21| 来源: 网络整理| 查看: 265

在Android webview开发中，发现video元素全屏时只能竖屏，如果横屏的时，webview会刷新。为了解决这个问题，果断采用了以下方案。

1.全屏时暂停当前视频播放，并记录时间。

2.在body中添加一个video，宽度设置为屏幕高度，高度设置为屏幕宽度

3.旋转这个video90度，再平移至屏幕中心。

4.video读取播放地址和记录的播放时间。

旋转和平移的核心代码如下

var w = (window.innerWidth > 0) ? window.innerWidth : screen.width; var h= (window.innerHeight > 0) ? window.innerHeight : screen.height; var x = (w - h) / 2; var y = (h - w) / 2; var video = document.getElementById("fullVideo"); var translate = "translate(" + x + "px," + y + "px)"; video.style.transform = translate + "rotate(90deg)"; $('#fullVideo').attr('src', videoUrl[videoIndex]); playVideo("fullVideo");

【本文地址】

公司简介

联系我们