HarmonyOS鸿蒙Next中Web里面有视频下载怎么处理？

针对您在鸿蒙Web组件中遇到的视频下载按钮问题，我将提供完整的解决方案。以下是优化后的实现方案：

问题分析与解决方案

根本原因：Web组件默认的视频控件包含下载按钮，但点击后无响应属于鸿蒙系统限制（API 20）。推荐通过CSS注入隐藏下载按钮。

完整代码实现

import web_webview from '@ohos.web.webview';

@Entry
@Component
struct WebPage {
  private controller: web_webview.WebviewController = new web_webview.WebviewController();
  private web_url: string = "https://your-video-url.com"; // 替换实际URL

  build() {
    Column() {
      Web({
        src: this.web_url,
        controller: this.controller
      })
      .javaScriptAccess(true)
      .domStorageAccess(true)
      .fileAccess(false)
      .cacheMode(CacheMode.Default)
      .onPageEnd(() => {
        // 页面加载完成后注入CSS
        this.hideDownloadButton();
      })
    }
  }

  // 隐藏下载按钮的核心方法
  private hideDownloadButton() {
    const cssCode = `
      /* 隐藏原生下载按钮 */
      video::-internal-media-controls-download-button {
        display: none !important;
      }
      
      /* 隐藏自定义下载按钮 */
      .download-button, [aria-label="下载"], [title="下载"] {
        display: none !important;
        visibility: hidden !important;
      }
    `;

    const jsCode = `
      var style = document.createElement('style');
      style.type = 'text/css';
      style.innerHTML = \`${cssCode}\`;
      document.head.appendChild(style);
      
      // 动态监控新增元素
      new MutationObserver(() => {
        document.querySelectorAll('.download-button, [aria-label="下载"]')
          .forEach(btn => btn.remove());
      }).observe(document.body, { childList: true, subtree: true });
    `;

    this.controller.runJavaScript(jsCode);
  }
}

关键实现说明

CSS注入技术：

使用video::-internal-media-controls-download-button选择器定位原生下载按钮
通过!important覆盖原有样式
兼容自定义按钮选择器（.download-button等）
动态监控机制：

使用MutationObserver监听DOM变化
实时移除新增的下载按钮元素
确保页面动态加载内容时仍有效
执行时机：

在.onPageEnd()回调中注入代码
确保DOM加载完成后再操作
注意事项

选择器适配：

// 根据实际页面结构调整选择器
const customSelectors = `
  .custom-download, 
  #video-download-btn,
  button[data-role="download"]
`;

安全限制：

确保.fileAccess(false)保持关闭状态
鸿蒙API 20+ 禁止Web组件直接下载文件
替代方案：

// 若需保留下载功能
.onInterceptRequest(event => {
  if (event.request.url.endsWith('.mp4')) {
    // 调用原生下载模块
    downloadFile(event.request.url);
    return { intercept: true };
  }
})

部署建议

1. 测试不同分辨率设备下的UI表现
2. 使用华为远程真机调试云测服务
3. 审核前确保按钮完全隐藏且无功能残留

重要提示：此方案适用于HarmonyOS 6.0.0+(API 20)，对系统原生控件和常见视频网站均有效。若页面使用特殊播放器（如Flash），需额外定制CSS选择器。

通过注入JavaScript代码，修改Web页面中视频标签的 controlsList 属性，隐藏下载按钮（需要开启 javaScriptAccess ）：

// 1. 先定义要注入的JS代码（隐藏视频下载按钮）
const hideVideoDownloadBtn = `
  // 监听页面加载完成，修改所有video标签的controlsList
  window.addEventListener('load', () => {
    const videos = document.querySelectorAll('video');
    videos.forEach(video => {
      // 添加'nodownload'禁止下载按钮，同时保留其他控制项
      video.controlsList.add('nodownload');
    });
  });
`;

// 2. 在Web组件的controller中注入JS
@State web_url: string = '你的网页地址';
@State controller: WebController = new WebController();

build() {
  Web({ src: this.web_url, controller: this.controller })
    .javaScriptAccess(true) // 必须开启JS权限
    .domStorageAccess(true)
    .fileAccess(false)
    .cacheMode(CacheMode.Default)
    // 页面加载完成后注入JS
    .onPageEnd(() => {
      this.controller.runJavaScript(hideVideoDownloadBtn);
    })
}

HarmonyOS的分布式技术让我实现了跨设备的无缝协作，工作效率翻倍。