kulyk / react-native-android-wv-video

Android WebView component supporting playing HTML5 videos at fullscreen

react-native-android-wv-video

Android WebView component supporting playing HTML5 videos at fullscreen

Installation

Automatic

npm install react-native-android-wv-video --save

react-native link react-native-android-wv-video

Manual

in settings.gradle

include ':react-native-android-wv-video'
project(':react-native-android-wv-video').projectDir = file('../node_modules/react-native-android-wv-video/android')

in android/app/build.gradle

dependencies {
    compile project(':react-native-android-wv-video')

in MainApplication.java add package to getPackages()

import com.akulyk.react.androidwebview.AndroidWebViewPackage;

// ...

@Override
protected List<ReactPackage> getPackages() {
    return Arrays.<ReactPackage>asList(
        new MainReactPackage(),
        // ... ,
        new AndroidWebViewPackage()
   );
}

Usage

Same API as for React Native's WebView

import AndroidWebView from 'react-native-android-wv-video'

...

return <AndroidWebView source={{ uri: html5VideoUrl }} {...restProps} />

Implementation

The problem with full-screen support in Android was resolved by changing the WebChromeClient in a WebView.

WebView component uses the same code and has the same API, as React Native's own WebView, the only thing, that was changed

To Do

[ ] - Add support for horizontal full-screen mode

react-native-android-wv-video's Issues

How to callback click to fullscreen button?

Hello,

Same title, how to use callback when click to fullscreen button on WebView?

Support for horizontal full-screen mode

[ ] - Add support for horizontal full-screen mode

Is possible to update the library to support fullscreen in the landscape mode.
Thank you for your work!

add code like this maybe better

package com.akulyk.react.androidwebview;

import android.app.Activity;
import android.content.pm.ActivityInfo;
import android.graphics.Color;
import android.view.Gravity;
import android.view.View;
import android.view.ViewGroup;
import android.view.Window;
import android.view.WindowManager;
import android.webkit.WebChromeClient;
import android.webkit.WebView;
import android.widget.FrameLayout;

import static android.view.ViewGroup.LayoutParams;

/**

• Provides support for full-screen video on Android
  */
  public class VideoEnabledWebChromeClient extends WebChromeClient {

  private final FrameLayout.LayoutParams FULLSCREEN_LAYOUT_PARAMS = new FrameLayout.LayoutParams(
  LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT, Gravity.CENTER);

  private WebChromeClient.CustomViewCallback mCustomViewCallback;

  private Activity mActivity;
  private View mWebView;
  private View mVideoView;

  public VideoEnabledWebChromeClient(Activity activity, WebView webView) {
  mWebView = webView;
  mActivity = activity;
  }

  @OverRide
  public void onShowCustomView(View view, CustomViewCallback callback) {
  if (mVideoView != null) {
  callback.onCustomViewHidden();
  return;
  }

   // Store the view and it's callback for later, so we can dispose of them correctly
   mVideoView = view;
   mCustomViewCallback = callback;
  
   view.setBackgroundColor(Color.BLACK);
  
   getRootView().addView(view, FULLSCREEN_LAYOUT_PARAMS);
  
   mWebView.setVisibility(View.GONE);
   if(mActivity!=null){
       mActivity.setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_LANDSCAPE);
       WindowManager.LayoutParams params = mActivity.getWindow().getAttributes();
       params.flags |= WindowManager.LayoutParams.FLAG_FULLSCREEN;
       mActivity.  getWindow().setAttributes(params);
       mActivity.  getWindow().addFlags(WindowManager.LayoutParams.FLAG_LAYOUT_NO_LIMITS);
   }
  

  }

  @OverRide
  public void onHideCustomView() {
  if (mVideoView == null) {
  return;
  }

   mVideoView.setVisibility(View.GONE);
  
   // Remove the custom view from its container.
   getRootView().removeView(mVideoView);
   mVideoView = null;
   mCustomViewCallback.onCustomViewHidden();
  
   mWebView.setVisibility(View.VISIBLE);
   if(mActivity!=null){
       mActivity.setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_PORTRAIT);
       final WindowManager.LayoutParams attrs =mActivity.getWindow().getAttributes();
       attrs.flags &= (~WindowManager.LayoutParams.FLAG_FULLSCREEN);
       mActivity.getWindow().setAttributes(attrs);
       mActivity.getWindow().clearFlags(WindowManager.LayoutParams.FLAG_LAYOUT_NO_LIMITS);
   }
  

  }

  private ViewGroup getRootView() {
  return ((ViewGroup) mActivity.findViewById(android.R.id.content));
  }
  }

Path error & RNAndroidWebView does not exist.

1. path error

// Current README
include ':react-native-android-wv-video'
project(':react-native-android-wv-video').projectDir = file('../node_modules/react-native-android-wv-video/android')

// Right
include ':react-native-android-wv-video'
project(':react-native-android-wv-video').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-android-wv-video/android/app')

2. RNAndroidWebView does not exist.

Full-Screen goes blank when playing video in full-screen

Hello,
I am using this package it helps with full screen video playing on android devices. There are 2 problem that I would like to ask:

Issue 1 -
My code is -

<AndroidWebView
ref="videoView"
scalesPageToFit={true}
javaScriptEnabled={true}
allowsInlineMediaPlayback={true}
//ignoreSslError={true}
source={{uri: item.node.newsUrl + '&fs=1'}}
/>

When I click on Full screen button it start video in landscape mode in full-screen. but after 1 second or 2 my screen goes blank and no turning back from there. I have to kill the app.

CSS:
newsVideo: {
overflow: 'hidden',
alignSelf: 'center',
width: deviceWidth,
height: 225,
borderRadius: 0,
marginTop: 0,
borderColor: 'transparent',
},
Please suggest a solution if you can think of any. Thanks.

Issue 2 - I would like to know if there is any way to get data when I click on this webview, basically detect the click on video.

Thanks

After Linking, Error

installed it
then ran:
react-native link react-native-android-wv-video

Then after running react-native run-android it won't build.

react-native 0.55.1
react 16.3.1