#鸿蒙通关秘籍#如何使用同层渲染模式绘制Video和Button组件？

使用同层渲染模式时，首先需要在module.json5中添加网络权限：

"requestPermissions":[ { "name" : "ohos.permission.INTERNET" } ]

接着，通过enableNativeEmbedMode()函数控制同层渲染开关，并确保在HTML文件中使用embed标签，标签内type必须以“native/”开头。以下是架构的应用组件代码。

typescript @Observed declare class Params { textOne: string; width: number; height: number; }

@Component struct VideoComponent { @ObjectLink params: Params @State player_changed: boolean = false; player?: AVPlayerDemo;

build() { Column() { Button(this.params.textOne) XComponent({ id: 'video_player_id', type: XComponentType.SURFACE }) .onLoad(() => { this.player = new AVPlayerDemo(); this.player.setSurfaceID(this.mXComponentController.getXComponentSurfaceId()); this.player_changed = !this.player_changed; this.player.avPlayerLiveDemo() }) .width(300) .height(200) } .width(this.params.width) .height(this.params.height) } }

@Entry @Component struct WebIndex { browserTabController: WebviewController = new webview.WebviewController()

build(){ Row() { Column() { Web({ src: $rawfile("test.html"), controller: this.browserTabController }) .enableNativeEmbedMode(true) } } } }