修复iphone x下poster不显示的bug

2019专题/特炫宣传页/src/index-h5.html

@@ -42,7 +42,7 @@
 
             </div>
         </div>
-        <div class="mod-cool">
+        <!-- <div class="mod-cool">
             <div class="common-title">
                 <div class="bg">COOL</div>
                 <h3 class="title">炫酷视频特效</h3>
@@ -52,7 +52,7 @@
                 <div class="eg-img eg-img-1"><img src="./img/h5/img-4.jpg" alt=""></div>
                 <div class="eg-img eg-img-2"><img src="./img/h5/img-5.jpg" alt=""></div>
             </div>
-        </div>
+        </div> -->
         <div class="mod-ft">广州市偶家科技有限公司 © 2019-2029 Duowan.com 版权所有</div>
     </div>
 

2019专题/特炫宣传页/src/index-pc.html

@@ -40,14 +40,14 @@
             <div class="eg-img"><img src="./img/h5/img-2.jpg" alt=""></div>
             <div class="eg-img"><img src="./img/h5/img-3.jpg" alt=""></div>
         </div>
-        <div class="mod-cool">
+        <!-- <div class="mod-cool">
             <div class="common-title">
                 <h3 class="title">炫酷视频特效</h3>
                 <p>超炫酷特效一秒变大片</p>
             </div>
             <div class="eg-img"><img src="./img/h5/img-4.jpg" alt=""></div>
             <div class="eg-img"><img src="./img/h5/img-5.jpg" alt=""></div>
-        </div>
+        </div> -->
         <div class="mod-ft">广州市偶家科技有限公司 © 2019-2029 Duowan.com 版权所有</div>  
     </div>
     

2019专题/特炫宣传页/src/modules/page/share.js

@@ -1,19 +1,22 @@
 var utils = require("../utils");
 var tipsMaskTmpl = __inline("../../tpl/tips-mask.tmpl");
+var videoTmpl = function(opts) {
+    return `<video preload="auto"
+    class="${utils.isMobile() && "full-screen"}"
+    src="${opts.url}"
+    poster="${opts.cover}"
+    x5-video-player-fullscreen="false" 
+    loop 
+    playsinline="true"
+    webkit-playsinline="true"
+    x5-video-player-type="h5">
+</video>`;
+};
 
 class Index {
     constructor() {
-        this.init();
         this.id = utils.getParam("id");
         this.getVideoInfo();
-        this.resize = false;
-        if (utils.isMobile()) {
-            this.onResize();
-        }
-    }
-
-    init() {
-        this.bindEvent();
     }
 
     bindEvent() {
@@ -52,7 +55,6 @@ class Index {
     }
 
     onResize() {
-        this.resize = true;
         var $video = $("video").eq(0);
         if (utils.isMobile()) {
             $video.addClass("full-screen");
@@ -73,7 +75,7 @@ class Index {
             alert("无法获取ID");
             return;
         }
-        let API = "https://test-api-texiu.duowan.com/template/detail";
+        let API = "//api-texiu.duowan.com/template/detail";
         let self = this;
         $.ajax({
             url: API,
@@ -88,15 +90,18 @@ class Index {
     requsetCb(ret) {
         var data = ret.data;
         var self = this;
+        $(".page-share").prepend(videoTmpl(data));
+        this.bindEvent();
+        if (utils.isMobile()) {
+            this.onResize();
+        }
         $("video")
             .on("loadedmetadata", function() {
                 self.onResize();
             })
             .on("error", function(error) {
-                alert(error);
+                alert(error.msg);
             })
-            .attr("poster", data.cover)
-            .attr("src", data.url);
         $("#title").text(data.description);
         document.title = data.name;
     }
@@ -122,7 +127,7 @@ class Index {
     }
 
     btnClick() {
-        if (utils.isWechat()) {
+        if (utils.isMobileWechat()) {
             $(".page-share").append($(tipsMaskTmpl({ isIos: utils.isIos() })));
         } else {
             this.openApp();

2019专题/特炫宣传页/src/modules/utils/utils.js

@@ -27,13 +27,12 @@ var utils = {
         }
         return value;
     },
-
-    //是否微信浏览器
-    isWechat() {
+    //是否移动端微信浏览器
+    isMobileWechat() {
         //window.navigator.userAgent属性包含了浏览器类型、版本、操作系统类型、浏览器引擎类型等信息，这个属性可以用来判断浏览器类型
         var ua = window.navigator.userAgent.toLowerCase();
         //通过正则表达式匹配ua中是否含有MicroMessenger字符串
-        return /MicroMessenger/i.test(ua);
+        return /MicroMessenger/i.test(ua) && !/windowswechat/i.test(ua);
     },
 
     //是否安卓

2019专题/特炫宣传页/src/sass/index-h5.scss

@@ -163,7 +163,7 @@ body {
     }
     .mod-cool {
         width: px2rem(826);
-        margin: px2rem(150) auto px2rem(200);
+        margin: px2rem(150) auto 0;
         .bg {
             text-align: right;
         }
@@ -192,6 +192,7 @@ body {
         }
     }
     .mod-ft {
+        margin-top: px2rem(143);
         padding-bottom: px2rem(120);
         font-size: px2rem(28);
         color: #fff;

2019专题/特炫宣传页/src/sass/share.scss

@@ -27,17 +27,16 @@ body {
 video {
     display: block;
     max-height: 100%;
-    max-width: 100%;
     margin: 0 auto;
 
     &.full-screen {
-        width: 100%;
         height: 100%;
-        object-fit: fill;
     }
 }
 
 .page-share {
+    display: flex;
+    justify-content: center;
     height: 100%;
     position: relative;
 

2019专题/特炫宣传页/src/share.html

@@ -12,15 +12,6 @@
 </head>
 <body>
     <div class="page-share">
-        
-        <video preload="auto" 
-            x5-video-player-fullscreen="false" 
-            loop 
-            playsinline
-            webkit-playsinline="true"
-            x5-video-player-type="h5">
-        </video>
-        
         <!-- <img alt="" /> -->
         <a class="btn-play"></a>
         <div class="shade">