HarmonyOS鸿蒙Next中Web组件加载一个视频url时，怎样直接播放？

HarmonyOS鸿蒙Next中Web组件加载一个视频url时，怎样直接播放？ 不需要用户操作，自动播放，怎么实现？

import { webview } from '@kit.ArkWeb';

@Entry
@Component
struct WebviewVideoDemo {
  private videoUrl = 'https://www.w3schools.com/html/movie.mp4'
  private controller: webview.WebviewController = new webview.WebviewController()

  build() {
    Stack() {
      Web({
        src: this.videoUrl,
        controller: this.controller
      })
        .width('100%')
        .height('300')
        .javaScriptAccess(true)
        .domStorageAccess(true)
    }
    .width('100%')
    .height('100%')
    .background(Color.Gray)
  }
}

更多关于HarmonyOS鸿蒙Next中Web组件加载一个视频url时，怎样直接播放？的实战教程也可以访问 https://www.itying.com/category-93-b0.html

6 回复

设置.mediaPlayGestureAccess(false)即可

更多关于HarmonyOS鸿蒙Next中Web组件加载一个视频url时，怎样直接播放？的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


有个NativeMediaPlayerBridge，你可以试试。

开发者您好，如果仅有一个视频，推荐您使用Video组件进行加载，可以实现自动播放，只需要将Web组件替换为：

Video({ src: this.videoUrl })
  .autoPlay(true) //开启自动播放
  .controls(true)
  .width('100%')
  .objectFit(ImageFit.Contain)
  .zIndex(10)

网页端由于有限制，只能实现静音自动播放，不建议使用，且需要在“\entry\src\main\resources\rawfile”目录下创建一个本地html（示例代码文件名为：testAutoPlayVideo.html），内容如下：

<html>
    <body>
        <div>
            <video id="my-video" src="https://www.w3schools.com/html/movie.mp4" width="100%" height="100%" muted autoplay controls></video>
        </div>
    </body>
</html>

web组件也做相应修改：

Web({
  src: $rawfile('testAutoPlayVideo.html'), //加载本地html
  controller: this.controller
})
  .width('100%')
  .height('300')
  .javaScriptAccess(true)
  .domStorageAccess(true)

奇技淫巧：加载完成之后，再刷新一次就会自动播放：

import { webview } from '@kit.ArkWeb';

@Entry
@Component
struct WebviewVideoDemo {
    private videoUrl = 'https://www.w3schools.com/html/movie.mp4'
    private controller: webview.WebviewController = new webview.WebviewController()
    private readonly PLAY_SCRIPT: string = `
const video = document.querySelector('video');
if (video) {
  video.muted = true;  // 确保静音
  video.play().catch(e => console.log(e));
}
  `;
        @State once: number = 0;

  build() {
    Stack() {
      Web({
              src: this.videoUrl,
              controller: this.controller
      })
        .width('100%')
        .height('300')
        .javaScriptAccess(true)
        .domStorageAccess(true)
        .onLoadFinished(() => {
            console.log("onLoadFinished");
        })
        .onPageEnd(() => {
          console.log("onPageEnd");
          // this.controller.runJavaScript(this.PLAY_SCRIPT).catch((error:BusinessError) => {
          //         console.error(error.message)
          // });
          this.fakeAutoPlay();
        })
    }
    .width('100%')
    .height('100%')
    .background(Color.Gray)
  }

  fakeAutoPlay() {
    if (this.once == 0) {
      this.once = 1;
      try {
        //加载完成之后，刷新一次就会自动播放
        this.controller.refresh();
      } catch (error) {
       console.error(error.message);
      }
    }
  }
}

如果通过runJavaScript的话，需要静音才能自动播放。

其他方法：托管网页中的媒体播放-使用网页多媒体-ArkWeb

在HarmonyOS Next中，Web组件加载视频URL直接播放需设置WebConfig的mediaPlaybackRequiresUserGesture(false)，并启用JavaScript。同时将loadUrl带入视频URL。若需自动播放，还需配置setMixedContentMode为MIXED_CONTENT_ALWAYS_ALLOW。使用<video>标签且设置autoplay属性即可。

在HarmonyOS Next中，Web组件加载视频URL要实现自动播放，请在Web组件属性中添加媒体手势限制配置：

Web({
  src: this.videoUrl,
  controller: this.controller
})
  .width('100%')
  .height('300')
  .javaScriptAccess(true)
  .domStorageAccess(true)
  .mediaOptions({
    mediaPlayGestureAccess: false  // 关闭媒体播放手势限制，允许自动播放
  })

mediaPlayGestureAccess: false会移除播放前需要用户手势交互的限制，使视频可以自动播放。注意视频URL本身也需支持自动播放（如包含autoplay参数）。

回到顶部