javascript - React Native Android Webview Video - Stack Overflow

admin管理员组

文章数量:1289636

I'm using React Native to create an Android/iOS app and trying to get a video to play in the WebView ponent. The video plays fine on iOS, but I'm having trouble getting it to play in the android WebView.

I've e across a few threads like this one (Enabling HTML5 video playback in android WebView?) that claim this is a fairly mon problem on Android and can be solved by importing WebChromeClient and setting that option on the webview like so:

mainWebView.setWebChromeClient(new WebChromeClient());

But almost all these threads are strictly about building a native Android app and not using React Native.

Does anyone know how to get this to work in React Native?

I'm using React Native to create an Android/iOS app and trying to get a video to play in the WebView ponent. The video plays fine on iOS, but I'm having trouble getting it to play in the android WebView.

I've e across a few threads like this one (Enabling HTML5 video playback in android WebView?) that claim this is a fairly mon problem on Android and can be solved by importing WebChromeClient and setting that option on the webview like so:

mainWebView.setWebChromeClient(new WebChromeClient());

But almost all these threads are strictly about building a native Android app and not using React Native.

Does anyone know how to get this to work in React Native?

• javascript
• android
• video
• webview
• react-native

Share Improve this question Follow edited May 23, 2017 at 12:06 CommunityBot 111 silver badge asked Jun 15, 2016 at 5:44 AndrewTetAndrewTet 1,18288 silver badges2222 bronze badges 5

• have you tried this plugin github./brentvatne/react-native-video – diedu Commented Jun 16, 2016 at 22:04
• Yea, that's slightly different than what I'm looking for. I'm looking to display an embed link from and online video player inside a webview so that I can use their web player and all the functionality they've built into it (roll back 30 seconds, full screen, etc). React-native-video is just a ponent that allows you to play the video, but would require me to link directly to the source as well as recreate all the UI for the player. I might end up doing that if I can't solve this though. Thanks though! – AndrewTet Commented Jun 16, 2016 at 23:22
• do you have vsn .27? it supports android.. facebook.github.io/react-native – Rachel Gallen Commented Jun 20, 2016 at 22:32
• Yea, I'm using .27. The webview itself works fine. It's just trying to play HTML5 video in it that breaks. – AndrewTet Commented Jun 20, 2016 at 23:41
• 1 I'm having the same issue, have you ever gotten this to work? – Greg Commented Jun 29, 2016 at 11:59

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 9 +200

I refer to an article by Yevgen Safronov

In it, he writes

Obviously the most challenging part of the application is handling live video stream, because it requires switching stream’s video quality based on available Internet bandwidth. But first things first — I needed a RN native ponent to show any video stream. There is a popular video ponent for RN but it has support for iOS only. I decided to write my own RN ponent wrapper around Vitamio player. It is well known open-source project and has support of RTMP protocol we use for mobile app.

I had no prior experience with writing native RN ponents so I went directly to RN documentation on how to create one. A guide I refer to is called Native UI Components, there is similar one for iOS. There are several essential parts to declare:

Implement custom ViewManager (Android part)
Register the ViewManager (Android part)
Implement the JavaScript module
Register the module (Android part)

Implement custom ViewManager Referring to the example of declaring VideoView for Vitamio this is how the essence of VideoView declaration looks like:

public class VideoViewDemo extends Activity {
 @Override public void onCreate(Bundle icicle) {
   super.onCreate(icicle);
   if (!LibsChecker.checkVitamioLibs(this))
     return;
   setContentView(R.layout.videoview);
   mEditText = (EditText) findViewById(R.id.url);
   mVideoView = (VideoView) findViewById(R.id.surface_view);
   if (path == "") { return; }
   mVideoView.setVideoPath(path);
   mVideoView.setMediaController(new MediaController(this));
   mVideoView.requestFocus();
 }
...
}

The code looks quite straightforward. Apart from passing a reference to Activity into LibsChecker, VideoView requires a path to a video stream and instance of MediaController.

public class VitamioViewManager extends SimpleViewManager<VideoView>{ 
 public static final String REACT_CLASS = “RCTVitamioView”;
 @Override
 public String getName() {
   return REACT_CLASS;
 }

expose setStreamUrl setter using ReactProp:

@ReactProp(name = "streamUrl")
public void setStreamUrl(VideoView view, @Nullable String streamUrl) {
   if (!LibsChecker.checkVitamioLibs(mActivity))
      return;

   view.setVideoPath(streamUrl);       
   view.setMediaController(new MediaController(mContext));
   view.requestFocus();       
}

add createViewInstance implementation:

private ThemedReactContext mContext = null;
private Activity mActivity = null;
@Override
public VideoView createViewInstance(ThemedReactContext context){
  mContext = context;   
  return new VideoView(context);
}
One note about the code. Because LibsChecker requires an instance of Activity we will receive it via constructor, it will reference root activity used for RN application;
public VitamioViewManager(Activity activity) {
  mActivity = activity;
}

Register the ViewManager The final Java step is to register the ViewManager to the application, this happens via the applications package member function createViewManagers: ...

public class VitamioViewPackage implements ReactPackage {

  private Activity mActivity = null;

  public VitamioViewPackage(Activity activity) {
      mActivity = activity;
  }


  @Override    
  public List<NativeModule>
  createNativeModules(ReactApplicationContext reactContext) {
     return Collections.emptyList();
  }  
  @Override
  public List<Class<? extends JavaScriptModule>> createJSModules() {
    return Collections.emptyList();
  }     
  @Override
  public List<ViewManager>
  createViewManagers(ReactApplicationContext reactContext) {
    return Arrays.<ViewManager>asList(
      new VitamioViewManager(mActivity)
    );    
  }
}

Implement the JavaScript module In order to expose custom UI ponent in JavaScript it is necessary to call special requireNativeComponent function:

var { requireNativeComponent, PropTypes } = require('react-native');

var iface = {
  name: 'VideoView',
  propTypes: {
    streamUrl: PropTypes.string
  }
};

module.exports = requireNativeComponent('RCTVitamioView', iface);

Register the module Although it’s not mentioned as required step in official documentation we need it because of reference to the root activity: package .vitamio_demo;

import .facebook.react.ReactActivity;
import .facebook.react.ReactPackage;
import .facebook.react.shell.MainReactPackage;

import java.util.Arrays;
import java.util.List;

import .sejoker.VitamView.VitamioViewPackage; // <--- import

public class MainActivity extends ReactActivity {

    /**
     * Returns the name of the main ponent registered from JavaScript.
     * This is used to schedule rendering of the ponent.
     */
    @Override
    protected String getMainComponentName() {
        return "vitamio_demo";
    }

    /**
     * Returns whether dev mode should be enabled.
     * This enables e.g. the dev menu.
     */
    @Override
    protected boolean getUseDeveloperSupport() {
        return BuildConfig.DEBUG;
    }

   /**
   * A list of packages used by the app. If the app uses additional views
   * or modules besides the default ones, add more packages here.
   */
    @Override
    protected List<ReactPackage> getPackages() {
      return Arrays.<ReactPackage>asList(
        new MainReactPackage(),
        new VitamioViewPackage(this)          // <------ add here
      );
    }
}

Example of usage Install the package in a project:

npm i react-native-android-vitamio --save

DeclareVideoView:

var VitamioView = require('react-native-android-vitamio');

class VideoScreen extends React.Component {
  render() {
    return (
      <View>
        <VitamioView style={styles.video} streamUrl="rtmp://fms.12E5.edgecastcdn/0012E5/mp4:videos/8Juv1MVa-485.mp4"/>
      </View>
    );
  }
}


var styles = StyleSheet.create({
  video: {
      flex: 1,
      flexDirection: 'row',
      height: 400,
    }
})

module.exports = VideoScreen;

Hope this is of help, A list of his own references is given in the article.

本文标签： javascriptReact Native Android Webview VideoStack Overflow