首页 > 解决方案 > 如何使 HTML 视频元素缓冲使用 AssetManager 加载的资产

问题描述

我目前正在使用 Ionic 创建一个应用程序。因为 Google Playstore 中的 App Bundle 大小限制为 150 MB,所以我使用Play Asset Delivery来加载更大的资产,例如图像和视频。

我使用 Angulars 打字稿与 HTML 交互,但要加载 Aaset,我需要使用 java 来访问像 AssetManager 这样的 Android 平台 API。为此,我编写了一个 Cordova 插件。

加载和处理一项资产的插件的 Java 代码:

String str = "";
Context contexta = this.cordova.getActivity().getApplicationContext();
AssetManager assetManager = contexta.getAssets();
InputStream is = assetManager.open(path);
byte[] imageBytes = new byte[is.available()];//available() gives the required size for the array
is.read(imageBytes, 0,imageBytes.length);
is.close();
str = Base64.encodeToString(imageBytes, Base64.DEFAULT);
callbackContext.success(str); //str gets passed to the typescript callback function

typescript 中的回调函数如下所示:

(imgData) => { //parameter str is send by callbackContext.success() in the java code
    imgElement.src = "data:image/png;base64,"+imgData; //HTML img element
}

(HTML 元素无法通过路径访问资产,例如 src="assets/img1.png" 他们需要通过 java 加载)

此代码工作正常。但问题是,更大的资产(如 50 MB 视频)需要完全加载,然后作为 base64 编码的数据字符串发送,这将花费大量时间。

Afaik HTML 视频和音频元素使用缓冲区仅首先加载重要部分以尽快启动媒体,而不会占用太多内存。

有没有办法做到这一点?也许以某种方式将视频元素发送到将其与缓冲区连接绑定的 java 插件,或者每隔几帧调用一次插件以调用视频的另一部分(有点像创建自己的缓冲区)。你能帮我解决这个问题吗?

(AssetsManager打开方式默认使用ACCESS_STREAMING访问方式,还有三种,其中一种叫做ACCESS_BUFFER。)

Android SDK Tools : 26.1.1
NodeJS            : v12.18.3
npm               : 6.14.6
OS                : Windows 10
Gradle            : 6.6.1
Ionic Framework   : @ionic/angular 5.3.3
Cordova Platforms : android 9.0.0
@angular-devkit/build-angular : 0.1000.8
@angular-devkit/schematics    : 10.0.8
@angular/cli                  : 10.0.8
@ionic/angular-toolkit        : 2.3.3

标签: androidangularhtml5-videocordova-pluginsandroid-assetmanager

解决方案


推荐阅读