javascript android react-native webview expo

React Native Webview : Playing HTML5 videos dynamically causes sometimes blank screen with only audio and no picture needs user interaction

I am using expo-react native to build an application to play videos dynamically but sometimes only audio is playing but no video. I have to tap on the screen to see picture. In Android TV it works well but not on mobile devices. I don't know what to do now.

I tried passing every prop I could but still only mobile devices show this problem. Is there any way to solve this issue?

<WebView
        style={styles.container}
        originWhitelist={["*"]}
        allowFileAccess={true}
        allowUniversalAccessFromFileURLs={true}
        allowFileAccessFromFileURLs={true}
        javaScriptEnabled={true}
        domStorageEnabled={true}
        allowsFullscreenVideo={true}
        mixedContentMode='always'
        androidLayerType="hardware"
        androidHardwareAccelerationDisabled={false}
        mediaPlaybackRequiresUserAction={false}
       source={{
         html: `<!DOCTYPE html>

     <html lang="en">
       <head>
         <meta charset="UTF-8" />
         <meta http-equiv="X-UA-Compatible" content="IE=edge" />
         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
         <title>Document</title>
         <style>
           body {
             margin: 0;
             padding: 0;
             overflow: hidden;
             box-sizing: border-box;
             background: #000;
           }
           video {
             width: 100vw;
             height: 100vh;
             object-fit: cover;
           }
         </style>
       </head>
       
       <body>
         <video id="myVideo" autoplay muted></video>
         <script>
           var videoSource = new Array();
           videoSource = ${JSON.stringify(vid)};
           
           var videoCount = videoSource.length;
           var elem = document.getElementById("myVideo");
           if (elem.requestFullscreen) {
             elem.requestFullscreen();
           } else if (elem.mozRequestFullScreen) {
             elem.mozRequestFullScreen();
           } else if (elem.webkitRequestFullscreen) {
             elem.webkitRequestFullscreen();
           } else if (elem.msRequestFullscreen) {
             elem.msRequestFullscreen();
           }
           document.getElementById("myVideo").setAttribute("src", videoSource[0]);
     
           function videoPlay(videoNum) {
             document
               .getElementById("myVideo")
               .setAttribute("src", videoSource[videoNum]);
             document.getElementById("myVideo").load();
             document.getElementById("myVideo").play();
           }
           document
             .getElementById("myVideo")
             .addEventListener("ended", myHandler, false);
           var incr = (function () {
             var i = 0;
     
             return function () {
               if (i > videoCount - 1) {
                 i = 0;
               }
               return i++;
             };
           })();
           function myHandler() {
             videoPlay(incr());
           }
         </script>
       </body>
     </html>
     `,
       }}
     />```

Solution

I found A quick solution to solve this bug from webview. Just add css styling for video.

You need to enable controls in video tag first.

 <video id="myVideo" autoplay controls></video>

then have to add this code in css.

video::-webkit-media-controls {
opacity: 0.01 !important;
}

if it still doesn't work then try to remove autoplay attribute from video and play manually using javascript.

const video = document.getElementById("myVideo");
video.play();