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' +
          ' };')
      })
 

最终效果：