в некоторых устройствах webview
не работал правильно, я не знаю почему, но я обошел эту проблему.Я хотел webview
, который показывает видео, открывается в полноэкранном режиме, играет и делает паузу.Я использовал javascript
весь код моего webview
, чтобы принудительно открыть видео, поместив невидимый div над кнопкой воспроизведения, а другой невидимый div - над открытой полноэкранной кнопкой и обработав события click (на моих 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>