react native 实现surfaceview播放视频

本文在react native的js页面中调用android层写的surfaceview播放视频

---

1.我们搭建好rn环境后,创建rn项目并运行到设备上(本文省略),在项目的目录下 /android/app/src/main/java/com/项目名/ 下自定义一个surfaceview(mediaplayer也在其中)

package com.untitled;

import android.content.Context;
import android.media.MediaPlayer;
import android.net.Uri;
import android.view.SurfaceHolder;
import android.view.SurfaceView;

import java.io.IOException;

/**
 * Created by zjh on 17-7-20.
 */

public class MyPlay extends SurfaceView implements SurfaceHolder.Callback{
    private MediaPlayer player = new MediaPlayer();
    String uri="http://192.168.1.110:8080/background.mp4";//这是本人以本机搭的服务器,请务必换个url来测试
    SurfaceHolder holder;

    public MyPlay(Context context) {
        super(context);
        try {
            player.setDataSource(context, Uri.parse(uri));
            holder=this.getHolder();
            holder.addCallback(this);
            player.prepare();
            player.setOnPreparedListener(new MediaPlayer.OnPreparedListener() {
                @Override
                public void onPrepared(MediaPlayer mp) {
                    player.start();
                    player.setLooping(true);
                }
            });
        } catch (IOException e) {
            e.printStackTrace();
        }
    }

    public void vRestart(){
        player.start();
    }

    public void vPause(){
        player.pause();
    }

    @Override
    public void surfaceChanged(SurfaceHolder holder, int format, int width,int height) {

    }
    @Override
    public void surfaceCreated(SurfaceHolder holder) {
        player.setDisplay(holder);
    }
    @Override
    public void surfaceDestroyed(SurfaceHolder holder) {

    }
}

2.在android/app/src/main/java/com/项目名/ 下新建一个ReactVideo类,继承SimpleViewManager泛型为自己自定义的MyPlay

package com.untitled;

import com.facebook.react.bridge.ReadableArray;
import com.facebook.react.common.MapBuilder;
import com.facebook.react.uimanager.SimpleViewManager;
import com.facebook.react.uimanager.ThemedReactContext;

import java.util.Map;

import javax.annotation.Nullable;

public class ReactVideo extends SimpleViewManager<MyPlay> {
    private static final int COM