goods video

service/Application/Home/View/Default/Goods/Index.html

@@ -51,6 +51,11 @@
                         </foreach>
                     </if>
                 </ul>
+                <i class="am-icon-play-circle-o goods-video-submit-start"></i>
+                <i class="goods-video-submit-close none">&times;</i>
+                <video class="goods-video-container none" src="{{$image_host}}/goods.mp4" controls>
+                    your browser does not support the video tag
+                </video>
             </div>
         </div>
 

service/Public/Home/Default/Css/Goods.css

@@ -126,20 +126,16 @@ fieldset legend{margin-left:15px;padding-left:3px;padding-right:3px;color:#333;}
 .am-nav-tabs > li > a { margin-right:0px;}
 .am-nav-tabs > li{border-top: 2px solid transparent;border-bottom:2px solid transparent ;}
 
-
 /*导航固定*/
 ul.am-tabs-nav.am-nav.am-nav-tabs {background: #F5F5F5;}
 
 
-
 /*tab*/
 .tab{ line-height:56px; font-size:12px;}
 .tab a{ color:#07c;}
 .tab a:hover{ color:#c00;}
 .tab a.cur{ font-weight:bold;}
 
-
-
 /*商品详细页*/
 /*iteminfo*/
 .clearfix-right{font-size:12px;}
@@ -162,6 +158,48 @@ ul.am-tabs-nav.am-nav.am-nav-tabs {background: #F5F5F5;}
 .goods-qrcode .qrcode-images{display: none; position: absolute; z-index: 2; top: 30px; right: 0;}
 .goods-qrcode:hover .qrcode-images{display: block;}
 
+/* 视频 */
+.goods-video-submit-start,
+.goods-video-submit-close,
+.goods-video-container {
+    position: absolute;
+}
+.goods-video-submit-start,
+.goods-video-submit-close {
+    font-size: 60px;
+    color: #999;
+    cursor: pointer;
+}
+.goods-video-submit-start:hover,
+.goods-video-submit-close:hover {
+    color: #666;
+}
+.goods-video-submit-start {
+    left: 1px;
+    bottom: 73px;
+    z-index: 2;
+    padding: 10px 10px 2px 10px;
+}
+.goods-video-submit-close {
+    top: 1px;
+    left: 294px;
+    z-index: 4;
+    padding: 12px;
+}
+.goods-video-container {
+    padding-top: 20%;
+    line-height: 32px;
+    font-size: 32px;
+    color: #f00;
+    background: #fff;
+    text-align: center;
+    width: 348px;
+    height: 348px;
+    top: 1px;
+    left: 1px;
+    z-index: 3;
+}
+
 /*销量*/
 .tm-ind-panel, .iteminfo_parameter { border-bottom: 1px solid #F5F5F5; }
 .tm-ind-panel {padding: 10px 5px;position: relative;overflow: hidden;clear: both;display: flex;}    
@@ -327,11 +365,10 @@ li.am-comment{ width:100%}
     .like li:nth-child(1), .like li:nth-child(2), .like li:nth-child(3) { border-top: 0px; }
 }
 
-
 @media only screen and (min-width:1025px) {
     /*放大镜*/
     /* box */
-    .box { width:700px; margin:0px auto; }
+    .box { width:700px; margin:0px auto; position: relative; }
     .tb-pic a { display:table-cell; text-align:center; vertical-align:middle; }
     .tb-pic a img {vertical-align:middle;width: 100%; }
     .tb-pic.tb-s40 img{width:100%;}

service/Public/Home/Default/Js/Goods.js

@@ -252,6 +252,20 @@ $(function() {
         }
     });
 
+    // 视频
+    $('.goods-video-submit-start').on('click', function()
+    {
+        $('.goods-video-container').removeClass('none').trigger('play');
+        $('.goods-video-submit-close').removeClass('none');
+        $('.goods-video-submit-start').addClass('none');
+    });
+    $('.goods-video-submit-close').on('click', function()
+    {
+        $('.goods-video-container').addClass('none').trigger('pause');
+        $('.goods-video-submit-close').addClass('none');
+        $('.goods-video-submit-start').removeClass('none');
+    });
+
 });
 
 // 购买导航动画显示/隐藏