鸿蒙Next中如何将视频文件传递给WebView中的H5页面？

在鸿蒙Next开发中，我想在WebView加载的H5页面里播放本地视频文件。目前已经能通过WebView加载H5页面，但不知道如何将设备本地的视频文件传递给H5页面使用。请问应该如何实现这个功能？需要调用哪些鸿蒙的API？是否有完整的代码示例可以参考？

2 回复

鸿蒙Next里传视频给H5？简单！用 postMessage 把视频路径或base64数据扔给WebView，H5用 onmessage 接住就行。记得先让WebView开启JS支持，不然H5会装死。代码三行搞定，稳！

更多关于鸿蒙Next中如何将视频文件传递给WebView中的H5页面？的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在鸿蒙Next中，可以通过WebView的postMessage方法将视频文件传递给H5页面。以下是具体实现步骤：

1. 鸿蒙侧代码

import webview from '@ohos.web.webview';
import fileIo from '@ohos.fileio';

// 获取WebView组件实例
let webView: webview.Webview = ...;

// 读取视频文件为ArrayBuffer
let filePath = 'xxx/video.mp4'; // 视频文件路径
let file = fileIo.openSync(filePath, fileIo.OpenMode.READ_ONLY);
let stat = fileIo.statSync(filePath);
let buffer = new ArrayBuffer(stat.size);
fileIo.readSync(file.fd, buffer);

// 转换为base64（H5兼容性更好）
let base64 = bufferToString(buffer); // 需要实现ArrayBuffer转base64

// 传递给H5页面
webView.postMessage('videoData', {
  type: 'video/mp4',
  data: base64
});

// ArrayBuffer转base64工具函数
function bufferToString(buffer: ArrayBuffer): string {
  let uint8Array = new Uint8Array(buffer);
  let data = '';
  for (let i = 0; i < uint8Array.length; i++) {
    data += String.fromCharCode(uint8Array[i]);
  }
  return btoa(data);
}

2. H5页面代码

<video id="myVideo" controls></video>

<script>
// 监听鸿蒙传递的消息
window.addEventListener('message', (event) => {
  if (event.data.type === 'videoData') {
    const video = document.getElementById('myVideo');
    // 将base64数据转换为blob URL
    const byteCharacters = atob(event.data.data);
    const byteNumbers = new Array(byteCharacters.length);
    for (let i = 0; i < byteCharacters.length; i++) {
      byteNumbers[i] = byteCharacters.charCodeAt(i);
    }
    const byteArray = new Uint8Array(byteNumbers);
    const blob = new Blob([byteArray], {type: event.data.type});
    const videoUrl = URL.createObjectURL(blob);
    
    video.src = videoUrl;
  }
});
</script>

注意事项：

  1. 大文件建议分片传输或使用URL方案
  2. 需要确保H5页面已加载完成再发送数据
  3. 实际使用时需添加错误处理
  4. 视频格式需与H5的video标签兼容

这种方法适用于中小视频文件，大文件建议通过服务器中转或使用文件URL直接加载。

回到顶部