React native Question posted in
The official React Native documentation can be found here.

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>
     `,
       }}
     />```
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    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();

  2. 0

    With your setting, it will be almost impossible for a user to see the video controls. Unless you set autoplay and the browser respects that setting, the video won’t play unless the user clicks on the start button and it is hard to click on it if they can’t see it. User’s also need to see the controls if they want to switch to full screen.

    You might get a better result with something more like this: opacity: 0.2

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search