mipengine · naixueling · Mar 5, 2020 · Mar 7, 2020
diff --git a/components/mip-video-demo/README.md 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
+<style mip-custom> 
+.open{width: 80px;height:30px; line-height:30px; border: 1px #000000 solid; text-align:center;}
+</style>
+<mip-video-demo id="video" back layout="responsive" width="640" height="360" src="https://gss0.bdstatic.com/-b1Caiqa0d9Bmcmop9aC2jh9h2w8e4_h7sED0YQ_t9iCPK/mda-gjkt21pkrsd8ae5y/mda-gjkt21pkrsd8ae5y.mp4" >
+</mip-video-demo>
+<div class="open">点击播放</div>
+```
+
+## 属性
+
+### src
+
+说明：视频地址
+必选项：是
+类型：字符串
+取值范围：URL
+默认值：无
+
+
+### poster
+
+说明：封面图地址，为了保证视频载入过程中仍然有很好的呈现效果，请设置该字段
+必选项：否
+类型：字符串
+取值范围：URL
+默认值：无
+
+
+### controls
+
+说明：是否显示视频控制控件，包括开始/暂停按钮、全屏按钮、音量按钮等
+必选项：否
+类型：字符串
+取值范围：任何
+默认值：无
+
+
+### back
+
+说明：视频播放结束后是否返回第一帧
+必选项：否
diff --git a/components/mip-video-demo/example/index.html b/components/mip-video-demo/example/index.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html mip>
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
+  <title>MIP page</title>
+  <link rel="canonical" href="对应的原页面地址">
+  <link rel="stylesheet" href="https://c.mipcdn.com/static/v2/mip.css">
+  <style mip-custom>
+    /* 自定义样式 */
+    .open{width: 80px;height:30px; line-height:30px; border: 1px #000000 solid; text-align:center;}
+  </style>
+</head>
+<body>
+<mip-video-demo id="video" back layout="responsive" width="640" height="360" src="https://gss0.bdstatic.com/-b1Caiqa0d9Bmcmop9aC2jh9h2w8e4_h7sED0YQ_t9iCPK/mda-gjkt21pkrsd8ae5y/mda-gjkt21pkrsd8ae5y.mp4" >
+</mip-video-demo>
+<div class="open">点击播放</div>
+<script src="https://c.mipcdn.com/static/v2/mip.js"></script>
+<script src="/mip-video-demo/mip-video-demo.js"></script>
+</body>
+</html>
diff --git a/components/mip-video-demo/index.less 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
@@ -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 = '<video src="' + src + '"></video>'
+    let html = 'src="' + src + '"'
+    if (t1 === true) {
+      let poster = element2.getAttribute('poster')
+      // html = '<video poster="' + poster + '" src="' + src + '"></video>'
+      html = 'poster="' + poster + '" src="' + src + '"'
+    }
+
+    let t2 = element2.hasAttribute('controls')
+    if (t2 === true) {
+      // html = '<video poster="' + poster + '" src="' + src + '" controls></video>'
+      html = html + 'controls'
+    }
+    // element2.innerHTML = html;
+    element2.innerHTML = '<video ' + html + '></video>'
+    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
+      })
+    }
+  }
+}