android h5 实现视频文件上传

<think>我们正在处理一个Android WebView中H5页面实现视频上传的问题。根据引用内容，我们了解到关键点在于WebView的配置和文件选择器的处理。以下是具体步骤： 1. **H5页面设置**：在HTML中使用`<input type="file">`并设置`accept`属性为视频类型（如`video/*`）以允许用户选择视频文件。 2. **WebView配置**：在Android端，我们需要配置WebView以支持文件选择，特别是重写`WebChromeClient`的`onShowFileChooser`方法，该方法在H5页面触发文件选择时被调用。 3. **权限处理**：需要动态申请存储和相机权限（因为视频可能通过相机录制）。 4. **处理文件选择结果**：通过`ActivityResult`获取用户选择的文件，并将结果返回给WebView。 具体实现如下： ### 1. 添加权限 在`AndroidManifest.xml`中添加以下权限： ```xml <uses-permission android:name="android.permission.INTERNET" /> <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" /> <uses-permission android:name="android.permission.CAMERA" /> ``` ### 2. 动态申请权限（针对Android 6.0+） 在Activity中检查并申请权限： ```java private static final int REQUEST_CODE_PERMISSIONS = 100; private String[] permissions = {Manifest.permission.CAMERA, Manifest.permission.READ_EXTERNAL_STORAGE}; private void checkPermissions() { if (ContextCompat.checkSelfPermission(this, permissions[0]) != PackageManager.PERMISSION_GRANTED || ContextCompat.checkSelfPermission(this, permissions[1]) != PackageManager.PERMISSION_GRANTED) { ActivityCompat.requestPermissions(this, permissions, REQUEST_CODE_PERMISSIONS); } } @Override public void onRequestPermissionsResult(int requestCode, @NonNull String[] permissions, @NonNull int[] grantResults) { super.onRequestPermissionsResult(requestCode, permissions, grantResults); if (requestCode == REQUEST_CODE_PERMISSIONS) { // 检查是否所有权限都被授予 boolean allGranted = true; for (int grantResult : grantResults) { if (grantResult != PackageManager.PERMISSION_GRANTED) { allGranted = false; break; } } if (!allGranted) { // 如果有权限被拒绝，可以提示用户 } } } ``` ### 3. 配置WebView并处理文件选择 ```java private WebView webView; private ValueCallback<Uri[]> filePathCallback; private final static int REQUEST_CODE_FILE = 101; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); checkPermissions(); webView = findViewById(R.id.webview); WebSettings settings = webView.getSettings(); settings.setJavaScriptEnabled(true); settings.setDomStorageEnabled(true); webView.setWebChromeClient(new WebChromeClient() { // For Android 5.0+ @Override public boolean onShowFileChooser(WebView webView, ValueCallback<Uri[]> filePathCallback, FileChooserParams fileChooserParams) { MainActivity.this.filePathCallback = filePathCallback; // 创建文件选择Intent Intent intent = fileChooserParams.createIntent(); try { startActivityForResult(intent, REQUEST_CODE_FILE); } catch (ActivityNotFoundException e) { // 处理没有文件选择器的情况 return false; } return true; } }); webView.loadUrl("https://your-h5-page-url"); } @Override protected void onActivityResult(int requestCode, int resultCode, @Nullable Intent data) { super.onActivityResult(requestCode, resultCode, data); if (requestCode == REQUEST_CODE_FILE) { if (filePathCallback != null) { if (resultCode == RESULT_OK && data != null) { // 获取选择的文件URI Uri uri = data.getData(); if (uri != null) { filePathCallback.onReceiveValue(new Uri[]{uri}); } else { // 如果data为null，可能是多选文件的情况，但这里我们只处理单选 filePathCallback.onReceiveValue(null); } } else { filePathCallback.onReceiveValue(null); } filePathCallback = null; } } } ``` ### 4. H5页面示例 在H5页面中，添加一个文件输入框用于选择视频： ```html <input type="file" accept="video/*" capture="camcorder" id="videoUpload"> ``` ### 注意事项： - 在Android 5.0以下版本，可能需要使用`openFileChooser`方法（已废弃），因此如果需要兼容旧版本，需要覆盖多个方法。 - 部分设备可能对`capture`属性的支持不一致，因此可能需要测试不同设备。 - 上传大视频文件时，可能会遇到超时或内存问题，需要在服务器端和客户端进行优化。 ### 引用说明： 根据引用[1][2][3]，我们了解到在WebView中处理H5上传文件需要重写`WebChromeClient`的相关方法，并且要注意权限和不同Android版本的兼容性[^1][^2][^3]。 通过以上步骤，即可在Android WebView中实现H5页面的视频上传功能。 §§相关问题§§ 1. 如何解决Android WebView中H5上传文件的大小限制？ 2. 在H5页面中如何实现音视频文件的实时预览？ 3. Android WebView如何处理多文件上传场景？</think>在 Android WebView 中实现 H5 页面视频上传功能，需要结合 WebView 配置和前端 HTML5 技术，以下是详细实现方案： ### 一、Android WebView 配置（Java/Kotlin） #### 1. 基础 WebView 设置 ```java WebView webView = findViewById(R.id.webview); WebSettings settings = webView.getSettings(); settings.setJavaScriptEnabled(true); // 启用JS settings.setDomStorageEnabled(true); // 启用DOM存储 settings.setMediaPlaybackRequiresUserGesture(false); // 允许自动播放 // 设置自定义WebChromeClient处理文件选择 webView.setWebChromeClient(new MyWebChromeClient()); webView.loadUrl("https://your-h5-page"); ``` #### 2. 处理文件选择回调 ```java private ValueCallback<Uri[]> mFilePathCallback; private final static int REQUEST_CODE_VIDEO = 100; class MyWebChromeClient extends WebChromeClient { // Android 5.0+ 文件选择回调 @Override public boolean onShowFileChooser(WebView webView, ValueCallback<Uri[]> filePathCallback, FileChooserParams fileChooserParams) { mFilePathCallback = filePathCallback; // 创建视频选择Intent Intent intent = new Intent(Intent.ACTION_GET_CONTENT); intent.addCategory(Intent.CATEGORY_OPENABLE); intent.setType("video/*"); // 限制为视频类型 startActivityForResult(intent, REQUEST_CODE_VIDEO); return true; } } // 处理选择结果 @Override protected void onActivityResult(int requestCode, int resultCode, Intent data) { if (requestCode == REQUEST_CODE_VIDEO) { if (mFilePathCallback != null) { Uri[] results = (resultCode == RESULT_OK && data != null) ? new Uri[]{data.getData()} : null; mFilePathCallback.onReceiveValue(results); mFilePathCallback = null; } } } ``` #### 3. AndroidManifest.xml 权限配置 ```xml <uses-permission android:name="android.permission.INTERNET" /> <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" /> <uses-permission android:name="android.permission.CAMERA" /> ``` ### 二、H5 页面实现（HTML/JS） ```html <!DOCTYPE html> <html> <body> <input type="file" id="videoUpload" accept="video/*" capture="camcorder"> <script> const videoInput = document.getElementById('videoUpload'); videoInput.addEventListener('change', (event) => { const file = event.target.files[0]; // 验证文件类型和大小 if (!file.type.startsWith('video/')) { alert('请选择视频文件'); return; } if (file.size > 100 * 1024 * 1024) { // 100MB限制 alert('视频文件过大'); return; } // 创建FormData并上传 const formData = new FormData(); formData.append('video', file); // 使用Fetch API上传 fetch('https://your-server/upload', { method: 'POST', body: formData }).then(response => { console.log('上传成功', response); }).catch(error => { console.error('上传失败', error); }); }); </script> </body> </html> ``` ### 三、关键配置说明 1. **WebView 文件选择器处理**： - 重写 `onShowFileChooser` 方法处理文件选择请求 - 使用 `Intent.ACTION_GET_CONTENT` 打开系统文件选择器 - 通过 `setType("video/*")` 限制只能选择视频文件[^3] 2. **H5 输入控件优化**： ```html <!-- 精确控制视频格式 --> <input type="file" accept="video/mp4, video/quicktime"> <!-- 启用多选 --> <input type="file" accept="video/*" multiple> ``` 3. **Android 6.0+ 动态权限处理**： ```java // 检查并请求权限 String[] permissions = { Manifest.permission.READ_EXTERNAL_STORAGE, Manifest.permission.CAMERA }; if (ContextCompat.checkSelfPermission(this, permissions[0]) != PackageManager.PERMISSION_GRANTED) { ActivityCompat.requestPermissions(this, permissions, 101); } ``` ### 四、兼容性注意事项 1. **Android 4.4 以下兼容**： ```java // 覆盖已弃用的方法 public void openFileChooser(ValueCallback<Uri> uploadMsg) { mUploadMessage = uploadMsg; Intent intent = new Intent(Intent.ACTION_GET_CONTENT); intent.addCategory(Intent.CATEGORY_OPENABLE); intent.setType("video/*"); startActivityForResult(intent, REQUEST_CODE); } ``` 2. **厂商设备适配**： - 部分厂商设备（如小米、华为）需要额外处理权限弹窗 - 使用 `FileChooserParams` 创建兼容性 Intent： ```java Intent intent = fileChooserParams.createIntent(); intent.putExtra(Intent.EXTRA_MIME_TYPES, new String[]{"video/*"}); ``` ### 五、完整调用流程 ```mermaid sequenceDiagram H5页面->>WebView： 点击视频上传按钮 WebView->>Android系统： 触发onShowFileChooser() Android系统-->>用户： 显示文件选择器 用户->>Android系统： 选择视频文件 Android系统->>WebView： 返回文件URI WebView->>H5页面： 传递File对象 H5页面->>服务器： 通过Fetch API上传 服务器-->>H5页面： 返回上传结果 ``` ### 六、常见问题解决 1. **文件选择器不弹出**： - 检查是否设置了 `WebChromeClient` - 验证动态权限是否已授予 - 确保未覆盖 `onActivityResult` 方法逻辑 2. **大文件上传失败**： - 服务器端增加 `client_max_body_size` 配置（Nginx） - 前端实现分片上传： ```javascript // 分片上传示例 const chunkSize = 5 * 1024 * 1024; // 5MB for (let start = 0; start < file.size; start += chunkSize) { const chunk = file.slice(start, start + chunkSize); // 上传每个分片 } ``` 通过以上配置，即可在 Android WebView 中实现完整的视频上传功能。不同 Android 版本需注意兼容性处理，特别是 Android 5.0 以下和 11+ 的存储权限变更[^1][^3]。