У меня есть приложение со страницей VideosPage
, которая содержит listview
из webviews
, каждая webview
содержит элемент видео html.
Когда я запускаю приложение в первый раз и открываю страницу VideosPage
, я могу воспроизводить, приостанавливать, открывать в полноэкранном режиме и закрывать полноэкранный режим, но когда я закрываю приложение и снова открываю его, я не могу воспроизводить, приостанавливать, открывать в полноэкранном режиме и закрывать полноэкранный режим на некоторых устройствах, таких как xiaomi pocophone f1
и samsung galaxy a6+
, но все еще хорошо работают на некоторых устройствах, таких как huawei nova 4
, samsung j5 2016
и huawei mate 10 lite
.
Есть ли решение, объяснение?
на некоторых устройствах webview
работало неправильно, я не знаю почему, но я нашел обходной путь, чтобы решить эту проблему.
Мне нужен webview
, который показывает видео, открывает его в полноэкранном режиме, воспроизводит и ставит на паузу.
Я использовал javascript
код всего моего webview
, чтобы принудительно открыть видео, поместив невидимый div над кнопкой воспроизведения и другой невидимый div над кнопкой открытия полноэкранного режима и визуализировав события щелчка (на моих div) с помощью javascript
следующим образом:
<html>
<head>
<style>
#container {width: 100%;height: 100%;position: relative;}
#navi,#navi2 {position: absolute;background-color:red;width:40px;height:40px;z-index: 10;}
#video {width: 100%;height: 100%;position: absolute;top: 0;left: 0;z-index: -10;}
</style>
</head>
<body>
<div id = "container">
<div id = "navi"></div>
<div id = "navi2"></div>
<video id = "video" preload = "none" poster = "yourPoster" src = "yourSource" type = "video/m3u8" x-webkit-airplay = "allow" style = "height: 100%; position: static; visibility: visible; width: 100%; object-fit: contain;" controlsList = "nodownload fullscreen" ></video>
</div>
</body>
<script>
var enabled = false;
var con = document.getElementById('container');
var video = document.getElementById('video');
function toggleVidState(){if (video.paused) {video.play(); } else {video.pause(); }}
function toggleControls() { if (video.hasAttribute("controls")) { video.removeAttribute("controls"); enabled = false; return true; } else { video.setAttribute("controls","controls"); toggleVidState(); enabled = true;} }
video.onclick = function(){ toggleControls(); };
var navi = document.getElementById('navi');
navi.onclick = function(){ if (enabled) { toggleVidState(); }};
navi.style.left = ((con.offsetWidth/2)-20).toString() + "px";
navi.style.top = ((con.offsetHeight/2)-30).toString() + "px";
var navi2 = document.getElementById('navi2');
navi2.onclick = function(){ video.requestFullscreen(); };
navi2.style.bottom = "10px";
navi2.style.right = "10px";
</script>
</html>