鸿蒙Next如何实现H5视频跳转到浏览器下载

在鸿蒙Next系统中，如何实现H5页面内的视频点击跳转到系统浏览器进行下载？目前尝试了常规的<a>标签和JavaScript的window.open方法，但都无法正常唤起浏览器。是否需要配置特殊的协议或权限？有没有具体的代码示例可以参考？

2 回复

鸿蒙Next中，H5视频想跳转浏览器下载？简单！在Web组件里拦截视频链接，用系统能力system.openUrl()甩给浏览器处理。记得申请ohos.permission.INTERNET权限，不然浏览器只能干瞪眼。代码三行搞定，剩下的让浏览器自己忙活去！

更多关于鸿蒙Next如何实现H5视频跳转到浏览器下载的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在鸿蒙Next（HarmonyOS NEXT）中，由于系统不再内置WebView组件，无法直接通过H5页面在应用内下载视频。因此，实现H5视频跳转到浏览器下载的步骤如下：

实现步骤

  1. 捕获H5页面中的下载链接
    在H5页面中，通常视频下载会通过<a>标签或JavaScript触发。需解析页面内容或监听事件获取视频文件的直接URL（如以.mp4、.avi结尾的链接）。

  2. 使用系统能力跳转到浏览器
    通过鸿蒙的Want机制，将视频URL传递给系统默认浏览器，由浏览器处理下载。

示例代码

import { webview } from '@kit.ArkWeb';
import { Want } from '@kit.AbilityKit';
import { BusinessError } from '@kit.BasicServicesKit';

// 1. 在H5页面中注入JavaScript，捕获视频下载链接（示例通过监听点击事件）
const jsCode = `
  document.addEventListener('click', function(e) {
    const link = e.target.closest('a');
    if (link && link.href.match(/\.(mp4|avi|mov)$/i)) {
      // 通知ArkTS层处理链接
      window.ohosCallback?.postMessage(link.href);
      e.preventDefault(); // 阻止默认行为
    }
  });
`;

// 2. 在ArkTS中初始化Web组件并注入脚本
@Entry
@Component
struct WebComponent {
  controller: webview.WebviewController = new webview.WebviewController();

  aboutToAppear() {
    // 注册回调接口供H5调用
    this.controller.registerJavaScriptProxy({
      postMessage: (url: string) => {
        this.openInBrowser(url); // 调用浏览器打开
      }
    }, 'ohosCallback', 'postMessage');
  }

  build() {
    Column() {
      // 加载H5页面
      Web({ src: 'https://example.com/video-page', controller: this.controller })
        .javaScriptAccess(true)
        .onPageEnd(() => {
          // 页面加载完成后注入JS代码
          this.controller.runJavaScript(jsCode);
        })
    }
  }

  // 3. 通过Want跳转到浏览器
  private openInBrowser(url: string) {
    let want: Want = {
      action: 'ohos.want.action.view',
      entities: ['entity.system.browsable'],
      uri: url // 视频文件直链
    };
    let context = getContext(this) as common.UIAbilityContext;
    context.startAbility(want).catch((err: BusinessError) => {
      console.error(`Failed to open browser: ${err.code}, ${err.message}`);
    });
  }
}

关键说明

  • 权限配置：在module.json5中添加网络权限：
    "requestPermissions": [
  {
    "name": "ohos.permission.INTERNET"
  }
]
  • 链接匹配：根据实际视频格式扩展正则表达式（如添加mkv|flv等）。
  • 浏览器兼容性：依赖用户设备安装的浏览器支持下载功能。

注意事项

  • 此方法要求视频链接是可直接下载的直链。
  • 若H5页面通过动态加载生成链接，需调整JS代码逻辑（如监听网络请求或特定按钮事件）。
  • 鸿蒙Next的API可能存在版本差异，建议参考最新官方文档调整。

通过以上步骤，即可实现在鸿蒙Next中从H5页面跳转浏览器下载视频。

回到顶部