webview 中的视频在第二次运行时不起作用答案

【问题标题】：video in webview does not work at second runwebview 中的视频在第二次运行时不起作用
【发布时间】：2019-10-01 09:38:31
【问题描述】：

我有一个应用程序有一个VideosPage 页面，其中包含webviews 的listview，每个webview 都包含一个视频html 元素。当我第一次运行应用程序并打开VideosPage页面时，我可以播放、暂停、全屏打开和关闭全屏，但是当我关闭应用程序并重新打开它时，我无法播放、暂停、全屏打开和在xiaomi pocophone f1 和samsung galaxy a6+ 等设备中关闭全屏，但在huawei nova 4、samsung j5 2016 和huawei mate 10 lite 等设备中仍然可以正常工作。有没有解决办法，解释一下？

【问题讨论】：

标签： webview xamarin.android

【解决方案1】：

在某些设备中，webview 无法正常工作，我不知道为什么，但我做了一些工作来解决这个问题。我想要一个webview 来显示视频，全屏打开，播放和暂停。我使用javascript 代码整个webview 强制打开视频，方法是在播放按钮上方放置一个不可见的div，在打开全屏按钮上方放置另一个不可见的div，并通过javascript 呈现点击（在我的div）事件@ 像这样：

    <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>

【讨论】：