diff --git a/ace/ace_standard/src/main/js/default/pages/video/router/index.css b/ace/ace_standard/src/main/js/default/pages/video/router/index.css
new file mode 100644
index 0000000000000000000000000000000000000000..19cd84b30f2d2547b5cdc95259fd1884e3bd30c3
--- /dev/null
+++ b/ace/ace_standard/src/main/js/default/pages/video/router/index.css
@@ -0,0 +1,376 @@
+/**
+ * Copyright (c) 2022 Shenzhen kaiHong Digital Industry Development 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:row;
+    width:100%;
+    height:100%;
+    padding: 1px;
+}
+
+.sub-container{
+    flex-direction: column;
+    height: 100%;
+    flex-weight: 1;
+}
+
+.title{
+    width: 100%;
+    height: 50px;
+    font-size: 18px;
+    margin: 2px;
+    padding: 2px;
+    font-weight: bold;
+    text-align: center;
+}
+.title-style-2{
+    height: 30px;
+}
+
+.sub-title{
+    width: 100%;
+    height: 50px;
+    font-size: 14px;
+    text-align: left;
+    margin: 2px;
+    padding: 2px;
+}
+.sub-title-2{
+    height: 20px;
+}
+.sub-title-3{
+    font-size: 12px;
+}
+
+.style1{
+    width: 100%;
+    height: 100%;
+    min-width: 25px;
+    min-height: 10px;
+    max-width: 300px;
+    max-height: 100px;
+    padding-left: 5px;
+    padding-top: 5px;
+    padding-right: 5px;
+    padding-bottom: 5px;
+    margin-left: 5px;
+    margin-top: 5px;
+    margin-right: 5px;
+    margin-bottom: 5px;
+    border-left-style: solid;
+    border-right-style: dashed;
+    border-top-style: dashed;
+    border-bottom-style: dotted;
+    border-left-width: 1px;
+    border-right-width: 2px;
+    border-top-width: 2px;
+    border-bottom-width: 1px;
+    border-left-color: #ff0000;
+    border-right-color: #00ff00;
+    border-top-color: #0000ff;
+    border-bottom-color: #fff000;
+    border-bottom-left-radius: 10px;
+    border-bottom-right-radius: 15px;
+    border-top-left-radius: 8px;
+    border-top-right-radius: 12px;
+    background: linear-gradient(pink,#fff000);
+    box-shadow: 2px 4px 6px 8px #888888;
+    opacity: 0.5;
+    display: flex;
+    visibility: visible;
+    align-self: center;
+    image-fill: #000fff;
+    clip-path: margin-box;
+}
+
+.style2{
+    width: 300px;
+    height: 100px;
+    padding-start: 10px;
+    padding-end: 15px;
+    margin-start: 5px;
+    margin-end: 10px;
+    border-style: dotted;
+    border-width: 2px;
+    border-color:#000000;
+    border-radius:5px;
+    background-color:#ffaa00;
+    mask-image: url('common/images/icon.png');
+    mask-size: cover;
+    mask-position: center;
+}
+
+.style3{
+    width: 100%;
+    height: 100px;
+    padding: 10px;
+    margin: 5px;
+    border-left: 1px solid #000000;
+    border-right:  2px dashed #00ff00;
+    border-top:  1.5px dotted #0000ff;
+    border-bottom:  2.5px dotted #fff000;
+    background-image:url('common/images/image.png');
+    background-size:cover;
+    background-repeat: repeat-x;
+    background-position: center;
+    flex:1;
+    flex-grow: 2;
+    flex-shrink: 1;
+}
+
+.style4{
+    width: 100%;
+    height: 15%;
+    padding: 10px;
+    margin: 5px;
+    border: 2px solid #000000;
+}
+
+.contain1{
+    width: 100%;
+}
+
+.style5{
+    width: 90%;
+    height: 60px;
+    background-color: yellow;
+    border-image-source: url('/common/images/image.png');
+    border-image-slice: 1px 2px 3px 4px;
+    border-image-width: 2px 3px 4px 5px;
+    border-image-outset: 3px 4px 5px 6px;
+    border-image-repeat: repeat;
+}
+
+.style6{
+    width: 100px;
+    height: 70px;
+    position: absolute;
+    left: 10px;
+    top: 70px;
+    bottom: 5px;
+    right: 10px;
+    background-color: pink;
+    border-image: url('common/images/icon.png') 1px 2px 3px 4px 2px 3px 4px 5px 3px 4px 5px 6px round;
+}
+
+.style7 {
+    width: 100px;
+    height: 100px;
+    border: 1px solid #000000;
+    object-fit: fill;
+}
+
+.color-primary {
+    background-color: mediumpurple;
+}
+
+.color-warning {
+    background-color: pink;
+}
+
+.color-success {
+    background-color: cornflowerblue;
+}
+
+.grid-child {
+    width: 100%;
+    border-radius: 2px;
+}
+
+.grid-left-top {
+    width: 20px;
+    height: 20px;
+    border-radius: 10px;
+    border: 1px solid plum;
+    background: linear-gradient(pink, purple);
+    box-shadow: 0px 0px 1px 1px pink;
+    grid-row-start: 0;
+    grid-column-start: 0;
+    grid-row-end: 0;
+    grid-column-end: 0;
+}
+
+.grid-left-bottom {
+    width: 20px;
+    height: 20px;
+    border-radius: 5px;
+    border: 1px solid plum;
+    background: linear-gradient(pink, #00aaee);
+    box-shadow: 0px 0px 1px 1px pink;
+    grid-row-start: 1;
+    grid-column-start: 0;
+    grid-row-end: 1;
+    grid-column-end: 0;
+}
+
+.grid-right-top {
+    width: 20px;
+    height: 20px;
+    border-radius: 3px;
+    border: 1px dotted plum;
+    background: linear-gradient(mediumpurple, #00aaee);
+    box-shadow: 0px 0px 1px 1px pink;
+    grid-row-start: 0;
+    grid-column-start: 1;
+    grid-row-end: 0;
+    grid-column-end: 1;
+}
+
+.grid-right-bottom {
+    width: 20px;
+    height: 20px;
+    border-radius: 5px;
+    border: 1px dotted plum;
+    background: linear-gradient(pink, mediumpurple);
+    box-shadow: 0px 0px 2px 2px pink;
+    grid-row-start: 1;
+    grid-column-start: 1;
+    grid-row-end: 1;
+    grid-column-end: 1;
+}
+
+.event-container{
+    flex-direction: column;
+    flex-weight: 1;
+}
+
+.event1{
+    width: 90%;
+    flex-weight: 1;
+    background-color: yellow;
+}
+
+.event2{
+    width: 90%;
+    flex-weight: 1;
+    background-color: red;
+}
+
+.event3{
+    width: 90%;
+    flex-weight: 1;
+    background-color: #ad4e2a;
+}
+
+.event4{
+    flex-direction: row;
+    width: 90%;
+    flex-weight: 1;
+    overflow:scroll;
+}
+
+.event5{
+    flex-direction: column;
+    width: 100%;
+    height: 90px;
+    overflow:scroll;
+}
+
+.prop-container{
+    flex-direction: column;
+}
+
+#prop1 {
+    height: 20px;
+    background-color: mediumslateblue;
+    width: 100%;
+    margin: 5px;
+}
+
+.prop2 {
+    height: 20px;
+    background-color: pink;
+    width: 100%;
+    margin: 5px;
+}
+
+.prop3 {
+    height: 20px;
+    background-color: darkseagreen;
+    width: 100%;
+    margin: 5px;
+}
+
+.prop4 {
+    height: 50px;
+    background-color: darkseagreen;
+    width: 100%;
+    margin: 5px;
+}
+
+.prop5 {
+    height: 50px;
+    background-color: darkseagreen;
+    width: 100%;
+    margin: 5px;
+}
+
+.atom-container{
+    flex-direction: column;
+}
+
+.function-container{
+    flex-direction: column;
+}
+
+.function1{
+    background-color: #ff0000;
+    width: 90%;
+    height: 45px;
+}
+
+.function2{
+    background-color: #00ff00;
+    width: 90%;
+    height: 45px;
+}
+
+.function3{
+    background-color: #0000ff;
+    width: 90%;
+    height: 45px;
+}
+
+.function4{
+    flex-direction: row;
+    width: 90%;
+    height: 45px;
+}
+
+.function5{
+    flex-direction: row;
+    width: 90%;
+    height: 45px;
+}
+.function6{
+    flex-direction: row;
+    width: 90%;
+    height: 45px;
+}
+.function7{
+    flex-direction: row;
+    width: 90%;
+    height: 45px;
+}
+.function8{
+    flex-direction: row;
+    width: 90%;
+    height: 45px;
+}
+.function9{
+    flex-direction: row;
+    width: 90%;
+    height: 45px;
+}
\ No newline at end of file
diff --git a/ace/ace_standard/src/main/js/default/pages/video/router/index.hml b/ace/ace_standard/src/main/js/default/pages/video/router/index.hml
new file mode 100644
index 0000000000000000000000000000000000000000..7a3b0aa7df79d565ca2ed791c12128e0478f63b0
--- /dev/null
+++ b/ace/ace_standard/src/main/js/default/pages/video/router/index.hml
@@ -0,0 +1,183 @@
+<div class="container">
+    <div class="sub-container">
+        <text class="title">
+            通用样式
+        </text>
+        <text class="sub-title">
+            video通用样式1
+        </text>
+        <video src="/common/images/video.mp4" id="style1" class="style1">
+        </video>
+        <text  class="sub-title">
+            video通用样式2
+        </text>
+        <video src="/common/images/video.mp4" id="style2" class="style2">
+        </video>
+        <text class="sub-title">
+            video通用样式3
+        </text>
+        <video src="/common/images/video.mp4" id="style3" class="style3">
+        </video>
+        <text  class="sub-title">
+            video通用样式4
+        </text>
+        <video src="/common/images/video.mp4" id="style4" class="style4">
+        </video>
+        <text  class="sub-title">
+            div通用样式5
+        </text>
+        <div class="contain1" style="height: 300px;">
+            <video src="/common/images/video.mp4" id="style5" class="style5">
+            </video>
+            <video src="/common/images/video.mp4" id="style6" class="style6">
+            </video>
+        </div>
+        <text  class="sub-title">
+            video特有样式
+        </text>
+        <video src="/common/images/video.mp4" id="style7" class="style7">
+        </video>
+    </div>
+    <div style="background-color: #000000; width: 2px; height: 100%;">
+    </div>
+    <div class="sub-container">
+        <div class="prop-container">
+            <text class="title title-style-2">
+                通用属性
+            </text>
+            <text class="sub-title sub-title-2">
+                video通用属性1
+            </text>
+            <video id="prop1" class="prop1"
+                   disabled = "true" data-name ="prop1" click-effect="spring-medium">
+            </video>
+            <text  class="sub-title sub-title-2">
+                video通用属性2
+            </text>
+            <video class="prop2" ref ="prop2" id="prop2"
+                   disabled = "false" data-name ="prop2" click-effect="spring-large">
+            </video>
+            <text  class="sub-title sub-title-2">
+                video通用属性3
+            </text>
+            <video style="color: #679855; margin: 5px;" class="prop3" id="prop3">
+            </video>
+            <text  class="sub-title sub-title-2">
+                video特有属性
+            </text>
+            <video src="/common/images/video.mp4" class="prop4" id="prop4"
+                   muted="true" autoplay="true" poster="/common/images/image.png"
+                   controls="true" loop="true" starttime="2" direction="auto"
+                   speed="1.5">
+            </video>
+            <video src="/common/images/video.mp4" class="prop5" id="prop5"
+                   muted="false" autoplay="false" controls="false" loop="false"
+                   starttime="3" direction="vertical" speed="1.0">
+            </video>
+        </div>
+        <div style="background-color: #000000; width: 100%; height: 2px;">
+        </div>
+        <div class="event-container" >
+            <text class="title title-style-2">
+                通用事件
+            </text>
+            <text  class="sub-title sub-title-2">
+                video通用事件1
+            </text>
+            <video src="/common/images/video.mp4" class ="event1" ontouchstart="touchStart"
+                   ontouchmove="touchMove" ontouchend="touchEnd" ontouchcancel="touchCancel">
+            </video>
+            <text  class="sub-title sub-title-2">
+                video通用事件2
+            </text>
+            <video src="/common/images/video.mp4" class ="event2" onclick="click"
+                   ondoubleclick="doubleClick" onlongpress="longPress" onfocus="focus"
+                   onblur="blur" onkey="key" onswipe="swipe" onattached="attached"
+                   ondetached="detached">
+            </video>
+            <text  class="sub-title sub-title-2">
+                video通用事件3
+            </text>
+            <video src="/common/images/video.mp4" class ="event3" onpinchstart="pinchStart"
+                   onpinchupdate="pinchUpdate"
+                   onpinchend="pinchEnd" onpinchcancel="pinchCancel"
+                   ondragstart="dragStart" ondrag="drag"
+                   ondragend="dragEnd" ondragenter="dragEnter"
+                   ondragover="dragOver" ondragleave="dragLeave"
+                   ondrop="drop">
+            </video>
+            <text  class="sub-title sub-title-2">
+                video特有事件1
+            </text>
+            <video src="/common/images/video.mp4" class ="event4" onprepared="prepared"
+                   onstart="start" onpause="pause" onfinish="finish" onerror="error"
+                   onseeking="seeking" onseeked="seeked" ontimeupdate="timeupdate"
+                   onfullscreenchange="fullscreenchange" onstop="stop">
+            </video>
+        </div>
+    </div>
+
+    <div style="background-color: #000000; width: 2px; height: 100%;">
+    </div>
+
+    <div class="sub-container">
+        <div class="atom-container">
+            <text class="title title-style-2">
+                特有方法
+            </text>
+            <text class="sub-title sub-title-2 sub-title-3">
+                video特有方法1
+            </text>
+            <video src="/common/images/video.mp4" id="function4" class="function4" ontouchstart="functionTest4">
+            </video>
+            <text class="sub-title sub-title-2 sub-title-3">
+                video特有方法2
+            </text>
+            <video src="/common/images/video.mp4" id="function5" class="function5" ontouchstart="functionTest5">
+            </video>
+            <text class="sub-title sub-title-2 sub-title-3">
+                video特有方法3
+            </text>
+            <video src="/common/images/video.mp4" id="function6" class="function6" ontouchstart="functionTest6">
+            </video>
+            <text class="sub-title sub-title-2 sub-title-3">
+                video特有方法4
+            </text>
+            <video src="/common/images/video.mp4" id="function7" class="function7" ontouchstart="functionTest7">
+            </video>
+            <text class="sub-title sub-title-2 sub-title-3">
+                video特有方法5
+            </text>
+            <video src="/common/images/video.mp4" id="function8" class="function8" ontouchstart="functionTest8">
+            </video>
+            <text class="sub-title sub-title-2 sub-title-3">
+                video特有方法6
+            </text>
+            <video src="/common/images/video.mp4" id="function9" class="function9" ontouchstart="functionTest9">
+            </video>
+        </div>
+
+        <div style="background-color: #000000; width: 100%; height: 2px;">
+        </div>
+        <div class="function-container">
+            <text class="title title-style-2">
+                通用方法
+            </text>
+            <text class="sub-title sub-title-2 sub-title-3">
+                video通用方法1
+            </text>
+            <video src="/common/images/video.mp4" id="function1" class="function1" ontouchstart="functionTest1">
+            </video>
+            <text class="sub-title sub-title-2 sub-title-3">
+                div通用方法2
+            </text>
+            <video src="/common/images/video.mp4" id="function2" class="function2" ontouchstart="functionTest2">
+            </video>
+            <text class="sub-title sub-title-2 sub-title-3">
+                div通用方法3
+            </text>
+            <video src="/common/images/video.mp4" id="function3" class="function3" ontouchstart="functionTest3">
+            </video>
+        </div>
+    </div>
+</div>
diff --git a/ace/ace_standard/src/main/js/default/pages/video/router/index.js b/ace/ace_standard/src/main/js/default/pages/video/router/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..4e85c27ab8a514250b51991df11402cec58e1e1c
--- /dev/null
+++ b/ace/ace_standard/src/main/js/default/pages/video/router/index.js
@@ -0,0 +1,609 @@
+/**
+ * Copyright (c) 2022 Shenzhen Kaihong Digital Industry Development 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';
+
+var options = {
+    duration: 1500,
+    easing: 'friction',
+    delay: 100,
+    fill: 'forwards',
+    iterations: 2,
+    direction: 'normal',
+};
+var frames = [
+    {
+        transform: {
+            translate: '-120px',
+            rotate:'10deg',
+            scale:0.2,
+            skew:'40deg'
+        },
+        opacity: 0.1,
+        offset: 0.0,
+        width: '40%',
+        height:'20px',
+        backgroundColor:'#ff0000',
+        backgroundPosition:'10px 20px',
+        transformOrigin:'left top'
+    },
+    {
+        transform: {
+            translateX: '0px',
+            translateY: '5px',
+            rotateX:'10deg',
+            rotateY:'10deg',
+            scaleX:0.5,
+            scaleY:0.7,
+            skewX:'22deg',
+            skewY:'30deg'
+        },
+        opacity: 0.6,
+        offset: 2.0,
+        width: '60%',
+        height:'30px',
+        backgroundColor:'#ff00ff',
+        backgroundPosition:'15px 25px',
+        transformOrigin:'center top'
+    },
+    {
+        transform: {
+            translateX: '100px',
+            translateY: '0px',
+            translateZ: '20px',
+            rotateX:'0deg',
+            rotateY:'0deg',
+            rotateZ:'30deg',
+            scaleX:1,
+            scaleY:1,
+            scaleZ:2,
+            skewX:'0',
+            skewY:'0',
+            skewZ:'30deg'
+        },
+        opacity: 1,
+        offset: 0.0,
+        width: '100%',
+        height:'30px',
+        backgroundColor:'#ffff00',
+        backgroundPosition:'0px',
+        transformOrigin:'center center'
+    },
+];
+
+export default {
+
+    onShow(){
+        // 通用属性
+        var prop1 =  this.$element('prop1');
+        var name1 = prop1.dataSet.name
+        var prop2 =  this.$refs.prop2;
+        var name2 = prop2.dataSet.name
+        prompt.showToast({
+            message: 'prop1--' + name1 + '\nprop2--' + name2
+        });
+
+        var styleValues = this.getStyleValues();
+        var propsValues = this.getPropValues();
+
+        globalThis.value = {
+            styleValues:styleValues,
+            propsValues:propsValues
+        }
+    },
+
+    getStyleValues(){
+        var styleValue1 = this.$element("style1").getInspector()
+        var styleValue2 = this.$element("style2").getInspector()
+        var styleValue3 = this.$element("style3").getInspector()
+        var styleValue4 = this.$element("style4").getInspector()
+        var styleValue5 = this.$element("style5").getInspector()
+        var styleValue6 = this.$element("style6").getInspector()
+        var styleValue7 = this.$element("style7").getInspector()
+
+        return {
+            style1:styleValue1,
+            style2:styleValue2,
+            style3:styleValue3,
+            style4:styleValue4,
+            style5:styleValue5,
+            style6:styleValue6,
+            style7:styleValue7
+        }
+    },
+
+    getPropValues(){
+        var propValue1 = this.$element("prop1").getInspector()
+        var propValue2 = this.$element("prop2").getInspector()
+        var propValue3 = this.$element("prop3").getInspector()
+
+        return {
+            prop1:propValue1,
+            prop2:propValue2,
+            prop3:propValue3
+        }
+    },
+
+    touchStart(event){
+        var globalX = event.touches[0].globalX
+        var globalY = event.touches[0].globalY
+        var localX = event.touches[0].localX
+        var localY = event.touches[0].localY
+        var size = event.touches[0].size
+        var force = event.touches[0].force
+        var changeGlobalX = event.changedTouches[0].globalX
+        var changeGlobalY = event.changedTouches[0].globalY
+        var changeLocalX = event.changedTouches[0].localX
+        var changeLocalY = event.changedTouches[0].localY
+        var changeSize = event.changedTouches[0].size
+        var changeForce = event.changedTouches[0].force
+        var message = 'globalX--' + globalX + ',globalY--' + globalY +
+        ',localX--' + localX + ',localY--' + localY  + ',size--' + size + ',force--' + force +
+        ',changeGlobalX--' + changeGlobalX + ',changeGlobalY--' + changeGlobalY +
+        ',changeLocalX--' + changeLocalX + ',changeLocalY--' + changeLocalY  +
+        ',changeSize--' + changeSize + ',changeForce--' + changeForce;
+        prompt.showToast({
+            message: 'touchstart:\n' + message
+        });
+    },
+
+    touchMove(event){
+        var globalX = event.touches[0].globalX
+        var globalY = event.touches[0].globalY
+        var localX = event.touches[0].localX
+        var localY = event.touches[0].localY
+        var size = event.touches[0].size
+        var force = event.touches[0].force
+        var changeGlobalX = event.changedTouches[0].globalX
+        var changeGlobalY = event.changedTouches[0].globalY
+        var changeLocalX = event.changedTouches[0].localX
+        var changeLocalY = event.changedTouches[0].localY
+        var changeSize = event.changedTouches[0].size
+        var changeForce = event.changedTouches[0].force
+        var message = 'globalX--' + globalX + ',globalY--' + globalY +
+        ',localX--' + localX + ',localY--' + localY  + ',size--' + size + ',force--' + force +
+        ',changeGlobalX--' + changeGlobalX + ',changeGlobalY--' + changeGlobalY +
+        ',changeLocalX--' + changeLocalX + ',changeLocalY--' + changeLocalY  +
+        ',changeSize--' + changeSize + ',changeForce--' + changeForce;
+        prompt.showToast({
+            message: 'touchMove:\n' +message
+        });
+    },
+
+    touchEnd(event){
+        var globalX = event.touches[0].globalX
+        var globalY = event.touches[0].globalY
+        var localX = event.touches[0].localX
+        var localY = event.touches[0].localY
+        var size = event.touches[0].size
+        var force = event.touches[0].force
+        var changeGlobalX = event.changedTouches[0].globalX
+        var changeGlobalY = event.changedTouches[0].globalY
+        var changeLocalX = event.changedTouches[0].localX
+        var changeLocalY = event.changedTouches[0].localY
+        var changeSize = event.changedTouches[0].size
+        var changeForce = event.changedTouches[0].force
+        var message = 'globalX--' + globalX + ',globalY--' + globalY +
+        ',localX--' + localX + ',localY--' + localY  + ',size--' + size + ',force--' + force +
+        ',changeGlobalX--' + changeGlobalX + ',changeGlobalY--' + changeGlobalY +
+        ',changeLocalX--' + changeLocalX + ',changeLocalY--' + changeLocalY  +
+        ',changeSize--' + changeSize + ',changeForce--' + changeForce;
+        prompt.showToast({
+            message: 'touchEnd:\n' +message
+        });
+    },
+
+    touchCancel(event){
+        var globalX = event.touches[0].globalX
+        var globalY = event.touches[0].globalY
+        var localX = event.touches[0].localX
+        var localY = event.touches[0].localY
+        var size = event.touches[0].size
+        var force = event.touches[0].force
+        var changeGlobalX = event.changedTouches[0].globalX
+        var changeGlobalY = event.changedTouches[0].globalY
+        var changeLocalX = event.changedTouches[0].localX
+        var changeLocalY = event.changedTouches[0].localY
+        var changeSize = event.changedTouches[0].size
+        var changeForce = event.changedTouches[0].force
+        var message = 'globalX--' + globalX + ',globalY--' + globalY +
+        ',localX--' + localX + ',localY--' + localY  + ',size--' + size + ',force--' + force +
+        ',changeGlobalX--' + changeGlobalX + ',changeGlobalY--' + changeGlobalY +
+        ',changeLocalX--' + changeLocalX + ',changeLocalY--' + changeLocalY  +
+        ',changeSize--' + changeSize + ',changeForce--' + changeForce;
+        prompt.showToast({
+            message: 'touchCancel:\n' +message
+        });
+    },
+
+    click(){
+        prompt.showToast({
+            message: 'click'
+        });
+    },
+
+    doubleClick(){
+        prompt.showToast({
+            message: 'doubleClick'
+        });
+    },
+
+    longPress(){
+        prompt.showToast({
+            message: 'longPress'
+        });
+    },
+
+    focus(){
+        prompt.showToast({
+            message: 'focus'
+        });
+    },
+
+    blur(){
+        prompt.showToast({
+            message: 'blur'
+        });
+    },
+
+    key(event){
+        var code = event.code;
+        var action = event.action;
+        var repeatCount = event.repeatCount;
+        var timestampStart = event.timestampStart;
+        var message = 'code--' + code + ',action--' + action +
+        ',repeatCount--' + repeatCount + ',timestampStart--' + timestampStart;
+        prompt.showToast({
+            message: 'key:\n' + message
+        });
+    },
+
+    swipe(event){
+        var direction = event.direction;
+        var distance = event.distance;
+        var message = 'direction--' + direction + ',distance--' + distance;
+        prompt.showToast({
+            message: 'swipe:\n' + message
+        });
+    },
+
+    attached(){
+        prompt.showToast({
+            message: 'attached'
+        });
+    },
+
+    detached(){
+        prompt.showToast({
+            message: 'detached'
+        });
+    },
+
+    pinchStart(event){
+        var scale = event.scale
+        var pinchCenterX = event.pinchCenterX
+        var pinchCenterY = event.pinchCenterY
+        var message = 'scale--' + scale + ',pinchCenterX--' + pinchCenterX +
+        ',pinchCenterY--' + pinchCenterY;
+        prompt.showToast({
+            message: 'pinchStart:\n' + message
+        });
+    },
+
+    pinchUpdate(event){
+        var scale = event.scale
+        var pinchCenterX = event.pinchCenterX
+        var pinchCenterY = event.pinchCenterY
+        var message = 'scale--' + scale + ',pinchCenterX--' + pinchCenterX +
+        ',pinchCenterY--' + pinchCenterY;
+        prompt.showToast({
+            message: 'pinchUpdate:\n' + message
+        });
+    },
+
+    pinchEnd(event){
+        var scale = event.scale
+        var pinchCenterX = event.pinchCenterX
+        var pinchCenterY = event.pinchCenterY
+        var message = 'scale--' + scale + ',pinchCenterX--' + pinchCenterX +
+        ',pinchCenterY--' + pinchCenterY;
+        prompt.showToast({
+            message: 'pinchUpdate:\n' + message
+        });
+    },
+
+    pinchCancel(event){
+        var scale = event.scale
+        var pinchCenterX = event.pinchCenterX
+        var pinchCenterY = event.pinchCenterY
+        var message = 'scale--' + scale + ',pinchCenterX--' + pinchCenterX +
+        ',pinchCenterY--' + pinchCenterY;
+        prompt.showToast({
+            message: 'pinchCancel:\n' + message
+        });
+    },
+
+    dragStart(event){
+        var type = event.type
+        var globalX = event.globalX
+        var globalY = event.globalY
+        var timestamp = event.timestamp
+        var message = 'type--' + type + ',globalX--' + globalX +
+        ',globalY--' + globalY + ',timestamp--' + timestamp;
+        prompt.showToast({
+            message: 'dragStart:\n' + message
+        });
+    },
+
+    drag(event){
+        var type = event.type
+        var globalX = event.globalX
+        var globalY = event.globalY
+        var timestamp = event.timestamp
+        var message = 'type--' + type + ',globalX--' + globalX +
+        ',globalY--' + globalY + ',timestamp--' + timestamp;
+        prompt.showToast({
+            message: 'drag:\n' + message
+        });
+    },
+
+    dragEnd(event){
+        var type = event.type
+        var globalX = event.globalX
+        var globalY = event.globalY
+        var timestamp = event.timestamp
+        var message = 'type--' + type + ',globalX--' + globalX +
+        ',globalY--' + globalY + ',timestamp--' + timestamp;
+        prompt.showToast({
+            message: 'dragEnd:\n' + message
+        });
+    },
+
+    dragEnter(event){
+        var type = event.type
+        var globalX = event.globalX
+        var globalY = event.globalY
+        var timestamp = event.timestamp
+        var message = 'type--' + type + ',globalX--' + globalX +
+        ',globalY--' + globalY + ',timestamp--' + timestamp;
+        prompt.showToast({
+            message: 'dragEnter:\n' + message
+        });
+    },
+
+    dragOver(event){
+        var type = event.type
+        var globalX = event.globalX
+        var globalY = event.globalY
+        var timestamp = event.timestamp
+        var message = 'type--' + type + ',globalX--' + globalX +
+        ',globalY--' + globalY + ',timestamp--' + timestamp;
+        prompt.showToast({
+            message: 'dragOver:\n' + message
+        });
+    },
+
+    dragLeave(event){
+        var type = event.type
+        var globalX = event.globalX
+        var globalY = event.globalY
+        var timestamp = event.timestamp
+        var message = 'type--' + type + ',globalX--' + globalX +
+        ',globalY--' + globalY + ',timestamp--' + timestamp;
+        prompt.showToast({
+            message: 'dragLeave:\n' + message
+        });
+    },
+
+    drop(event){
+        var type = event.type
+        var globalX = event.globalX
+        var globalY = event.globalY
+        var timestamp = event.timestamp
+        var message = 'type--' + type + ',globalX--' + globalX +
+        ',globalY--' + globalY + ',timestamp--' + timestamp;
+        prompt.showToast({
+            message: 'drop:\n' + message
+        });
+    },
+
+    functionTest1(event){
+        var function1 =  this.$element('function1');
+        function1.focus(true)
+        var rect = function1.getBoundingClientRect();
+        var width = rect.width;
+        var height = rect.height;
+        var left = rect.left;
+        var top = rect.top;
+        var message = 'width--' + width + ',height--' + height +
+        ',left--' + left + ',top--' + top;
+        prompt.showToast({
+            message: 'function1 rect:\n' + message
+        });
+    },
+
+    functionTest2(event){
+        var function2 =  this.$element('function2');
+        let observer = function2.createIntersectionObserver({
+            ratios: [0.2, 0], // number
+        });
+        observer.observe((isVisible, ratio)=> {
+            console.info('this element is ' + isVisible + 'ratio is ' + ratio)
+            prompt.showToast({
+                message: 'function2 observer:\n' + 'isVisible--' + isVisible + ',ratio--' + ratio
+            });
+        })
+
+        observer.unobserve()
+    },
+
+    functionTest3(event){
+        var function3 =  this.$element('function3');
+
+        var animation = function3.animate(frames, options);
+        animation.play()
+        animation.onfinish = function(){
+            prompt.showToast({
+                message: 'The animation is finished.'
+            });
+        };
+
+        animation.oncancel = function(){
+            prompt.showToast({
+                message: 'The animation is canceled.'
+            });
+        };
+
+        animation.onrepeat = function(){
+            prompt.showToast({
+                message: 'The animation is repeated.'
+            });
+        };
+
+        setTimeout(() => {
+            animation.reverse()
+        }, 500)
+
+        setTimeout(() => {
+            animation.pause()
+        }, 1000)
+
+        setTimeout(() => {
+            animation.cancel()
+        }, 1500)
+    },
+
+    functionTest4(){
+        var function4 =  this.$element('function4');
+        function4.start();
+        prompt.showToast({
+            message: 'function4 video start.'
+        });
+    },
+    functionTest5(){
+        var function5 =  this.$element('function5');
+        function5.pause();
+        prompt.showToast({
+            message: 'function5 video pause.'
+        })
+    },
+    functionTest6(){
+        var function6 =  this.$element('function6');
+        function6.setCurrentTime({
+            currenttime: 2
+        });
+        prompt.showToast({
+            message: 'function6 video setCurrentTime.'
+        })
+    },
+    functionTest7(){
+        var function7 =  this.$element('function7');
+        function7.requestFullscreen({
+            screenOrientation : "default"
+        });
+        prompt.showToast({
+            message: 'function7 video requestFullscreen.'
+        })
+
+    },
+    functionTest8(){
+        var function8 =  this.$element('function8');
+        function8.exitFullscreen();
+        prompt.showToast({
+            message: 'function8 video exitFullscreen.'
+        })
+    },
+    functionTest9(){
+        var function9 =  this.$element('function9');
+        function9.stop();
+        prompt.showToast({
+            message: 'function9 video stop.'
+        })
+    },
+
+    reachStart(){
+        prompt.showToast({
+            message: 'reachStart'
+        });
+    },
+
+    reachEnd(){
+        prompt.showToast({
+            message: 'reachEnd'
+        });
+    },
+
+    reachTop(){
+        prompt.showToast({
+            message: 'reachTop'
+        });
+    },
+
+    reachBottom(){
+        prompt.showToast({
+            message: 'reachBottom'
+        });
+    },
+    prepared() {
+        prompt.showToast({
+            message: 'prepared'
+        });
+    },
+    start() {
+        prompt.showToast({
+            message: 'start'
+        });
+    },
+    pause() {
+        prompt.showToast({
+            message: 'pause'
+        });
+    },
+    finish() {
+        prompt.showToast({
+            message: 'finish'
+        });
+    },
+    error() {
+        prompt.showToast({
+            message: 'error'
+        });
+    },
+    seeking() {
+        prompt.showToast({
+            message: 'seeking'
+        });
+    },
+    seeked() {
+        prompt.showToast({
+            message: 'seeked'
+        });
+    },
+    timeupdate() {
+        prompt.showToast({
+            message: 'timeupdate'
+        });
+    },
+    fullscreenchange() {
+        prompt.showToast({
+            message: 'fullscreenchange'
+        });
+    },
+    stop() {
+        prompt.showToast({
+            message: 'stop'
+        });
+    }
+}