devbox
笔触狂放9
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

手把手教你uniapp原生插件开发-（无限制缓存）video控件的实现_uniapp安装uni-video插件

作者：笔触狂放9 | 2024-05-24 14:37:56

赞

踩

uniapp安装uni-video插件

        最近开始利用零碎时间整理以往项目中的比较有亮点的技术，先前有使用uniapp原生插件开发的方式实现过video控件，个人认为比较经典，拿来和大家分享。

项目背景

       官方原先已经有video控件了，为何还要自己开发。因为项目中有个需求就是可以自定义视频缓存大小，就是当视频大小小于设定的缓存大小时，重播视频不需要再请求网络资源。然而官方的控件，限制死了缓存大小是100M（见下图），而客户的要求是300M，只能自己来搞了。

        uniapp原生插件开发，必须同时掌握uniapp和原生的开发技术。因为这个项目只需要在安卓设备上运行，所以原生部分只需要安卓开发技术。

        下面按我的介绍一步步进行原生插件开发：

一、下载离线SDK

        官方有个介绍原生插件开发的链接：

          对于有搞过安卓开发的，只需要下载App离线SDK。Android 离线SDK - 正式版 | uni小程序SDK

 SDK包中有个UniPlugin-Hello-AS项目，把他解压出来，用android studio打开、

 

 这个项目中有个文件夹unipluginDemo，把他拖入HBuilderX


 

 二、研究官方demo

我们简要研究一下官方demo，他提供了component（UI相关）和module（UI无关）两种模式，我们的video控件适合用前者。

我们看一下ext-component.nvue代码，他实现了一个自定义的文本框控件 

我们看一下原生部分的代码

简要说一下他的功能：

1、当控件初始化完毕，他会执行原生下的setTel方法，把H5中的tel属性值赋给原生的TextView控件，赋值完毕会触发onTel的回调，执行H5中的onTel事件。

2、他可以响应单击事件，调用原生下的clearTel方法，清空掉原生的TextView控件内容。

三、运行官方demo

因为官方在基座中加入了app_id校验，我们需要配置一下才能跑起来。

（一）、获取appid

 双击manifest.json，基础配置中的appid要重新获取

（二）、获取appkey

 然后去开发者后台配置dcloud_appkey，通过appid搜索刚才的应用

 点击【应用名称】（蓝色字体）进入应用信息，点击【各平台信息】->【新增】

所属平台Android App

包名com.android.UniPlugin

SHA1【填自己打包证书的SHA1】

SHA256【填自己打包证书的SHA256】

提交后出现一条记录，点击【创建】

 然后点击【查看】

 Android：后面的内容就是APP key，复制一下

 

 替换掉原生工程中AndroidManifest.xml中的对应位置

（三）、生成离线打包资源

uniapp项目需要打包成原生项目下可用的资源，右击项目名称【发行】、【原生App-本地打包】、【生成本地打包App资源】

 控制台下面会出现打包进度，最终会生成一个链接，点击进行会跳转到对应目录

 

 我们把这个文件夹剪切移动到原生项目的\app\src\main\assets\apps位置下面，同时删掉__UNI__E文件夹（这个没用了）

我们调整一下\app\src\main\assets\data\dcloud_control.xml文件中appid的值

（四）、配置调试证书

我个人习惯调试证书和打包证书是同个证书，我们在build.gradle中对signingConfigs进行调整

config {
    storeFile file('证书路径')
    storePassword '密钥库密码'
    keyAlias '证书别名'
    keyPassword '证书密码'
}

点击Sync Now进行Gradle重建

（五）、运行官方demo

        搞了这么久，终于做完了运行前的所有准备工作。如果Gradle重建没有报错，就可以看到顶部出现了运行的按钮。我们选择一下左边的调试设备，点击运行。

首页点击【扩展component】

出现了文本框控件，我们点击一下这个控件，发现字没了，说明执行了清空内容事件。

四、参照官方demo开发video控件

        官方的demo是封装一个原生TextView，我们的目标是封装一个原生VideoView。不过我在实际项目中是封装了一个RelativeLayout，背景设置为黑色，在里面加入了VideoView（垂直居中于父容器）。因为我试过，如果是单纯封装VideoView，他在播放视频的时候会缩到顶部，并且留下很大一块白色区域。

（一）、原生部分

1、在uniplugin_component模块中src\main\java\io\dcloud增加两个文件：

Singleton.java

  1. package io.dcloud.uniplugin;
  2.  
  3. import android.content.Context;
  4.  
  5. import com.danikula.videocache.HttpProxyCacheServer;
  6.  
  7. public class Singleton {
  8.     private final static Singleton s = new Singleton();
  9.     private Singleton(){
  10.     }
  11.     public static Singleton getInstance(){
  12.         return s;
  13.     }
  14.  
  15.     private HttpProxyCacheServer proxy;
  16.  
  17.     public static HttpProxyCacheServer getProxy(Context context) {
  18.         return getInstance().proxy == null ? (getInstance().proxy = getInstance().newProxy(context)) : getInstance().proxy;
  19.     }
  20.  
  21.     private HttpProxyCacheServer newProxy(Context context) {
  22.         //1G缓存
  23.         return new HttpProxyCacheServer.Builder(context)
  24.                 .maxCacheSize(1024 * 1024 * 1024)
  25.                 .build();
  26.     }
  27. }

 MyVideoView.java 

  1. package io.dcloud.uniplugin;
  2.  
  3. import android.Manifest;
  4. import android.annotation.SuppressLint;
  5. import android.app.Activity;
  6. import android.content.Context;
  7. import android.content.pm.PackageManager;
  8. import android.graphics.Color;
  9. import android.media.MediaPlayer;
  10. import android.os.Build;
  11. import android.os.Handler;
  12. import android.os.Message;
  13. import android.view.ViewGroup;
  14. import android.widget.MediaController;
  15. import android.widget.RelativeLayout;
  16. import android.widget.SeekBar;
  17. import android.widget.Toast;
  18. import android.widget.VideoView;
  19.  
  20. import androidx.annotation.NonNull;
  21. import androidx.core.app.ActivityCompat;
  22.  
  23. import com.danikula.videocache.HttpProxyCacheServer;
  24.  
  25. import java.util.ArrayList;
  26. import java.util.HashMap;
  27. import java.util.List;
  28. import java.util.Map;
  29.  
  30. import io.dcloud.feature.uniapp.UniSDKInstance;
  31. import io.dcloud.feature.uniapp.annotation.UniJSMethod;
  32. import io.dcloud.feature.uniapp.ui.action.AbsComponentData;
  33. import io.dcloud.feature.uniapp.ui.component.AbsVContainer;
  34. import io.dcloud.feature.uniapp.ui.component.UniComponent;
  35. import io.dcloud.feature.uniapp.ui.component.UniComponentProp;
  36. //实现了视频缓存功能
  37. public class MyVideoView extends UniComponent<RelativeLayout> {
  38.     private VideoView mVideoView;
  39.     private RelativeLayout mRelativeLayout;
  40.     private MediaPlayer mMediaPlayer;
  41.     private int mCurrentPosition=0;
  42.     private String[] permissions = {
  43.             Manifest.permission.READ_EXTERNAL_STORAGE,
  44.             Manifest.permission.WRITE_EXTERNAL_STORAGE,
  45.     };
  46.     private Activity mActivity;
  47.     private Context mContext;
  48.  
  49.     private Boolean autoplay=false;
  50.     private String src="";
  51.     private static final int REQUEST_PERMISSIONS = 1001;
  52.     private static final String TAG = "MyVideoView";
  53.  
  54.     public MyVideoView(UniSDKInstance instance, AbsVContainer parent, AbsComponentData basicComponentData) {
  55.         super(instance, parent, basicComponentData);
  56.     }
  57.  
  58.     //初始化控件
  59.     @Override
  60.     protected RelativeLayout initComponentHostView(Context context) {
  61.         mContext = context;
  62.         mActivity = (Activity) context;
  63.  
  64.         mRelativeLayout=new RelativeLayout(context);
  65.         mRelativeLayout.setLayoutParams(new RelativeLayout.LayoutParams
  66.                 (ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT));
  67.         mRelativeLayout.setBackgroundColor(Color.BLACK);
  68.         setBackgroundColor("white");//不加这句mRelativeLayout的背景色显示不出来，设置颜色可随意，原因未知
  69.  
  70.         mVideoView = new VideoView(context);//VideoView 不能设置背景色，否则只有声音，无法显示视频
  71.         // 设置播放控制面板
  72.         MediaController controller = new MediaController(context);
  73.         mVideoView.setMediaController(controller);
  74.  
  75.         RelativeLayout.LayoutParams lp1 = new RelativeLayout.LayoutParams
  76.                 (ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT);
  77.         lp1.addRule(RelativeLayout.CENTER_IN_PARENT, RelativeLayout.TRUE);//垂直居中
  78.         mRelativeLayout.addView(mVideoView, lp1);
  79.  
  80.         Map<String, Object> data = new HashMap<>();
  81.         Map<String, Object> detail = new HashMap<>();
  82.         detail.put("msg", "初始化完成");
  83.         data.put("detail", detail);
  84.         fireEvent("init", data);//回调JS控件初始化
  85.         checkPermission();
  86.  
  87.  
  88.         mVideoView.setOnPreparedListener(new MediaPlayer.OnPreparedListener() {
  89.             @Override
  90.             public void onPrepared(MediaPlayer mp) {
  91.                 mMediaPlayer=mp;
  92.             }
  93.         });
  94.  
  95.         mVideoView.setOnCompletionListener(new MediaPlayer.OnCompletionListener()
  96.         {
  97.             @Override
  98.             public void onCompletion(MediaPlayer mp)
  99.             {
  100.                 mMediaPlayer=mp;
  101.                 //播放结束后的动作
  102.                 Map<String, Object> data = new HashMap<>();
  103.                 Map<String, Object> detail = new HashMap<>();
  104.                 detail.put("msg", "播放完成");
  105.                 data.put("detail", detail);
  106.                 fireEvent("ended", data);//回调JS
  107.             }
  108.         });
  109.  
  110.         mVideoView.setOnErrorListener(new MediaPlayer.OnErrorListener() {
  111.             @Override
  112.             public boolean onError(MediaPlayer mp, int what, int extra) {
  113.                 mMediaPlayer=mp;
  114.                 // 处理播放错误
  115.                 Map<String, Object> data = new HashMap<>();
  116.                 Map<String, Object> detail = new HashMap<>();
  117.                 detail.put("errMsg", src+"播放错误");
  118.                 data.put("detail", detail);
  119.                 fireEvent("error", data);//回调JS
  120.                 mp.reset();//恢复，使得MediaPlayer重新返回到Idle状态
  121.                 return true; // 返回true表示错误已处理，不需要进一步处理
  122.             }
  123.         });
  124.  
  125.         return mRelativeLayout;
  126.     }
  127.  
  128.     @UniComponentProp(name = "src")
  129.     public void setSrc(String _src) {
  130.         src=_src;
  131.         HttpProxyCacheServer proxy = Singleton.getProxy(mContext);
  132.         String proxyUrl = proxy.getProxyUrl(_src);
  133.         mVideoView.setVideoPath(proxyUrl);
  134.         play();
  135.     }
  136.  
  137.     @UniJSMethod
  138.     public void play() {
  139.         mVideoView.start();
  140.         Map<String, Object> params = new HashMap<>();
  141.         Map<String, Object> number = new HashMap<>();
  142.         number.put("msg","开始播放"+src);
  143.         params.put("detail", number);
  144.         fireEvent("play", params);
  145.     }
  146.     @Override
  147.     public void onActivityResume() {
  148.         if(mMediaPlayer!=null && mCurrentPosition>0){
  149.             //跳到暂停位置并播放
  150.             mMediaPlayer.seekTo(mCurrentPosition);
  151.             mMediaPlayer.start();
  152.         }
  153.         super.onActivityResume();
  154.     }
  155.  
  156.     @Override
  157.     public void onActivityPause() {
  158.         if(mMediaPlayer!=null && mMediaPlayer.isPlaying()){
  159.             mMediaPlayer.pause();
  160.             //记录暂停位置
  161.             mCurrentPosition=mMediaPlayer.getCurrentPosition();
  162.         }
  163.         super.onActivityPause();
  164.     }
  165.  
  166.     @Override
  167.     public void onActivityDestroy() {
  168.         //停止播放视频
  169.         mVideoView.stopPlayback();
  170.         //释放MediaPlayer
  171.         releaseMediaPlayer();
  172.         // 释放VideoView
  173.         mVideoView.setOnPreparedListener(null);
  174.         mVideoView.setOnCompletionListener(null);
  175.         mVideoView.setOnErrorListener(null);
  176.         mVideoView.destroyDrawingCache();
  177.         super.onActivityDestroy();
  178.     }
  179.     private void releaseMediaPlayer(){//释放MediaPlayer
  180.         if (mMediaPlayer != null) {
  181.             mMediaPlayer.release();
  182.             mMediaPlayer = null;
  183.         }
  184.     }
  185.     private boolean checkPermission() {
  186.         if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.M) {
  187.             List<String> permissionList = new ArrayList<String>();
  188.             for (String s : permissions) {
  189.                 if (ActivityCompat.checkSelfPermission(mActivity, s) != PackageManager.PERMISSION_GRANTED) {
  190.                     permissionList.add(s);
  191.                 }
  192.             }
  193.             if (permissionList.size() > 0) {
  194.                 startRequestPermission(mActivity, (String[]) permissionList.toArray(new String[permissionList.size()]));
  195.                 return false;
  196.             }
  197.         }
  198.         return true;
  199.     }
  200.  
  201.     private void startRequestPermission(final Activity a, String[] permissionList) {
  202.         ActivityCompat.requestPermissions(a, permissionList, REQUEST_PERMISSIONS);
  203.     }
  204.  
  205.  
  206.     @Override
  207.     public void onRequestPermissionsResult(int requestCode, @NonNull String[] permissions, @NonNull int[] grantResults) {
  208.         super.onRequestPermissionsResult(requestCode, permissions, grantResults);
  209.         switch (requestCode) {
  210.             case REQUEST_PERMISSIONS:
  211.                 if (grantResults[2] != PackageManager.PERMISSION_GRANTED) {
  212.                     Toast.makeText(mActivity, "请到设置中打开应用的存储读权限", Toast.LENGTH_SHORT).show();
  213.                     return;
  214.                 }
  215.                 if (grantResults[3] != PackageManager.PERMISSION_GRANTED) {
  216.                     Toast.makeText(mActivity, "请到设置中打开应用的存储写权限", Toast.LENGTH_SHORT).show();
  217.                     return;
  218.                 }
  219.                 break;
  220.         }
  221.     }
  222.  
  223. }

2、在build.gradle引入AndroidVideoCache

//引入AndroidVideoCache
implementation 'com.danikula:videocache:2.7.1'

3、在dcloud_uniplugins.json加入插件配置

{
  "type": "component",
  "name": "video-view",
  "class": "io.dcloud.uniplugin.MyVideoView"
}

 （二）、H5部分

我们将原来的ext-component.nvue改成下面的内容

  1. <template>
  2. 	<div>
  3. 		<video-view :src="src" @init="videoInitCallback"
  4. 			@play="videoPlayCallback" @error="videoErrorCallback" @ended="videoEndCallback"
  5. 			:style="{ height: videoHeight  + 'px' }">
  6. 		</video-view>
  7. 	</div>
  8. </template>
  9.  
  10. <script>
  11. 	//nvue官方文档https://uniapp.dcloud.io/tutorial/nvue-outline.html
  12. 	//不支持百分比布局，所以需要通过js来获取全屏尺寸
  13. 	//不支持this.global
  14. 	let t = null;
  15. 	export default {
  16. 		components: {},
  17. 		data() {
  18. 			return {
  19. 				videoHeight: 0,
  20. 				src: '',
  21. 			}
  22. 		},
  23. 		onLoad() {
  24. 			t = this;
  25. 			const res = uni.getSystemInfoSync();
  26. 			t.videoHeight = parseInt(res.windowHeight);
  27. 			t.src = 'https://www.runoob.com/try/demo_source/movie.mp4';
  28. 		},
  29. 		onUnload() {
  30.  
  31. 		},
  32. 		methods: {
  33. 			videoInitCallback(e) { //控件初始化结束
  34. 				if (e.detail.msg) {
  35. 					uni.showToast({
  36. 						icon: 'none',
  37. 						title: e.detail.msg,
  38. 					})
  39. 				}
  40. 			},
  41. 			videoPlayCallback(e) { //控件绑定完资源准备开始播放
  42. 				if (e.detail.msg) {
  43. 					uni.showToast({
  44. 						icon: 'none',
  45. 						title: e.detail.msg,
  46. 					})
  47. 				}
  48. 			},
  49. 			videoErrorCallback(e) { //控件绑定完资源准备开始播放
  50. 				if (e.detail.msg) {
  51. 					uni.showToast({
  52. 						icon: 'none',
  53. 						title: e.detail.msg,
  54. 					})
  55. 				}
  56. 			},
  57. 			videoEndCallback(e) {
  58. 				if (e.detail.msg) {
  59. 					uni.showToast({
  60. 						icon: 'none',
  61. 						title: e.detail.msg,
  62. 					})
  63. 				}
  64. 			},
  65. 		}
  66. 	}
  67. </script>

 （三）、运行项目

我们可以看到自己封装的控件可以正常播放视频了。

五、项目源码

        项目源码也已经上传，链接在此。请自行下载后用android studio打开，里面的uniapp示例工程源码/unipluginDemo请用HBuilderX打开，参照【三、运行官方demo】里面的步骤对项目进行重新配置后才能运行，否则会提示【未配置appkey或配置错误】

附：一些问题解决方法：

（一）、UniPlugin-Hello-AS项目Gradle Builder失败。

可以尝试将

distributionUrl=https\://services.gradle.org/distributions/gradle-6.5-all.zip

改为

distributionUrl=https\://services.gradle.org/distributions/gradle-6.5-bin.zip

（二）、在原项目中正常，到了自己的项目中无法使用插件。

因为还有一些配置，也要同步到自己的项目中。

1、build.gradle加入一句话

// 添加uni-app插件
implementation project(':uniplugin_component')

2、settings.gradle加入一句话

include ':uniplugin_component'

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/笔触狂放9/article/detail/617847
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号