diff --git a/code/DocsSample/ArkWeb/UsingWebMultimedia/README.md b/code/DocsSample/ArkWeb/UsingWebMultimedia/README.md
index 053e831bd35c8f31e105e8b8d47d05124e5ac3ee..be38cffbb5c7c4db0ccdd71d8f0b1d9220d1ea51 100755
--- a/code/DocsSample/ArkWeb/UsingWebMultimedia/README.md
+++ b/code/DocsSample/ArkWeb/UsingWebMultimedia/README.md
@@ -77,6 +77,48 @@ entry2/src/main/
```
+#### 相关权限
+
+[ohos.permission.INTERNET](https://docs.openharmony.cn/pages/v5.0/zh-cn/application-dev/security/AccessToken/permissions-for-all.md#ohospermissioninternet)
+
+# entry3:
+
+### Web组件支持画中画
+
+#### 介绍
+
+1. 本示例主要介绍Web画中画。借助Picture-in-Picture Web API,在网页上拉起一个浮动窗口播放视频,以便用户在浏览器其他网页或者与其他应用交互时通过画中画窗口继续观看视频。
+2. 本工程主要实现了对以下指南文档中 https://docs.openharmony.cn/pages/v5.0/zh-cn/application-dev/web/web-picture-in-picture.md 示例代码片段的工程化,主要目标是实现指南中示例代码需要与sample工程文件同源。
+
+#### 效果预览
+
+| 主页 |
+|---------------------------------------------------------------|
+| |
+
+使用说明
+
+1. 使用时需要自行替换前端页面视频链接。
+2. 点击开启画中画按钮,进入画中画播放模式,在画中画模式时点击退出画中画,恢复原页面播放。
+3. 点击画中画窗口,可以显示控制层控件,支持播放、暂停、前进、后退;双击画中画窗口支持放大或缩小窗口。
+
+#### 工程目录
+
+```
+entry3/src/main/
+|---ets
+|---|---entry3ability
+|---|---|---Entry3Ability.ets
+|---|---pages
+|---|---|---Index.ets // 首页
+|---resources // 静态资源
+|---ohosTest
+|---|---ets
+|---|---|---tests
+|---|---|---|---Ability.test.ets // 自动化测试用例
+```
+
+
#### 相关权限
[ohos.permission.INTERNET](https://docs.openharmony.cn/pages/v5.0/zh-cn/application-dev/security/AccessToken/permissions-for-all.md#ohospermissioninternet)
diff --git a/code/DocsSample/ArkWeb/UsingWebMultimedia/build-profile.json5 b/code/DocsSample/ArkWeb/UsingWebMultimedia/build-profile.json5
index 5209cd7eb7db278c854ae5ba2ef02ed8c367ecc0..43f67ad37e65ddbcb3e97ece406f182f1b9c4d27 100755
--- a/code/DocsSample/ArkWeb/UsingWebMultimedia/build-profile.json5
+++ b/code/DocsSample/ArkWeb/UsingWebMultimedia/build-profile.json5
@@ -59,6 +59,18 @@
]
}
]
+ },
+ {
+ "name": "entry3",
+ "srcPath": "./entry3",
+ "targets": [
+ {
+ "name": "default",
+ "applyToProducts": [
+ "default"
+ ]
+ }
+ ]
}
]
}
\ No newline at end of file
diff --git a/code/DocsSample/ArkWeb/UsingWebMultimedia/entry3/.gitignore b/code/DocsSample/ArkWeb/UsingWebMultimedia/entry3/.gitignore
new file mode 100644
index 0000000000000000000000000000000000000000..e2713a2779c5a3e0eb879efe6115455592caeea5
--- /dev/null
+++ b/code/DocsSample/ArkWeb/UsingWebMultimedia/entry3/.gitignore
@@ -0,0 +1,6 @@
+/node_modules
+/oh_modules
+/.preview
+/build
+/.cxx
+/.test
\ No newline at end of file
diff --git a/code/DocsSample/ArkWeb/UsingWebMultimedia/entry3/build-profile.json5 b/code/DocsSample/ArkWeb/UsingWebMultimedia/entry3/build-profile.json5
new file mode 100644
index 0000000000000000000000000000000000000000..154bdd087521da4954d20dc9aaabcfb3f032fb65
--- /dev/null
+++ b/code/DocsSample/ArkWeb/UsingWebMultimedia/entry3/build-profile.json5
@@ -0,0 +1,43 @@
+/*
+* Copyright (c) 2025 Huawei Device Co., Ltd.
+* Licensed under the Apache License, Version 2.0 (the "License");
+* you may not use this file except in compliance with the License.
+* You may obtain a copy of the License at
+*
+* http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing, software
+* distributed under the License is distributed on an "AS IS" BASIS,
+* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+* See the License for the specific language governing permissions and
+* limitations under the License.
+*/
+
+{
+ "apiType": "stageMode",
+ "buildOption": {
+ },
+ "buildOptionSet": [
+ {
+ "name": "release",
+ "arkOptions": {
+ "obfuscation": {
+ "ruleOptions": {
+ "enable": false,
+ "files": [
+ "./obfuscation-rules.txt"
+ ]
+ }
+ }
+ }
+ },
+ ],
+ "targets": [
+ {
+ "name": "default"
+ },
+ {
+ "name": "ohosTest",
+ }
+ ]
+}
\ No newline at end of file
diff --git a/code/DocsSample/ArkWeb/UsingWebMultimedia/entry3/hvigorfile.ts b/code/DocsSample/ArkWeb/UsingWebMultimedia/entry3/hvigorfile.ts
new file mode 100644
index 0000000000000000000000000000000000000000..98d52319cb1dee60511b5716dba03b76e68a6d8b
--- /dev/null
+++ b/code/DocsSample/ArkWeb/UsingWebMultimedia/entry3/hvigorfile.ts
@@ -0,0 +1,21 @@
+/*
+* Copyright (c) 2025 Huawei Device Co., Ltd.
+* Licensed under the Apache License, Version 2.0 (the "License");
+* you may not use this file except in compliance with the License.
+* You may obtain a copy of the License at
+*
+* http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing, software
+* distributed under the License is distributed on an "AS IS" BASIS,
+* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+* See the License for the specific language governing permissions and
+* limitations under the License.
+*/
+
+import { hapTasks } from '@ohos/hvigor-ohos-plugin';
+
+export default {
+ system: hapTasks, /* Built-in plugin of Hvigor. It cannot be modified. */
+ plugins:[] /* Custom plugin to extend the functionality of Hvigor. */
+}
diff --git a/code/DocsSample/ArkWeb/UsingWebMultimedia/entry3/obfuscation-rules.txt b/code/DocsSample/ArkWeb/UsingWebMultimedia/entry3/obfuscation-rules.txt
new file mode 100644
index 0000000000000000000000000000000000000000..272efb6ca3f240859091bbbfc7c5802d52793b0b
--- /dev/null
+++ b/code/DocsSample/ArkWeb/UsingWebMultimedia/entry3/obfuscation-rules.txt
@@ -0,0 +1,23 @@
+# Define project specific obfuscation rules here.
+# You can include the obfuscation configuration files in the current module's build-profile.json5.
+#
+# For more details, see
+# https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/source-obfuscation-V5
+
+# Obfuscation options:
+# -disable-obfuscation: disable all obfuscations
+# -enable-property-obfuscation: obfuscate the property names
+# -enable-toplevel-obfuscation: obfuscate the names in the global scope
+# -compact: remove unnecessary blank spaces and all line feeds
+# -remove-log: remove all console.* statements
+# -print-namecache: print the name cache that contains the mapping from the old names to new names
+# -apply-namecache: reuse the given cache file
+
+# Keep options:
+# -keep-property-name: specifies property names that you want to keep
+# -keep-global-name: specifies names that you want to keep in the global scope
+
+-enable-property-obfuscation
+-enable-toplevel-obfuscation
+-enable-filename-obfuscation
+-enable-export-obfuscation
\ No newline at end of file
diff --git a/code/DocsSample/ArkWeb/UsingWebMultimedia/entry3/oh-package.json5 b/code/DocsSample/ArkWeb/UsingWebMultimedia/entry3/oh-package.json5
new file mode 100644
index 0000000000000000000000000000000000000000..f34ecb68859fd59624be4c429be709718643951c
--- /dev/null
+++ b/code/DocsSample/ArkWeb/UsingWebMultimedia/entry3/oh-package.json5
@@ -0,0 +1,25 @@
+/*
+* Copyright (c) 2025 Huawei Device Co., Ltd.
+* Licensed under the Apache License, Version 2.0 (the "License");
+* you may not use this file except in compliance with the License.
+* You may obtain a copy of the License at
+*
+* http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing, software
+* distributed under the License is distributed on an "AS IS" BASIS,
+* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+* See the License for the specific language governing permissions and
+* limitations under the License.
+*/
+
+{
+ "name": "entry3",
+ "version": "1.0.0",
+ "description": "Please describe the basic information.",
+ "main": "",
+ "author": "",
+ "license": "",
+ "dependencies": {}
+}
+
diff --git a/code/DocsSample/ArkWeb/UsingWebMultimedia/entry3/src/main/ets/entry3ability/Entry3Ability.ets b/code/DocsSample/ArkWeb/UsingWebMultimedia/entry3/src/main/ets/entry3ability/Entry3Ability.ets
new file mode 100644
index 0000000000000000000000000000000000000000..5b2c6720cb3b223133036558d2615d757c8f9506
--- /dev/null
+++ b/code/DocsSample/ArkWeb/UsingWebMultimedia/entry3/src/main/ets/entry3ability/Entry3Ability.ets
@@ -0,0 +1,58 @@
+/*
+ * Copyright (c) 2025 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { AbilityConstant, UIAbility, Want } from '@kit.AbilityKit';
+import { hilog } from '@kit.PerformanceAnalysisKit';
+import { window } from '@kit.ArkUI';
+
+const DOMAIN = 0x0000;
+
+export default class Entry3Ability extends UIAbility {
+ onCreate(want: Want, launchParam: AbilityConstant.LaunchParam): void {
+ hilog.info(DOMAIN, 'testTag', '%{public}s', 'Ability onCreate');
+ }
+
+ onDestroy(): void {
+ hilog.info(DOMAIN, 'testTag', '%{public}s', 'Ability onDestroy');
+ }
+
+ onWindowStageCreate(windowStage: window.WindowStage): void {
+ // Main window is created, set main page for this ability
+ hilog.info(DOMAIN, 'testTag', '%{public}s', 'Ability onWindowStageCreate');
+
+ windowStage.loadContent('pages/Index', (err) => {
+ if (err.code) {
+ hilog.error(DOMAIN, 'testTag', 'Failed to load the content. Cause: %{public}s', JSON.stringify(err));
+ return;
+ }
+ hilog.info(DOMAIN, 'testTag', 'Succeeded in loading the content.');
+ });
+ }
+
+ onWindowStageDestroy(): void {
+ // Main window is destroyed, release UI related resources
+ hilog.info(DOMAIN, 'testTag', '%{public}s', 'Ability onWindowStageDestroy');
+ }
+
+ onForeground(): void {
+ // Ability has brought to foreground
+ hilog.info(DOMAIN, 'testTag', '%{public}s', 'Ability onForeground');
+ }
+
+ onBackground(): void {
+ // Ability has back to background
+ hilog.info(DOMAIN, 'testTag', '%{public}s', 'Ability onBackground');
+ }
+}
diff --git a/code/DocsSample/ArkWeb/UsingWebMultimedia/entry3/src/main/ets/entry3backupability/Entry3BackupAbility.ets b/code/DocsSample/ArkWeb/UsingWebMultimedia/entry3/src/main/ets/entry3backupability/Entry3BackupAbility.ets
new file mode 100644
index 0000000000000000000000000000000000000000..1b3eee2847305f242191265c53bba19675eaa8e3
--- /dev/null
+++ b/code/DocsSample/ArkWeb/UsingWebMultimedia/entry3/src/main/ets/entry3backupability/Entry3BackupAbility.ets
@@ -0,0 +1,31 @@
+/*
+ * Copyright (c) 2025 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { hilog } from '@kit.PerformanceAnalysisKit';
+import { BackupExtensionAbility, BundleVersion } from '@kit.CoreFileKit';
+
+const DOMAIN = 0x0000;
+
+export default class Entry3BackupAbility extends BackupExtensionAbility {
+ async onBackup() {
+ hilog.info(DOMAIN, 'testTag', 'onBackup ok');
+ await Promise.resolve();
+ }
+
+ async onRestore(bundleVersion: BundleVersion) {
+ hilog.info(DOMAIN, 'testTag', 'onRestore ok %{public}s', JSON.stringify(bundleVersion));
+ await Promise.resolve();
+ }
+}
\ No newline at end of file
diff --git a/code/DocsSample/ArkWeb/UsingWebMultimedia/entry3/src/main/ets/pages/Index.ets b/code/DocsSample/ArkWeb/UsingWebMultimedia/entry3/src/main/ets/pages/Index.ets
new file mode 100644
index 0000000000000000000000000000000000000000..cc21b2bffefad7e901ea2d1153d55dda01734c5e
--- /dev/null
+++ b/code/DocsSample/ArkWeb/UsingWebMultimedia/entry3/src/main/ets/pages/Index.ets
@@ -0,0 +1,29 @@
+/*
+ * Copyright (c) 2025 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { webview } from '@kit.ArkWeb';
+
+@Entry
+@Component
+struct Index {
+ @State videoSrc: Resource = $rawfile('PictureInPicture.html')
+ controller: webview.WebviewController = new webview.WebviewController()
+
+ build() {
+ Column() {
+ Web({ src: this.videoSrc, controller: this.controller })
+ }
+ }
+}
\ No newline at end of file
diff --git a/code/DocsSample/ArkWeb/UsingWebMultimedia/entry3/src/main/module.json5 b/code/DocsSample/ArkWeb/UsingWebMultimedia/entry3/src/main/module.json5
new file mode 100644
index 0000000000000000000000000000000000000000..7cdc77b7fa16e8be82737e366d7bd21cbd3ec4ac
--- /dev/null
+++ b/code/DocsSample/ArkWeb/UsingWebMultimedia/entry3/src/main/module.json5
@@ -0,0 +1,65 @@
+/*
+* Copyright (c) 2025 Huawei Device Co., Ltd.
+* Licensed under the Apache License, Version 2.0 (the "License");
+* you may not use this file except in compliance with the License.
+* You may obtain a copy of the License at
+*
+* http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing, software
+* distributed under the License is distributed on an "AS IS" BASIS,
+* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+* See the License for the specific language governing permissions and
+* limitations under the License.
+*/
+
+{
+ "module": {
+ "name": "entry3",
+ "type": "entry",
+ "description": "$string:module_desc",
+ "mainElement": "Entry3Ability",
+ "deviceTypes": [
+ "default"
+ ],
+ "deliveryWithInstall": true,
+ "installationFree": false,
+ "pages": "$profile:main_pages",
+ "abilities": [
+ {
+ "name": "Entry3Ability",
+ "srcEntry": "./ets/entry3ability/Entry3Ability.ets",
+ "description": "$string:Entry3Ability_desc",
+ "icon": "$media:layered_image",
+ "label": "$string:Entry3Ability_label",
+ "startWindowIcon": "$media:startIcon",
+ "startWindowBackground": "$color:start_window_background",
+ "exported": true,
+ "skills": [
+ {
+ "entities": [
+ "entity.system.home"
+ ],
+ "actions": [
+ "action.system.home"
+ ]
+ }
+ ]
+ }
+ ],
+ "extensionAbilities": [
+ {
+ "name": "Entry3BackupAbility",
+ "srcEntry": "./ets/entry3backupability/Entry3BackupAbility.ets",
+ "type": "backup",
+ "exported": false,
+ "metadata": [
+ {
+ "name": "ohos.extension.backup",
+ "resource": "$profile:backup_config"
+ }
+ ]
+ }
+ ]
+ }
+}
\ No newline at end of file
diff --git a/code/DocsSample/ArkWeb/UsingWebMultimedia/entry3/src/main/resources/base/element/color.json b/code/DocsSample/ArkWeb/UsingWebMultimedia/entry3/src/main/resources/base/element/color.json
new file mode 100644
index 0000000000000000000000000000000000000000..d66f9a7d4ac61fb8d215239ab3620b7bcd77bf33
--- /dev/null
+++ b/code/DocsSample/ArkWeb/UsingWebMultimedia/entry3/src/main/resources/base/element/color.json
@@ -0,0 +1,8 @@
+{
+ "color": [
+ {
+ "name": "start_window_background",
+ "value": "#FFFFFF"
+ }
+ ]
+}
\ No newline at end of file
diff --git a/code/DocsSample/ArkWeb/UsingWebMultimedia/entry3/src/main/resources/base/element/float.json b/code/DocsSample/ArkWeb/UsingWebMultimedia/entry3/src/main/resources/base/element/float.json
new file mode 100644
index 0000000000000000000000000000000000000000..a8a5d404dcd8b0466194afc3aa25d90a8a327470
--- /dev/null
+++ b/code/DocsSample/ArkWeb/UsingWebMultimedia/entry3/src/main/resources/base/element/float.json
@@ -0,0 +1,8 @@
+{
+ "float": [
+ {
+ "name": "page_text_font_size",
+ "value": "50fp"
+ }
+ ]
+}
diff --git a/code/DocsSample/ArkWeb/UsingWebMultimedia/entry3/src/main/resources/base/element/string.json b/code/DocsSample/ArkWeb/UsingWebMultimedia/entry3/src/main/resources/base/element/string.json
new file mode 100644
index 0000000000000000000000000000000000000000..5416aefe3699bc869fd4896df9f691be313b0250
--- /dev/null
+++ b/code/DocsSample/ArkWeb/UsingWebMultimedia/entry3/src/main/resources/base/element/string.json
@@ -0,0 +1,16 @@
+{
+ "string": [
+ {
+ "name": "module_desc",
+ "value": "module description"
+ },
+ {
+ "name": "Entry3Ability_desc",
+ "value": "description"
+ },
+ {
+ "name": "Entry3Ability_label",
+ "value": "label"
+ }
+ ]
+}
\ No newline at end of file
diff --git a/code/DocsSample/ArkWeb/UsingWebMultimedia/entry3/src/main/resources/base/media/background.png b/code/DocsSample/ArkWeb/UsingWebMultimedia/entry3/src/main/resources/base/media/background.png
new file mode 100644
index 0000000000000000000000000000000000000000..923f2b3f27e915d6871871deea0420eb45ce102f
Binary files /dev/null and b/code/DocsSample/ArkWeb/UsingWebMultimedia/entry3/src/main/resources/base/media/background.png differ
diff --git a/code/DocsSample/ArkWeb/UsingWebMultimedia/entry3/src/main/resources/base/media/foreground.png b/code/DocsSample/ArkWeb/UsingWebMultimedia/entry3/src/main/resources/base/media/foreground.png
new file mode 100644
index 0000000000000000000000000000000000000000..97014d3e10e5ff511409c378cd4255713aecd85f
Binary files /dev/null and b/code/DocsSample/ArkWeb/UsingWebMultimedia/entry3/src/main/resources/base/media/foreground.png differ
diff --git a/code/DocsSample/ArkWeb/UsingWebMultimedia/entry3/src/main/resources/base/media/layered_image.json b/code/DocsSample/ArkWeb/UsingWebMultimedia/entry3/src/main/resources/base/media/layered_image.json
new file mode 100644
index 0000000000000000000000000000000000000000..fb49920440fb4d246c82f9ada275e26123a2136a
--- /dev/null
+++ b/code/DocsSample/ArkWeb/UsingWebMultimedia/entry3/src/main/resources/base/media/layered_image.json
@@ -0,0 +1,7 @@
+{
+ "layered-image":
+ {
+ "background" : "$media:background",
+ "foreground" : "$media:foreground"
+ }
+}
\ No newline at end of file
diff --git a/code/DocsSample/ArkWeb/UsingWebMultimedia/entry3/src/main/resources/base/media/startIcon.png b/code/DocsSample/ArkWeb/UsingWebMultimedia/entry3/src/main/resources/base/media/startIcon.png
new file mode 100644
index 0000000000000000000000000000000000000000..205ad8b5a8a42e8762fbe4899b8e5e31ce822b8b
Binary files /dev/null and b/code/DocsSample/ArkWeb/UsingWebMultimedia/entry3/src/main/resources/base/media/startIcon.png differ
diff --git a/code/DocsSample/ArkWeb/UsingWebMultimedia/entry3/src/main/resources/base/profile/backup_config.json b/code/DocsSample/ArkWeb/UsingWebMultimedia/entry3/src/main/resources/base/profile/backup_config.json
new file mode 100644
index 0000000000000000000000000000000000000000..d742c2f96e7dd0f406f499941f3147345e998f95
--- /dev/null
+++ b/code/DocsSample/ArkWeb/UsingWebMultimedia/entry3/src/main/resources/base/profile/backup_config.json
@@ -0,0 +1,3 @@
+{
+ "allowToBackupRestore": true
+}
\ No newline at end of file
diff --git a/code/DocsSample/ArkWeb/UsingWebMultimedia/entry3/src/main/resources/base/profile/main_pages.json b/code/DocsSample/ArkWeb/UsingWebMultimedia/entry3/src/main/resources/base/profile/main_pages.json
new file mode 100644
index 0000000000000000000000000000000000000000..1898d94f58d6128ab712be2c68acc7c98e9ab9ce
--- /dev/null
+++ b/code/DocsSample/ArkWeb/UsingWebMultimedia/entry3/src/main/resources/base/profile/main_pages.json
@@ -0,0 +1,5 @@
+{
+ "src": [
+ "pages/Index"
+ ]
+}
diff --git a/code/DocsSample/ArkWeb/UsingWebMultimedia/entry3/src/main/resources/rawfile/PictureInPicture.html b/code/DocsSample/ArkWeb/UsingWebMultimedia/entry3/src/main/resources/rawfile/PictureInPicture.html
new file mode 100644
index 0000000000000000000000000000000000000000..7bf4266df60eb8040ca1cedea940dd3f8e6d3581
--- /dev/null
+++ b/code/DocsSample/ArkWeb/UsingWebMultimedia/entry3/src/main/resources/rawfile/PictureInPicture.html
@@ -0,0 +1,87 @@
+
+
+
+