HarmonyOS鸿蒙Next下载

HarmonyOS鸿蒙Next下载

Web组件加载视频时无法隐藏下载按钮怎么处理

3 回复

【背景知识】

HTML5的video标签有一个属性是controlsList，这个属性提供了对video额外的控制，使开发者能够控制显示哪些video元素控件。

controlsList属性接受一个空格分隔的字符串，每个字符串代表一个控件的名称。主要可以控制的选项包括：

  • nodownload：隐藏下载按钮。
  • nofullscreen：隐藏全屏按钮。
  • noremoteplayback：隐藏远程播放按钮。

【解决方案】

Web组件没有直接的属性来控制下载按键的隐藏，但是可以通过JS脚本来间接实现。具体方法如下：

（1）首先确认Web组件运行执行JavaScript脚本。（正常情况下默认是允许执行的，可以确认一下是否有更改设置）。

（2）在Web组件加载完成后，执行JS脚本，隐藏下载按键。JS脚本的实现原理如下：

  • 通过document.querySelector()获取video对象；
  • 设置controlsList属性值为nodownload。

【代码示例如下】

import { webview } from '@kit.ArkWeb';
import { BusinessError } from '@kit.BasicServicesKit';
import { window } from '@kit.ArkUI';

@Entry
@Component
struct Index {
  private webviewController: webview.WebviewController = new webview.WebviewController();
  // 此处地址实际使用过程中替换为真实视频地址
  private videoUrl: string = 'xx.xx.xx';
  private removeDownloadButtonScript: string = 'window.onload = function() {\n' +
    '    let video = document.querySelector(\'video[name="media"]\');\n' +
    '    if (video) {\n' +
    '        video.setAttribute(\'controlsList\', \'nodownload\');\n' +
    '    }\n' +
    '}';

  aboutToAppear(): void {
    window.getLastWindow(this.getUIContext().getHostContext()!, (err: BusinessError, windowClass) => {
      if (err.code) {
        console.error(`Failed to obtain the top window. Cause code: ${err.code}, message: ${err.message}`);
        return;
      }
      let systemBarProperties: window.SystemBarProperties = {
        statusBarContentColor: '#FFFFFF' // 状态栏文字颜色
      };
      windowClass.setWindowSystemBarProperties(systemBarProperties).then(() => {
        console.info('Succeeded in setting the system bar properties.');
      }).catch((err: BusinessError) => {
        console.error(`Failed to set systemBar properties. Cause code: ${err.code}, message: ${err.message}`);
      });
    });
  }

  build() {
    Column() {
      Web({
        src: this.videoUrl,
        controller: this.webviewController
      })
        .geolocationAccess(false)
        .fileAccess(false)
        .size({
          width: '100%'
        })
        .expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP, SafeAreaEdge.BOTTOM])
        .onPageEnd(() => {
          this.webviewController.runJavaScript(this.removeDownloadButtonScript).then((result: string) => {
            console.info(`result: ${result}`);
          }).catch((error: BusinessError) => {
            console.error(`ErrorCode: ${(error as BusinessError).code},  Message: ${(error as BusinessError).message}`);
          });
        });
    }
    .height('100%')
    .width('100%')
  }
}

更多关于HarmonyOS鸿蒙Next下载的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


HarmonyOS Next开发者预览版可通过华为开发者联盟官网获取。访问官网后，在“开发”或“下载”板块查找HarmonyOS专区。下载前需完成实名认证并签署相关协议。该版本目前主要面向应用开发者，用于应用适配与开发测试。

在HarmonyOS Next中，Web组件默认的视频播放控件（包括下载按钮）是由系统WebView引擎渲染的，其样式和行为通常受限于引擎本身，开发者无法直接通过CSS或属性完全隐藏特定按钮。

目前可行的处理思路和方案如下：

  1. 使用WebStorage和WebSetting尝试限制： 虽然不能直接隐藏，但可以通过WebSetting设置一些策略来影响控件行为，例如尝试禁用相关功能。但请注意，这并非对所有网页视频都有效，取决于WebView的实现和网页本身的代码。

    // 示例：在Web组件初始化时进行设置
webview.webSetting.setMediaPlayGesture(false); // 禁用媒体播放手势，可能影响相关控件
// 更多设置可查阅WebSetting的API文档，看是否有限制下载的选项

  2. 替代方案：使用媒体播放能力： 如果您的应用场景是播放固定视频，更推荐直接使用HarmonyOS的媒体播放组件（如<Video>组件），而非嵌入Web页面。这样可以获得完全可控的播放界面，包括自定义控件，彻底避免下载按钮问题。

    // 使用Video组件，完全自定义控制栏
Video({
  src: $rawfile('video.mp4'),
  controller: this.videoController // 可自定义控制器，隐藏所有不需要的按钮
})

  3. 与网页端协同处理： 如果您加载的是自己可控的网页，可以在网页内部通过CSS或JavaScript隐藏视频控件的下载按钮。例如，为<video>元素添加自定义控件，或通过CSS样式隐藏原生控件的特定部分。但这需要网页代码的配合，且不同浏览器内核效果可能不一致。

  4. 关注API更新： HarmonyOS Next仍在持续演进，后续版本可能会在Web组件中提供更精细的控件配置能力。建议关注官方API文档和版本更新说明。

总结：直接隐藏Web组件中视频的下载按钮存在限制。最佳实践是，对于应用内固定视频播放，优先使用原生Video组件；对于加载的第三方网页，可能需要接受其原生控件行为，或尝试与网页端共同定制。

回到顶部