HarmonyOS鸿蒙Next中Web组件加载视频时无法隐藏下载按钮怎么处理

HarmonyOS鸿蒙Next中Web组件加载视频时无法隐藏下载按钮怎么处理

【问题现象】

正常情况下Web组件通过url加载视频时，默认会提供一个下载按钮：

点击放大

如上图所示。但是有些场景下，开发者并不希望视频被下载，因此想要隐藏下载按钮。

【背景知识】

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

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

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

【解决方案】

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

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

代码示例如下：

Web({
    src: 'url',
    controller: this.webController
})
.javaScriptAccess(true)

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

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

代码示例如下：

Web({
      src: this.videoUrl,
      controller: this.webController
    })
      .javaScriptAccess(true)
      .onPageEnd(() => {
        this.webController.runJavaScript(' window.onload = function() {\n' +
          ' var video = document.querySelector(\'video[name="media"]\');\n' +
          ' if (video) {\n' +
          ' video.setAttribute(\'controlsList\', \'nodownload\');\n' +
          ' }\n' +
          ' };')
      })

最终效果：

点击放大


更多关于HarmonyOS鸿蒙Next中Web组件加载视频时无法隐藏下载按钮怎么处理的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于HarmonyOS鸿蒙Next中Web组件加载视频时无法隐藏下载按钮怎么处理的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS鸿蒙Next中，Web组件加载视频时无法隐藏下载按钮

可以通过以下步骤解决：

  1. 确保Web组件允许执行JavaScript脚本。
  2. 在Web组件加载完成后，执行JS脚本隐藏下载按钮。

示例代码如下：

Web({
    src: this.videoUrl,
    controller: this.webController
})
.javaScriptAccess(true)
.onPageEnd(() => {
    this.webController.runJavaScript(' window.onload = function() {\n' +
      ' var video = document.querySelector(\'video[name="media"]\');\n' +
      ' if (video) {\n' +
      ' video.setAttribute(\'controlsList\', \'nodownload\');\n' +
      ' }\n' +
      ' };')
})

通过上述代码，可以隐藏Web组件加载视频时的下载按钮。

回到顶部