默认提交

 import {
-  getBindtapData
+  getBindtapData,
+  pxToRpx
 } from '../../utils/util';
 
 let app = getApp();
@@ -15,7 +16,9 @@ Page({
     indexInfo: {},
     userInfo: {},
     options: {},
-    detailData: {}
+    detailData: {},
+    vidHeight: 0, // 视频高度
+    isVideoEnded: false,
   },
   onShareAppMessage() {
     let detailData = this.data.detailData;
@@ -27,6 +30,7 @@ Page({
       path,
       imageUrl
     }
+
   },
   showAuth() {
     this.setData({
@@ -98,6 +102,28 @@ Page({
   },
 
   /**
+   * 播放完毕
+   */
+  onVideoEndedHandler(evt) {
+    this.setData({
+      isVideoEnded: true
+    })
+  },
+
+  /**
+   * 重播
+   */
+  onReplayHandler() {
+    let video = wx.createVideoContext("vid", this);
+    console.log("video:", video);
+    video.seek(0);
+    video.play();
+    this.setData({
+      isVideoEnded: false
+    })
+  },
+
+  /**
    * 返回首页
    */
   toIndex() {
@@ -146,6 +172,19 @@ Page({
         this.setData({
           detailData: result
         })
+        let {
+          width,
+          height
+        } = result;
+        let vidHeight = (height / width) * 750;
+        if (vidHeight < 320) {
+          vidHeight = 320;
+        }
+        vidHeight = pxToRpx(vidHeight);
+        this.setData({
+          vidHeight: vidHeight,
+        });
+
         resolve(result);
       }).catch((err) => {
         reject(err);

@@ -29,15 +29,49 @@
     .vid-wrap {
       @extend .fcc;
       @extend .bb;
-      // padding-top: 20px;
       width: 100%;
-      height: 720px;
+      margin: 0 auto;
+      // padding: 10px;
 
       .vid {
         text-align: center;
         width: 100%;
         height: 100%;
       }
+
+      .btn-wrap {
+        display: flex;
+        justify-content: center;
+
+        .btn {
+          background-color: transparent;
+          @extend .fcc;
+          margin: 0 24px;
+          border: solid 4px #ffffff;
+          width: 300px;
+          height: 84px;
+          border-radius: 84px;
+
+          color: #ffffff;
+
+          .iconfont {
+            font-size: 48px;
+          }
+
+          .tt {
+            font-weight: bold;
+            font-size: 36px;
+            padding: 0 8px;
+          }
+
+          .t2 {}
+        }
+
+        .btn2{
+          background-color: #f67b37;
+          border: none;
+        }
+      }
     }
   }
 
@@ -162,8 +196,6 @@
         color: #7f776e;
       }
 
-
-
     }
 
   }

@@ -6,11 +6,21 @@
     <view class="content">
       <!-- 视频详情 -->
       <view class="detail">
-        <view class="vid-wrap">
-          <video objectFit="contain" class="vid" poster="{{detailData.thumbnail}}" src="{{detailData.videoUrl}}" />
+        <view class="vid-wrap" style='height: {{vidHeight}}px;'>
+          <video wx:if="{{!isVideoEnded}}" id="vid" bindended="onVideoEndedHandler" objectFit="contain" class="vid" poster="{{detailData.thumbnail}}" src="{{detailData.videoUrl}}" />
+          <view wx:else class="btn-wrap">
+            <button bindtap="onReplayHandler" class="btn">
+              <span class="t1 iconfont iconrefresh"></span>
+              <span class="tt">重播</span>
+            </button>
+            <button open-type="share" class="btn btn2 ani-scl">
+              <span class="t1 iconfont iconplane"></span>
+              <span class="tt">分享</span>
+            </button>
           </view>
         </view>
-      <div class="share">
+      </view>
+      <view class="share">
         <view class="btn-wrap">
           <button open-type="share" class="  btn btn2">
             <span class="t1 iconfont iconplane"></span>
@@ -21,7 +31,7 @@
             <span class="t1">分享到群</span>
           </button>
         </view>
-      </div>
+      </view>
       <!-- 功能区小标题 -->
       <view class="fc-tit">超有创意的全家福，看了你也想拍！</view>
       <!-- 功能区 -->

@@ -78,7 +78,6 @@ Page({
    * banner切换
    */
   onBannerChangeHandler(e) {
-    console.log("e:", e);
     let index = e.detail.current;
     this.setBannerIndex(index);
   },