diff --git a/media/JsVideo/README_zh.md b/media/JsVideo/README_zh.md
new file mode 100644
index 0000000000000000000000000000000000000000..5b947659914b6175cd3a5361ad935340dfc68dc1
--- /dev/null
+++ b/media/JsVideo/README_zh.md
@@ -0,0 +1,19 @@
+# JsVideo
+
+
+
+### 简介
+
+ 此Demo使用JS UI中的<video/>组件，实现视频播放。您可以通过video自带的控制栏进行播放、暂停等操作。
+
+### 使用说明
+
+1、启动应用，界面展示<video/>组件，加载预置视频，此时视频处于暂停播放状态。
+
+2、点击底部控制栏的播放按钮开始播放视频，点击视频会暂停或继续播放。
+
+3、长按视频界面会退出播放状态，界面重新加载。
+
+### 约束与限制
+
+本示例仅支持标准系统上运行。
diff --git a/media/JsVideo/build.gradle b/media/JsVideo/build.gradle
new file mode 100644
index 0000000000000000000000000000000000000000..8469dbed391d35ea3560bcb82b1258e27bdeb09a
--- /dev/null
+++ b/media/JsVideo/build.gradle
@@ -0,0 +1,34 @@
+// Top-level build file where you can add configuration options common to all sub-projects/modules.
+apply plugin: 'com.huawei.ohos.app'
+
+// For instructions on signature configuration, see https://developer.harmonyos.com/cn/docs/documentation/doc-guides/ide_debug_device-0000001053822404#section1112183053510
+ohos {
+    compileSdkVersion 7
+    supportSystem "standard"
+}
+
+buildscript {
+    repositories {
+        maven {
+            url 'https://repo.huaweicloud.com/repository/maven/'
+        }
+        maven {
+            url 'https://developer.huawei.com/repo/'
+        }
+    }
+    dependencies {
+        classpath 'com.huawei.ohos:hap:3.0.3.4'
+        classpath 'com.huawei.ohos:decctest:1.2.6.0'
+    }
+}
+
+allprojects {
+    repositories {
+        maven {
+            url 'https://repo.huaweicloud.com/repository/maven/'
+        }
+        maven {
+            url 'https://developer.huawei.com/repo/'
+        }
+    }
+}
diff --git a/media/JsVideo/entry/build.gradle b/media/JsVideo/entry/build.gradle
new file mode 100644
index 0000000000000000000000000000000000000000..895f5ab55babc59d9158eda9724930a93d1c9c72
--- /dev/null
+++ b/media/JsVideo/entry/build.gradle
@@ -0,0 +1,21 @@
+apply plugin: 'com.huawei.ohos.hap'
+// For instructions on signature configuration, see https://developer.harmonyos.com/cn/docs/documentation/doc-guides/ide_debug_device-0000001053822404#section1112183053510
+ohos {
+    compileSdkVersion 7
+    defaultConfig {
+        compatibleSdkVersion 7
+    }
+    buildTypes {
+        release {
+            proguardOpt {
+                proguardEnabled false
+                rulesFiles 'proguard-rules.pro'
+            }
+        }
+    }
+}
+
+dependencies {
+    implementation fileTree(dir: 'libs', include: ['*.jar', '*.har'])
+    testImplementation 'junit:junit:4.13.1'
+}
diff --git a/media/JsVideo/entry/src/main/config.json b/media/JsVideo/entry/src/main/config.json
new file mode 100644
index 0000000000000000000000000000000000000000..7bb7641c32f33a1916f34125bcd3cf2fbe2d5b7e
--- /dev/null
+++ b/media/JsVideo/entry/src/main/config.json
@@ -0,0 +1,65 @@
+{
+  "app": {
+    "bundleName": "ohos.samples.etsresourcemanager",
+    "vendor": "samples",
+    "version": {
+      "code": 1000000,
+      "name": "1.0.0"
+    }
+  },
+  "deviceConfig": {},
+  "module": {
+    "package": "ohos.samples.jsvideo",
+    "name": ".MyApplication",
+    "mainAbility": ".MainAbility",
+    "deviceType": [
+      "phone"
+    ],
+    "distro": {
+      "deliveryWithInstall": true,
+      "moduleName": "entry",
+      "moduleType": "entry",
+      "installationFree": false
+    },
+    "abilities": [
+      {
+        "skills": [
+          {
+            "entities": [
+              "entity.system.home"
+            ],
+            "actions": [
+              "action.system.home"
+            ]
+          }
+        ],
+        "orientation": "unspecified",
+        "configChanges": [
+          "orientation"
+        ],
+        "visible": true,
+        "srcPath": "MainAbility",
+        "name": ".MainAbility",
+        "srcLanguage": "js",
+        "icon": "$media:icon",
+        "description": "$string:description_mainability",
+        "formsEnabled": false,
+        "label": "$string:entry_MainAbility",
+        "type": "page",
+        "launchType": "standard"
+      }
+    ],
+    "js": [
+      {
+        "pages": [
+          "pages/index/index"
+        ],
+        "name": ".MainAbility",
+        "window": {
+          "designWidth": 720,
+          "autoDesignWidth": false
+        }
+      }
+    ]
+  }
+}
\ No newline at end of file
diff --git a/media/JsVideo/entry/src/main/js/MainAbility/app.js b/media/JsVideo/entry/src/main/js/MainAbility/app.js
new file mode 100644
index 0000000000000000000000000000000000000000..50449ecbed6d3b8099f6f9a1fb66e29bbe2177f0
--- /dev/null
+++ b/media/JsVideo/entry/src/main/js/MainAbility/app.js
@@ -0,0 +1,22 @@
+/*
+ * Copyright (c) 2021 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.
+ */
+export default {
+    onCreate() {
+        console.info("Application onCreate");
+    },
+    onDestroy() {
+        console.info("Application onDestroy");
+    }
+};
diff --git a/media/JsVideo/entry/src/main/js/MainAbility/common/images/bg-tv.jpg b/media/JsVideo/entry/src/main/js/MainAbility/common/images/bg-tv.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..86fc07358eea5c1474bc833fca07c6d4d8698a89
Binary files /dev/null and b/media/JsVideo/entry/src/main/js/MainAbility/common/images/bg-tv.jpg differ
diff --git a/media/JsVideo/entry/src/main/js/MainAbility/common/video/1.mp4 b/media/JsVideo/entry/src/main/js/MainAbility/common/video/1.mp4
new file mode 100644
index 0000000000000000000000000000000000000000..5d12489154f4a74ff583ce0816023bb273ebde89
--- /dev/null
+++ b/media/JsVideo/entry/src/main/js/MainAbility/common/video/1.mp4
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:0310fb9c03f92775e95fed8cfbb5cda498bf021c9eda2444c01cd2825d97b474
+size 810341
diff --git a/media/JsVideo/entry/src/main/js/MainAbility/i18n/en-US.json b/media/JsVideo/entry/src/main/js/MainAbility/i18n/en-US.json
new file mode 100644
index 0000000000000000000000000000000000000000..45cf442b3a1bed81cfe6d48540cc43db5da8906b
--- /dev/null
+++ b/media/JsVideo/entry/src/main/js/MainAbility/i18n/en-US.json
@@ -0,0 +1,12 @@
+{
+  "strings": {
+    "video_duration": "Video duration",
+    "second": "second",
+    "video_start": "Video started",
+    "video_pause": "Video paused",
+    "video_seeked": "Set play progress:",
+    "dialog_title": "Video is complete, replay?",
+    "sure": "OK",
+    "cancel": "Cancel"
+  }
+}
\ No newline at end of file
diff --git a/media/JsVideo/entry/src/main/js/MainAbility/i18n/zh-CN.json b/media/JsVideo/entry/src/main/js/MainAbility/i18n/zh-CN.json
new file mode 100644
index 0000000000000000000000000000000000000000..c0f08e341c1bbc4867981a9f73c8c7c9b9e13c85
--- /dev/null
+++ b/media/JsVideo/entry/src/main/js/MainAbility/i18n/zh-CN.json
@@ -0,0 +1,12 @@
+{
+  "strings": {
+    "video_duration": "视频时长",
+    "second": "秒",
+    "video_start": "视频开始播放",
+    "video_pause": "视频暂停播放",
+    "video_seeked": "设置播放进度：",
+    "dialog_title": "视频播放完成，是否重新播放?",
+    "sure": "确定",
+    "cancel": "取消"
+  }
+}
\ No newline at end of file
diff --git a/media/JsVideo/entry/src/main/js/MainAbility/pages/index/index.css b/media/JsVideo/entry/src/main/js/MainAbility/pages/index/index.css
new file mode 100644
index 0000000000000000000000000000000000000000..1f0c355cf3e74ed41d726032612dfacd7fb19f8f
--- /dev/null
+++ b/media/JsVideo/entry/src/main/js/MainAbility/pages/index/index.css
@@ -0,0 +1,71 @@
+/*
+ * Copyright (c) 2021 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.
+ */
+.container {
+    flex-direction: column;
+    height: 100%;
+}
+
+.video-block {
+    width: 100%;
+    height: 500px;
+    margin-top: 1px;
+}
+
+.video {
+    width: 100%;
+    height: 500px;
+    object-fit: contain;
+    opacity: 0.6;
+}
+
+.image {
+    width: 100%;
+    height: 100%;
+    margin-bottom: 70px;
+}
+
+.dialog-main {
+    width: 90%;
+}
+
+.dialog-content {
+    flex-direction: column;
+    align-items: center;
+}
+
+.inner-txt {
+    width: 98%;
+    margin-top: 20px;
+    flex-direction: column;
+    align-items: center;
+    justify-content: space-around;
+}
+
+.txt {
+    font-size: 20px;
+}
+
+.inner-btn {
+    width: 98%;
+    justify-content: space-around;
+    align-items: center;
+    margin-top: 20px;
+    margin-bottom: 20px;
+}
+
+#timeDialog .dialog-div .inner-txt {
+    margin-top: 20px;
+    margin-bottom: 20px;
+}
\ No newline at end of file
diff --git a/media/JsVideo/entry/src/main/js/MainAbility/pages/index/index.hml b/media/JsVideo/entry/src/main/js/MainAbility/pages/index/index.hml
new file mode 100644
index 0000000000000000000000000000000000000000..20d229c4d15bd682e09d5f84487513ff405f93b5
--- /dev/null
+++ b/media/JsVideo/entry/src/main/js/MainAbility/pages/index/index.hml
@@ -0,0 +1,49 @@
+<!--
+Copyright (c) 2021 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.
+-->
+<div class="container" id="page">
+    <stack class="video-block">
+        <image class="image" src="/common/images/bg-tv.jpg"></image>
+        <video id="video"
+               class="video"
+               src="{{url}}"
+               autoplay="{{ autoplay }}"
+               poster="/common/images/bg-tv.jpg"
+               controls="{{ controlShow }}"
+               loop="{{ loop }}"
+               starttime="{{startTime}}}"
+               speed="{{speed}}"
+               on:prepared="prepared"
+               on:start="start"
+               on:pause="pause"
+               on:finish="finish"
+               on:seeked="seeked"
+               on:timeupdate="timeupdate"
+               on:longpress="longPress"
+               on:click="onClick" >
+        </video>
+    </stack>
+
+    <dialog id="confirmDialog" class="dialog-main">
+        <div class="dialog-content">
+            <div class="inner-txt">
+                <text class="txt">{{ $t('strings.dialog_title') }}</text>
+            </div>
+            <div class="inner-btn">
+                <button type="capsule" value="{{ $t('strings.cancel') }}" onclick="cancel" class="btn-txt"></button>
+                <button type="capsule" value="{{ $t('strings.sure') }}" onclick="confirm" class="btn-txt"></button>
+            </div>
+        </div>
+    </dialog>
+</div>
diff --git a/media/JsVideo/entry/src/main/js/MainAbility/pages/index/index.js b/media/JsVideo/entry/src/main/js/MainAbility/pages/index/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..4bf39934a1be952315642afa3de87abeef2188ab
--- /dev/null
+++ b/media/JsVideo/entry/src/main/js/MainAbility/pages/index/index.js
@@ -0,0 +1,83 @@
+/*
+ * Copyright (c) 2021 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 prompt from '@system.prompt';
+import router from '@system.router';
+
+export default {
+  data: {
+    autoplay: false, // 是否自动播放
+    url: '/common/video/1.mp4', // 视频地址
+    controlShow: true, // 是否显示控制栏
+    loop: true, // 是否循环播放
+    startTime: 2, // 播放开始时间
+    speed: 0.3, // 播放速度
+    isStart:false
+  },
+  // 视频准备完成时触发该事件
+  prepared(e) {
+    this.showPrompt(this.$t('strings.video_duration') + e.duration + this.$t('strings.second'));
+  },
+  // 视频开始播放
+  start() {
+    this.showPrompt(this.$t('strings.video_start'));
+    this.isStart = true
+  },
+  // 视频暂停播放
+  pause() {
+    this.showPrompt(this.$t('strings.video_pause'));
+    this.isStart = false
+  },
+  // 视频播放完成
+  finish() {
+    this.$element('confirmDialog').show();
+  },
+  // 拖动进度条调用
+  seeked(e) {
+    this.showPrompt(this.$t('strings.video_seeked') + e.currenttime + this.$t('strings.second'));
+  },
+  // 播放进度变化调用
+  timeupdate(e) {
+  },
+  // dialog确定
+  confirm() {
+    this.$element('video').start();
+    this.$element('confirmDialog').close();
+  },
+  // dialog取消
+  cancel() {
+    this.$element('confirmDialog').close();
+  },
+  // 弹框
+  showPrompt(msg) {
+    prompt.showToast({
+      message: msg,
+      duration: 1000
+    });
+  },
+  // 点击视频
+  onClick() {
+    if(this.isStart) {
+      this.$element('video').pause()
+      this.isStart = false
+    }else {
+      this.$element('video').start();
+      this.isStart = true
+    }
+  },
+  // 长按视频
+  longPress(){
+    router.replace({uri:'pages/index/index'})
+  }
+};
diff --git a/media/JsVideo/entry/src/main/resources/base/element/string.json b/media/JsVideo/entry/src/main/resources/base/element/string.json
new file mode 100644
index 0000000000000000000000000000000000000000..ddb815dd71f66b7da40fbdbe28227ebbe461c339
--- /dev/null
+++ b/media/JsVideo/entry/src/main/resources/base/element/string.json
@@ -0,0 +1,12 @@
+{
+  "string": [
+    {
+      "name": "entry_MainAbility",
+      "value": "JsVideo"
+    },
+    {
+      "name": "description_mainability",
+      "value": "JsVideo Ability"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/media/JsVideo/entry/src/main/resources/base/media/icon.png b/media/JsVideo/entry/src/main/resources/base/media/icon.png
new file mode 100644
index 0000000000000000000000000000000000000000..ce307a8827bd75456441ceb57d530e4c8d45d36c
Binary files /dev/null and b/media/JsVideo/entry/src/main/resources/base/media/icon.png differ
diff --git a/media/JsVideo/screenshots/devices/main.jpg b/media/JsVideo/screenshots/devices/main.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..8c9f2d27dcb6bfeddc38e2fb8ef9c4031961abdc
Binary files /dev/null and b/media/JsVideo/screenshots/devices/main.jpg differ
diff --git a/media/JsVideo/settings.gradle b/media/JsVideo/settings.gradle
new file mode 100644
index 0000000000000000000000000000000000000000..4773db73233a570c2d0c01a22e75321acfbf7a07
--- /dev/null
+++ b/media/JsVideo/settings.gradle
@@ -0,0 +1 @@
+include ':entry'