diff --git a/components/mip-video-demo/README.md b/components/mip-video-demo/README.md
new file mode 100644
index 00000000..424686e4
--- /dev/null
+++ b/components/mip-video-demo/README.md
@@ -0,0 +1,59 @@
+# mip-video-demo MIP 视频扩展组件
+
+目前项目存在如下需求： 视频播放前不展示视频控制控件，需要点击播放按钮播放视频，再展示视频播放控件，并且视频播放结束后，视频需要返回到播放前的位置。这个功能无法通过 mip-video 的现有机制实现，因此需要开发 mip-video-demo 来实现相关功能。
+
+标题|内容
+----|----
+类型|通用
+支持布局|responsive,fixed-height,fill,container,fixed
+所需脚本| [https://c.mipcdn.com/static/v2/mip-video-demo/mip-video-demo.js](https://c.mipcdn.com/static/v2/mip-video-demo/mip-video-demo.js)
+
+## 示例
+
+
+### 基本使用
+
+它的基本使用方法如下所示：
+
+```html
+
+
+
+点击播放
+```
+
+## 属性
+
+### src
+
+说明：视频地址
+必选项：是
+类型：字符串
+取值范围：URL
+默认值：无
+
+
+### poster
+
+说明：封面图地址，为了保证视频载入过程中仍然有很好的呈现效果，请设置该字段
+必选项：否
+类型：字符串
+取值范围：URL
+默认值：无
+
+
+### controls
+
+说明：是否显示视频控制控件，包括开始/暂停按钮、全屏按钮、音量按钮等
+必选项：否
+类型：字符串
+取值范围：任何
+默认值：无
+
+
+### back
+
+说明：视频播放结束后是否返回第一帧
+必选项：否
\ No newline at end of file
diff --git a/components/mip-video-demo/example/index.html b/components/mip-video-demo/example/index.html
new file mode 100644
index 00000000..aa80a0fb
--- /dev/null
+++ b/components/mip-video-demo/example/index.html
@@ -0,0 +1,21 @@
+
+
+
+
+
+ MIP page
+
+
+
+
+
+
+
+点击播放
+
+
+
+
\ No newline at end of file
diff --git a/components/mip-video-demo/index.less b/components/mip-video-demo/index.less
new file mode 100644
index 00000000..b9240a84
--- /dev/null
+++ b/components/mip-video-demo/index.less
@@ -0,0 +1,6 @@
+mip-video-demo {
+ .wrapper {
+ margin: 0 auto;
+ text-align: center;
+ }
+}
diff --git a/components/mip-video-demo/mip-video-demo.js b/components/mip-video-demo/mip-video-demo.js
new file mode 100644
index 00000000..ff6851c4
--- /dev/null
+++ b/components/mip-video-demo/mip-video-demo.js
@@ -0,0 +1,46 @@
+/**
+ * @file mip-video-demo
+ * @author nxl(2779523120@qq.com)
+ */
+const {
+ CustomElement
+} = MIP
+
+export default class MIPVideoDemo extends CustomElement {
+ build () {
+ let element = document.getElementsByClassName('open')[0]
+ let element2 = document.getElementById('video')
+ let src = element2.getAttribute('src')
+ let t1 = element2.hasAttribute('poster')
+ // let html = ''
+ let html = 'src="' + src + '"'
+ if (t1 === true) {
+ let poster = element2.getAttribute('poster')
+ // html = ''
+ html = 'poster="' + poster + '" src="' + src + '"'
+ }
+
+ let t2 = element2.hasAttribute('controls')
+ if (t2 === true) {
+ // html = ''
+ html = html + 'controls'
+ }
+ // element2.innerHTML = html;
+ element2.innerHTML = ''
+ element.addEventListener('click', function () {
+ element.style.display = 'none'
+ element2.getElementsByTagName('video')[0].play()
+ element2.getElementsByTagName('video')[0].setAttribute('controls', 'controls')
+ })
+ let back = element2.hasAttribute('back')
+ if (back === true) {
+ element2.getElementsByTagName('video')[0].addEventListener('ended', function () {
+ element.style.display = 'block'
+ element2.getElementsByTagName('video')[0].removeAttribute('controls')
+ let videoSrc = element2.getElementsByTagName('video')[0].currentSrc
+ element2.getElementsByTagName('video')[0].src = ''
+ element2.getElementsByTagName('video')[0].src = videoSrc
+ })
+ }
+ }
+}