HarmonyOS 鸿蒙Next web里面里面的video标签自带下载与快进按钮

发布于 1周前 作者 caililin 来自 鸿蒙OS

HarmonyOS 鸿蒙Next web里面里面的video标签自带下载与快进按钮

点击下载按钮的事件应该怎么处理

2 回复

可通过setDownloadDelegate()向Web组件注册一个DownloadDelegate来监听页面触发的下载任务。资源由Web组件来下载,Web组件会通过DownloadDelegate将下载的进度通知给应用。详情参考文档:https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/js-apis-webview-V5#webdownloaddelegate11

也可以参考下面的简易demo

import web_webview from '@ohos.web.webview'

import business_error from '@ohos.base'

@Entry

@Component

struct Page6201 {

  delegate: web_webview.WebDownloadDelegate = new web_webview.WebDownloadDelegate();

  @State message: string = 'Hello World';

  webviewController: web_webview.WebviewController = new web_webview.WebviewController();

  build() {

    RelativeContainer() {

     Web({ src: $rawfile("aaa.html"), controller: this.webviewController })

       .onControllerAttached(()=>{

         try {

           this.delegate.onBeforeDownload((webDownloadItem: web_webview.WebDownloadItem) => {

             console.log("will start a download.");

             // 传入一个下载路径,并开始下载。

             // 如果传入一个不存在的路径,则会下载到默认/data/storage/el2/base/cache/web/目录。

             webDownloadItem.start("/data/storage/el2/base/cache/web/" + webDownloadItem.getSuggestedFileName());

           })

           this.delegate.onDownloadUpdated((webDownloadItem: web_webview.WebDownloadItem) => {

             // 下载任务的唯一标识。

             console.log("download update guid: " + webDownloadItem.getGuid());

             // 下载的进度。

             console.log("download update guid: " + webDownloadItem.getPercentComplete());

             // 当前的下载速度。

             console.log("download update speed: " + webDownloadItem.getCurrentSpeed())

           })

           this.delegate.onDownloadFailed((webDownloadItem: web_webview.WebDownloadItem) => {

             console.log("download failed guid: " + webDownloadItem.getGuid());

             // 下载任务失败的错误码。

             console.log("download failed guid: " + webDownloadItem.getLastErrorCode());

           })

           this.delegate.onDownloadFinish((webDownloadItem: web_webview.WebDownloadItem) => {

             // 下载任务完成后处理

             console.log("download finish guid: " + webDownloadItem.getGuid());

           })

           this.webviewController.setDownloadDelegate(this.delegate);

         } catch (error) {

           let e:business_error.BusinessError = error as business_error.BusinessError;

           console.error(`ErrorCode: ${e.code},  Message: ${e.message}`);

         }

       })

    }

    .height('100%')

    .width('100%')

  }

}

在HarmonyOS鸿蒙Next web环境中,关于<video>标签自带下载与快进按钮的情况,这通常是由系统浏览器或Webview组件的默认行为决定的。HarmonyOS作为一个集成式操作系统,其Web组件可能为了提升用户体验,内置了一些便捷的媒体控制功能,包括下载和快进按钮。

如果开发者希望在鸿蒙系统中自定义<video>标签的行为,比如隐藏或修改这些按钮,可以尝试以下几种方法:

  1. CSS样式控制:检查是否有特定的CSS伪类或属性可以控制这些按钮的显示。虽然标准的<video>标签不直接支持隐藏这些按钮,但可以通过覆盖默认样式尝试达到效果。

  2. JavaScript控制:使用JavaScript监听<video>元素的事件,尝试在按钮出现时隐藏它们,或禁用其功能。不过,由于这是系统级的行为,可能受限于浏览器的安全策略。

  3. 使用第三方库:考虑使用如Video.js等第三方视频播放器库,这些库通常提供更丰富的自定义选项。

请注意,由于这是特定于HarmonyOS的行为,上述方法可能并不总是有效。如果问题依旧没法解决请联系官网客服,官网地址是:https://www.itying.com/category-93-b0.html。

回到顶部