Javascript React本机Android Webview视频

我正在使用React Native创建一个Android/iOS应用程序，并尝试在WebView组件中播放视频。这段视频在iOS上播放得很好，但我在android网络视图中播放时遇到了麻烦

我遇到过一些类似这样的线程（），它们声称这是Android上相当常见的问题，可以通过导入WebChromeClient并在webview上设置该选项来解决，如下所示：

mainWebView.setWebChromeClient(new WebChromeClient());

但几乎所有这些线程都是严格地构建原生Android应用程序，而不是使用React native

有人知道如何在React Native中使用此功能吗？

我指的是

他在信中写道

显然，应用程序最具挑战性的部分是处理 实时视频流，因为它需要切换流的视频 质量基于可用的互联网带宽。但是第一件事 第一 — 我需要一个RN本地组件来显示任何视频流。那里 是RN的流行视频组件，但仅支持iOS。我 决定围绕Vitamio player编写自己的RN组件包装。信息技术 是著名的开源项目，支持RTMP协议 用于移动应用程序

我以前没有编写原生RN组件的经验，所以我去了 直接访问RN文档，了解如何创建一个。我所指的指南 称为本机UI组件，iOS也有类似的组件。那里 以下是需要声明的几个重要部分：

实现自定义ViewManager（Android部分）
注册ViewManager（Android部分）
实现JavaScript模块
注册模块（Android部分）

参考声明的示例实现自定义ViewManager VideoView for Vitamio这就是VideoView声明的本质 看起来像：

代码看起来非常简单。除了传递推荐信之外 要将活动导入LibsChecker，VideoView需要视频的路径 MediaController的流和实例

添加createViewInstance实现：

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;
}

注册ViewManager 最后一个Java步骤是向应用程序注册ViewManager，这是通过应用程序包成员函数CreateViewManager实现的：

注册模块，尽管在步骤中未按要求提及 官方文档我们需要它，因为它引用了根 活动：package com.vitamio_演示

DeclareVideoView：

var VitamioView=require（'react-native-android-vitamio'）；
类VideoScreen扩展了React.Component{
render（）{
返回(
);
}
}
var styles=StyleSheet.create({
视频：{
弹性：1，
flexDirection:'行'，
身高：400，
}
})
module.exports=视频屏幕；

---

希望这能有所帮助，文章中列出了他自己的参考资料。

你尝试过这个插件吗？是的，这与我想要的略有不同。我希望在webview中显示来自和在线视频播放器的嵌入链接，这样我就可以使用他们的web播放器以及内置的所有功能（回滚30秒、全屏等）。React native video只是一个允许播放视频的组件，但需要我直接链接到源代码，并为播放器重新创建所有UI。如果我不能解决这个问题，我可能会这样做。谢谢你！你们有vsn.27吗？它支持android。。是的，我在用。webview本身运行良好。它只是试图在其中播放HTML5视频，这会中断。我也有同样的问题，你有没有让它工作过？

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

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

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;
}

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

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

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

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

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

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

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

public class MainActivity extends ReactActivity {

    /**
     * Returns the name of the main component registered from JavaScript.
     * This is used to schedule rendering of the component.
     */
    @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
      );
    }
}

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

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

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


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

module.exports = VideoScreen;