ReactNative绑定优酷SDK需要用到两部分知识:

  • 优酷本身的sdk绑定;
  • RN与原生界面的交互;

效果:

RN版本:0.49.3

代码更新日期:2017.10.26

下文也根据绑定需要分为两部分:

  一、优酷sdk绑定;

  二、RN与原生页面的交互;

一、优酷SDK绑定

1.优酷云平台创建应用,获取到client_id和client_secret;

  申请地址:http://cloud.youku.com/app

  如图:

2.引入sdk:

在目录app/libs加入优酷sdk:mma_sdk.jar、utdid4all-1.1.5.5.jar、YoukuPlayerOpenSDK-release.aar,sdk下载地址:http://cloud.youku.com/down/play

在目录app/build.gradle里面添加下面两段配置:

android {
// ... 之前本身配置,下面为添加的配置
//添加libs目录配置
repositories {
flatDir {
dirs 'libs'
}
}
sourceSets {
main {
jniLibs.srcDirs = ['libs'];
}
} } dependencies {
// ... 之前本身配置,下面为添加的配置
//公共库
compile 'com.alibaba:fastjson:1.1.56.android'
compile 'com.nostra13.universalimageloader:universal-image-loader:1.9.5'
//sdk
compile(name: 'YoukuPlayerOpenSDK-release', ext: 'aar')
}

3.在MainApplication.java初始化优酷播放代码:

import com.youku.cloud.player.YoukuPlayerConfig;  

  //请在这里输入你的应用的clientId,clientSecret
public static final String CLIENT_ID_WITH_AD = "e7e4d0ee1591b0bf";
public static final String CLIENT_SECRET_WITH_AD = "1fbf633f8a55fa1bfabf95729d8e259a"; @Override
public void onCreate() {
super.onCreate();
SoLoader.init(this, /* native exopackage */ false); YoukuPlayerConfig.setClientIdAndSecret(CLIENT_ID_WITH_AD,CLIENT_SECRET_WITH_AD);
YoukuPlayerConfig.onInitial(this);
YoukuPlayerConfig.setLog(false);
}

4.新建Activity和后置类;

页面代码:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.gangguwang.yewugo.YKPlayerActivity"
android:orientation="vertical"> <com.youku.cloud.player.YoukuPlayerView
android:id="@+id/baseview"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true" >
</com.youku.cloud.player.YoukuPlayerView> </LinearLayout>

后置类代码:

package com.gangguwang.yewugo;

import android.content.Intent;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.util.Log;
import android.view.View;
import android.widget.Button;
import android.widget.Toast;
import android.text.TextUtils; import com.youku.cloud.player.YoukuPlayerConfig;
import com.youku.cloud.player.YoukuPlayerView;
import com.youku.cloud.utils.Logger;
import com.youku.cloud.module.PlayerErrorInfo;
import com.youku.cloud.player.PlayerListener;
import com.youku.cloud.player.VideoDefinition;
import com.youku.cloud.utils.ValidateUtil;
import com.youku.download.DownInfo; public class NativeActivity extends AppCompatActivity { private YoukuPlayerView youkuPlayerView;
private String vid="XMzA1NzYwMTQxNg==";
private String password="";
private boolean local = false; @Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_native);
// Intent mIntent=getIntent();
// if(mIntent!=null) {
// Toast.makeText(this,"请求参数:"+mIntent.getStringExtra("params"),Toast.LENGTH_SHORT).show();;
// }
// Button btn_two=(Button)this.findViewById(R.id.btn_two);
// //btn_two.setVisibility(View.GONE); //隐藏按钮
// btn_two.setOnClickListener(new View.OnClickListener() {
// @Override
// public void onClick(View v) {
// Intent mIntent=new Intent(NativeActivity.this,MainActivity.class);
// mIntent.putExtra("data","你是123...");
// NativeActivity.this.startActivity(mIntent);
// NativeActivity.this.finish();
// }
// });
youkuPlayerView = (YoukuPlayerView)findViewById(R.id.baseview);
// 初始化播放器
youkuPlayerView.attachActivity(this);
youkuPlayerView.setPreferVideoDefinition(VideoDefinition.VIDEO_HD);
youkuPlayerView.setPlayerListener(new MyPlayerListener());
youkuPlayerView.setShowFullBtn(true);
autoplayvideo();
} private void autoplayvideo() {
if (local) {
youkuPlayerView.playLocalVideo(vid);
} else {
if (TextUtils.isEmpty(password)) {
youkuPlayerView.playYoukuVideo(vid);
} else {
youkuPlayerView.playYoukuPrivateVideo(vid, password);
}
}
} @Override
protected void onPause() {
super.onPause();
// 必须重写的onPause()
youkuPlayerView.onPause();
} @Override
protected void onResume() {
super.onResume();
// 必须重写的onResume()
youkuPlayerView.onResume();
} @Override
protected void onDestroy() {
super.onDestroy();
// 必须重写的onDestroy()
youkuPlayerView.onDestroy();
} // 添加播放器的监听器
private class MyPlayerListener extends PlayerListener {
@Override
public void onComplete() {
// TODO Auto-generated method stub
super.onComplete();
} @Override
public void onError(int code, PlayerErrorInfo info) {
// TODO Auto-generated method stub
//txt1.setText(info.getDesc());
} @Override
public void OnCurrentPositionChanged(int msec) {
// TODO Auto-generated method stub
super.OnCurrentPositionChanged(msec);
} @Override
public void onVideoNeedPassword(int code) {
// TODO Auto-generated method stub
super.onVideoNeedPassword(code);
} @Override
public void onVideoSizeChanged(int width, int height) {
// TODO Auto-generated method stub
super.onVideoSizeChanged(width, height);
}
} }

5.配置AndroidManifest.xml

5.1:给你的播放器Activity加上监听屏幕旋转的语句

<activity android:name=".NativeActivity"
android:configChanges="orientation|keyboard|keyboardHidden|screenSize|screenLayout|uiMode"
android:exported="true"
android:launchMode="singleTask" />

5.2:添加权限

<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
<uses-permission android:name="android.permission.ACCESS_WIFI_STATE" />
<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.READ_PHONE_STATE" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
<uses-permission android:name="android.permission.WAKE_LOCK" />
<uses-permission android:name="com.android.launcher.permission.READ_SETTINGS" />
<uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW" />
<uses-permission android:name="android.permission.CHANGE_WIFI_MULTICAST_STATE" />
<uses-permission android:name="android.permission.INTERACT_ACROSS_USERS_FULL" />

到此,优酷播放的sdk已经配置完毕。

二、RN与原生页面的互交

使用NativeModules模块互交,本章分为:

  1.RN调用;

  2.创建中间交互类IntentModule.java、IntentReactPackage.java;

  3.使用反射和Intent进行通知原生界面;

1.RN调用代码:

<Button
onPress={() => {
NativeModules.IntentModule.startActivityFromJS('你的包名.NativeActivity', '参数');
}}
title=" 播 放 "
color="#841584"
/>

2.创建中间交互类

a).注册原生模块类 IntentReactPackage.java 代码如下:

package com.gangguwang.yewugo;

import com.facebook.react.ReactPackage;
import com.facebook.react.bridge.JavaScriptModule;
import com.facebook.react.bridge.NativeModule;
import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.uimanager.ViewManager; import java.util.Arrays;
import java.util.Collections;
import java.util.List; public class IntentReactPackage implements ReactPackage {
@Override
public List<NativeModule> createNativeModules(ReactApplicationContext reactContext) {
return Arrays.<NativeModule>asList(
new IntentModule(reactContext)
);
}
// @Override
// public List<Class<? extends JavaScriptModule>> createJSModules() {
// return Collections.emptyList();
// } @Override
public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {
return Collections.emptyList();
}
}

代码解读:固定的api固定的方法必须重写createNativeModules和createViewManagers方法,只是把另一个交互类IntentModule注册到createNativeModules里面。

b).创建你的RN交互暴露方法类 IntentModule.java,代码如下:

package com.gangguwang.yewugo;

import android.app.Activity;
import android.content.Intent;
import android.text.TextUtils; import com.facebook.react.bridge.Callback;
import com.facebook.react.bridge.JSApplicationIllegalArgumentException;
import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.bridge.ReactContextBaseJavaModule;
import com.facebook.react.bridge.ReactMethod; public class IntentModule extends ReactContextBaseJavaModule { public IntentModule(ReactApplicationContext reactContext) {
super(reactContext);
} @Override
public String getName() {
return "IntentModule";
} /**
* Activtiy跳转到JS页面,传输数据
* @param successBack
* @param errorBack
*/
@ReactMethod
public void dataToJS(Callback successBack, Callback errorBack){
try{
Activity currentActivity = getCurrentActivity();
String result = currentActivity.getIntent().getStringExtra("data");
if (TextUtils.isEmpty(result)){
result = "没有数据";
}
successBack.invoke(result);
}catch (Exception e){
errorBack.invoke(e.getMessage());
}
}
/**
* 从JS页面跳转到原生activity 同时也可以从JS传递相关数据到原生
* @param className
* @param params
*/
@ReactMethod
public void startActivityFromJS(String className, String params){
try{
Activity currentActivity = getCurrentActivity();
if(null!=currentActivity){
Class toActivity = Class.forName(className);
Intent intent = new Intent(currentActivity,toActivity);
//intent.setFlags(Intent.FLAG_ACTIVITY_NEW_TASK);
intent.putExtra("params", params);
currentActivity.startActivity(intent);
} }catch(Exception e){
throw new JSApplicationIllegalArgumentException("不能打开Activity : "+e.getMessage());
}
} /**
* 从JS页面跳转到Activity界面,并且等待从Activity返回的数据给JS
* @param className
* @param params
* @param requestCode
* @param successBack
* @param errorBack
*/
@ReactMethod
public void startActivityFromJSGetResult(String className, String params, int requestCode, Callback successBack, Callback errorBack){
try {
Activity currentActivity = getCurrentActivity();
if(currentActivity != null) {
Class toActivity = Class.forName(className);
Intent intent = new Intent(currentActivity,toActivity);
//intent.setFlags(Intent.FLAG_ACTIVITY_NEW_TASK);
intent.putExtra("params", params);
currentActivity.startActivityForResult(intent,requestCode);
// //进行回调数据
// successBack.invoke(MainActivity.mQueue.take());
}
} catch (Exception e) {
errorBack.invoke(e.getMessage());
e.printStackTrace();
}
} // /**
// * 必须添加反射注解不然会报错
// * 这个方法就是ReactNative将要调用的方法,会通过此类名字调用
// * @param msg
// */
// @ReactMethod
// public void callNativeMethod(String msg) {
// Toast.makeText(mContext, msg, Toast.LENGTH_SHORT).show();
// //startActivityForResult(myIntent, 1);
// } }

c).在MainApplication.java里面设置交互类IntentReactPackage

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

3.使用反射和Intent进行通知原生界面;

在IntentModule已经体现了,核心代码:

Activity currentActivity = getCurrentActivity();
if(null!=currentActivity){
Class toActivity = Class.forName(className);
Intent intent = new Intent(currentActivity,toActivity);
intent.putExtra("params", params);
currentActivity.startActivity(intent);
}

到此为止已经全部大功告成!源码地址:https://github.com/vipstone/react-native-youku

react-native绑定优酷SDK播放视频-附效果和git源码的更多相关文章

  1. react-native绑定优酷SDK-附效果图和源码

    ReactNative绑定优酷SDK需要用到两部分知识: 优酷本身的sdk绑定: RN与原生界面的交互: 效果: RN版本:0.49.3 代码更新日期:2017.10.26 下文也根据绑定需要分为两部 ...

  2. 怎样获取优酷站内视频的MP4格式地址,嵌入到手机页面播放

    最近的有关项目需要使用video标签播放视频,并且视频的路径src是优酷里面的视频,所以需要得到优酷里面的mp4路径才能播放. 但是在网上查了下资料,看到优酷的播放格式是一个m3u8文件,如图所示: ...

  3. Android-调用优酷SDK上传视频

    最近在研究用优酷的SDK来进行视频上传的功能,由于优酷的SDK只是提供了一个上传的sample code,没有涉及到授权的过程,对于新手来说,可能非常棘手,现在分享一下我的思路:   程序实现前我们先 ...

  4. 爱斯达M2C服装定制系统介绍—在线播放—优酷网,视频高清在线观看

    爱斯达M2C服装定制系统介绍-在线播放-优酷网,视频高清在线观看 视频: 爱斯达M2C服装定制系统介绍

  5. React Native绑定微信分享/登录/支付(演示+实现步骤+注意事项)

    React Native(以下简称RN)绑定微信分享/微信登录/微信支付的实现演示+源码+注意事项!微信的调用大同小异,本文实现了微信的分享功能,其他功能可以在链接文档里面找到具体的方法. 本文分文三 ...

  6. Android高级控件(四)——VideoView 实现引导页播放视频欢迎效果,超级简单却十分的炫酷

    Android高级控件(四)--VideoView 实现引导页播放视频欢迎效果,超级简单却十分的炫酷 是不是感觉QQ空间什么的每次新版本更新那炫炫的引导页就特别的激动,哈哈,其实他实现起来真的很简单很 ...

  7. 阿里云视频直播API签名机制源码

    阿里云视频直播API签名机制源码 本文展示:通过代码实现下阿里视频直播签名处理规则 阿里云视频直播签名机制,官方文档链接:https://help.aliyun.com/document_detail ...

  8. php解析优酷网上的视频资源去广告

    1.过程原理解析: 一.准备工作 所谓工欲善其事必先利其器,做好破解的准备工作会令你事半功倍. 1.首先准备一个Http抓包工具,PC上推荐Fiddler或者Postman,iOS上推荐Surge 2 ...

  9. wordpress如何利用插件添加优酷土豆等视频到自己的博客上

    wordpress有时候需要添加优酷.土豆等网站的视频到自己的博客上,传统的分享方法不能符合电脑端和手机端屏幕大小的需求,又比较繁琐,怎样利用插件的方法进行添加呢,本视频向你介绍一款这样的插件——Sm ...

随机推荐

  1. 201521123121 《Java程序设计》第12周学习总结

    1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结多流与文件相关内容. Java流(Stream).文件(File)和IO Java.io包几乎包含了所有操作输入.输出需要的类.所有 ...

  2. 201521123028 《Java程序设计》第11周学习总结

    1. 本周学习总结 关于互斥同步访问 synchronized关键字 -wait.notify和notifyAll Lock和Condition方法 -condition.await() //类似ob ...

  3. 201521123014《Java程序设计》第13周学习总结

    1. 本周学习总结 思维导图: 2. 书面作业 Q1. 网络基础 1.1 比较ping www.baidu.com与ping cec.jmu.edu.cn,分析返回结果有何不同?为什么会有这样的不同? ...

  4. 控制结构(3) 状态机(state machine)

    // 上一篇:卫语句(guard clause) // 下一篇:局部化(localization) 基于语言提供的基本控制结构,更好地组织和表达程序,需要良好的控制结构. 前情回顾 上次分析了guar ...

  5. Java中的类型转换(Integer、Long、String)

    这段时间将项目中一个模块参照C++源代码,实现一个JAVA版.主要功能是将一些字段信息转换为String类型,传输后可以进行解析. Integer.Long转为String,Java本身提供了这种转换 ...

  6. 全面了解Android热修复技术

    WeTest 导读 本文探讨了Android热修复技术的发展脉络,现状及其未来. 热修复技术概述 热修复技术在近年来飞速发展,尤其是在InstantRun方案推出之后,各种热修复技术竞相涌现.国内大部 ...

  7. 在Storyboard中为UITableView添加Header和Footer

    我在这里所说的Header和Footer并不是sectionHeader和sectionFooter,而是指UITableView的tableHeaderView和tableFooterView,这两 ...

  8. margin:0px auto和text-align:center区别

    (1)margin:0px auto :作用于块级元素,对块级元素进行居中 (2)text-align:center:作用于内联元素,必须放在要居中的内联元素所在的块级元素. 例: (1) <d ...

  9. HDU1142 A Walk Through the Forest(最短路+DAG)

    A Walk Through the Forest Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/O ...

  10. [js插件开发教程]一步步开发一个可以定制配置的隔行变色小插件

    隔行变色功能,不用js,直接用css伪类就可以做,这个实例可以作为js插件开发很好的入门级实例.本文实现的隔行变色包括以下功能: 1,支持2种常用结构共存( div元素 和 表格类型 ) 2,一个页面 ...