react-native-webview: Videos in a webview doesn't play

Bug description: It is not possible to play any video in a webview. I have already tried videos from youtube (embedded, iframe, in an html file), vimeo … no video works, no image, no sound, just an inifinite loading. Opening the same link in the device’s default browser, the video starts playing. Opening the same link through the webview the page is loaded but the video doesn’t play.

Notes:

I added android:hardwareAccelerated="true" in androidManifest and <uses-permission android:name="android.permission.INTERNET"/>
I created a simple native example on android using webview and any video works without any problem.
I implemented a native ui component that when mounted starts a webview in an activity and it works.
If i put the code bellow in the Main Activity of my app it also works.

@Override
  @CallSuper
  protected void onCreate(@Nullable Bundle savedInstanceState) {
      super.onCreate(savedInstanceState);

      webView = new WebView(this);
      setContentView(webView);

      WebSettings webSettings = webView.getSettings();
      webSettings.setJavaScriptEnabled(true);
      webSettings.setAllowFileAccess(true);

      webView.setWebViewClient(new WebViewClient() {
          @Override
          public boolean shouldOverrideUrlLoading(WebView view, String url) {
              return true;
          }
      });

      webView.setWebChromeClient(new WebChromeClient());
      webView.loadUrl("https://www.youtube.com/embed/TQsl9nxs_1o?autoplay=1");
  }
}

Environment:

Device: Fire TV Stick (Gen 2)
OS version: Fire OS 5
Android version : Android Level 22 (Android 5.1)
react-native version: 0.63.2
react-native-webview version: 10.8.3

About this issue

Original URL
State: closed
Created 4 years ago
Reactions: 2
Comments: 37 (1 by maintainers)

Most upvoted comments

set as below mixedContentMode=‘always’

it works for me

+13

MarinaAmy on Oct 28, 2020

Posting here because my embedded YouTube videos were working on iOS but then not playing with sound on Android. They would play if it was muted, but wouldn’t play with sound, even after they started playing, and unmute’ing would cause them to pause

So, in case anyone is on this issue, like me, looking for a solution I was able to fix it with the mediaPlaybackRequiresUserAction={false} prop (even though it is still requiring user action)

smlparry on Oct 7, 2021

<WebView mediaPlaybackRequiresUserAction={true} androidLayerType= ‘hardware’ mixedContentMode=‘always’ style={{ height: 240, width: 320, alignSelf: “center”, alignContent: “center”, }} javaScriptEnabled={true} source={{ uri: https://www.youtube.com/embed/sFFwvr6l2mM? =0&autoplay=0&showinfo=0&controls=0&fullscreen=0 }} /> I have this code but only audio is playing video not visible

sidVaidya on May 20, 2021

I have the same issue when I try to view the W3 Schools HTML5 video tag example from an Amazon Fire Stick.

import React, { Component } from 'react';
import { WebView } from 'react-native-webview';

class Player extends Component {
  componentDidMount(){
 
  }
  render() {
    return <WebView source={{ uri: 'https://www.w3schools.com/html/html5_video.asp' }} />;
  }
}

export default Player;

I’ve tried all of the recommendations in this thread but non worked. I’m using version 11.6.2.

c-moyer on Jun 9, 2021

Just don’t disable androidHardwareAccelerationDisabled. It will start playing videos.

ShivamKJJW on May 18, 2021

mixedContentMode=‘always’

thanks. also works for me

the-nippy on Jan 15, 2021

Having the same issue, tried everything mentioned above doesn’t work on any videos, any update on this?

SurajMDurgad on Apr 13, 2021

setting androidLayerType={‘hardware’} worked for me on android. IOS it works fine

mayureshpr on Mar 22, 2021

Any update on this video issue I’m putting a youtube video but not works the components is just ignored or not appears in the view

brayanarrieta on Nov 10, 2020

Hi @Marinaarimany, I think you can use this one https://github.com/proyecto26/react-native-inappbrowser instead of react native webview. it does the same things with this webview library.

quyetthang122 on Oct 24, 2020

We have a similar problem with Android 7 & 8 versions and react-native-webview 10.3.2

The video audio is playing but the image is blackscreen, so no video images. We tried different Video Players and still have the same problem.

And it is working on the device’s default browser.

Any ideas?

Thnaks @Titozzz @jamonholmgren 😃

matamicen on Oct 2, 2020

Running into this issue as well. We’ve got some HTML content that includes a div and a script to build an STN video. The video builds fine and works, the issue is that it is a black screen on Android. Audio is present on iOS and Android. Tested Android devices are all 10+ (most are 11).

scott-augment on Apr 23, 2022

It appears to work ok in Android 10+ but fails with Android 9- which unfortunately is still used on Amazon Fire devices. This is also true with the emulator on 9 vs 10.

jzongker on Feb 10, 2022

@matamicen @quyetthang122

I had this issue of only audio playing, it was happening with hardware acceleration disabled 🤔 so it was “fixed” by avoiding changing the default values of the androidHardwareAccelerationDisabled or androidLayerType props

veraldo on Nov 26, 2020

Hi guys, I have the same issue like @matamicen in Android, but it is working fine in IOS. Have you figured out a solution yet?

quyetthang122 on Oct 13, 2020