优化交互

2019专题/特炫宣传页/fis-conf.js

@@ -106,7 +106,7 @@ fis.media('dev').match('*.{jpg,png,jpeg,gif,css,js}', {
 });
 
 fis.media('prod').match('*.{jpg,png,jpeg,gif,css,scss,js,woff,ttf,svg,eot}', {
-    domain: 'http://pub.dwstatic.com' + path,
+    domain: '//pub.dwstatic.com' + path,
 }).match('::package', {
     postpackager: fis.plugin('loader', {
         allInOne: {

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

@@ -1,6 +1,6 @@
 // var utils = require('/src/lib/utils.js')
-var utils = require('../utils')
-var tipsMaskTmpl = __inline('../../tpl/tips-mask.tmpl')
+var utils = require("../utils");
+var tipsMaskTmpl = __inline("../../tpl/tips-mask.tmpl");
 class Index {
     constructor() {
         this.init();
@@ -13,75 +13,107 @@ class Index {
     }
 
     bindEvent() {
-        var self = this
-        $(".btn-play").on("touchend", function() {
-            document.getElementsByTagName("video")[0].play();
-            $('img').hide()
-            $(this).hide();
-            return false
+        var self = this;
+
+        $("body").on("click", ".mask-wrap", function() {
+            $(this).remove();
+            return false;
+        });
+
+        $(".btn").on("click", function(event) {
+            event.stopPropagation();
+            self.btnClick();
+            return false;
         });
 
+        $("video")
+            .on("pause", function() {
+                $(".btn-play").show();
+            })
+            .on("play", function() {
+                $(".btn-play").hide();
+            });
 
-        $('body').on('click', '.mask-wrap', function() {
-            $(this).remove()
-            return false
-        })
-        
+        var video = $("video").get(0);
 
-        $('.btn').on('touchend',function() {
-            self.btnClick()
-            return false;
-        })
+        $(".page-share").on("click", function() {
+            if (video.paused) {
+                video.play();
+            } else {
+                video.pause();
+            }
+        });
 
-        $('video').on('pause', function() {
-            $(".btn-play").show()
-        }).on('click',function() {
-            $(this).get(0).pause()
-        })
+        $(window).on("resize", this.onResize);
     }
+
+    onResize() {
+        var $video = $("video").eq(0);
+        $(".shade").css("visibility", "visible");
+        $('.btn-play').css("visibility", "visible");
+        $("#title").css({ left: $video.css("marginLeft") });
+        $(".btn").css({
+            right: `${parseFloat($video.css("marginRight").slice(0, -2)) +
+                18}px`
+        });
+    }
+
     getVideoInfo() {
         if (!this.id) {
             alert("无法获取ID");
             return;
         }
         let API = "https://test-api-texiu.duowan.com/template/detail";
+        let self = this;
         $.ajax({
             url: API,
             data: { id: this.id },
             dataType: "json",
-            success: this.requsetCb
+            success: function(ret) {
+                self.requsetCb(ret);
+            }
         });
     }
 
     requsetCb(ret) {
         var data = ret.data;
-        $('img').attr('src',data.cover)
+        var self = this;
         $("video")
             .attr("poster", data.cover)
-            .attr("src", data.url);
+            .attr("src", data.url)
+            .on("loadedmetadata", function() {
+                self.onResize();
+            });
         $("#title").text(data.description);
         document.title = data.name;
     }
 
     openApp() {
-        var self = this
-        var downloadLink = $('.btn').find('span').attr('href')
-        // self.openApp('dwsupershow://toTemplateDetail?templateId=' + self.id)
-        location.href = 'dwsupershow://toTemplateDetail?templateId=' + self.id
-        if(downloadLink) {
-            setTimeout(function() {
-                if (document.hasFocus()) {
-                    location.href = downloadLink
-                }
-            },1500)
+        var self = this;
+        var downloadLink = $(".btn")
+            .find("span")
+            .data(utils.isMobile() ? "h5" : "pc");
+
+        if (utils.isMobile()) {
+            location.href =
+                "dwsupershow://toTemplateDetail?templateId=" + self.id;
+            if (downloadLink) {
+                setTimeout(function() {
+                    if (document.hasFocus()) {
+                        location.href = downloadLink;
+                    }
+                }, 1500);
+            }
+        } else {
+            location.href = downloadLink;
         }
     }
 
     btnClick() {
-        if( utils.isWechat()) {
-            $('.page-share').append($(tipsMaskTmpl({isIos: utils.isIos()})))
+        if (utils.isWechat()) {
+            $(".page-share").append($(tipsMaskTmpl({ isIos: utils.isIos() })));
         } else {
-            this.openApp()
+            this.openApp();
         }
     }
 }
@@ -89,4 +121,3 @@ class Index {
 $(function() {
     new Index();
 });
-

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

@@ -1,7 +1,7 @@
 var utils = {
     //获取query参数
     getParam(name) {
-        var getParam2 = function (name, str) {
+        var getParam2 = function(name, str) {
             //获取参数name的值
             var reg = new RegExp("(^|!|&|\\?)" + name + "=([^&]*)(&|$)");
 
@@ -33,15 +33,20 @@ var utils = {
         //window.navigator.userAgent属性包含了浏览器类型、版本、操作系统类型、浏览器引擎类型等信息，这个属性可以用来判断浏览器类型
         var ua = window.navigator.userAgent.toLowerCase();
         //通过正则表达式匹配ua中是否含有MicroMessenger字符串
-        return /MicroMessenger/i.test(ua)
+        return /MicroMessenger/i.test(ua);
     },
 
     //是否安卓
     isIos() {
         var u = navigator.userAgent;
-        return /\(i[^;]+;( U;)? CPU.+Mac OS X/.test(u)
+        return /\(i[^;]+;( U;)? CPU.+Mac OS X/.test(u);
+    },
 
+    isMobile() {
+        return /Android|webOS|iPhone|Windows Phone|iPod|BlackBerry|SymbianOS/i.test(
+            window.navigator.userAgent
+        );
     }
-}
+};
 
-module.exports = utils
+module.exports = utils;

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

@@ -23,7 +23,8 @@ body {
 .page-index {
     overflow: hidden;
     min-height: 100%;
-    background: #21212c url('../img/h5/bg.jpg') 0 / px2rem(81) px2rem(78);
+    background: #21212c url('../img/h5/bg.jpg') no-repeat;
+    background-size: px2rem(81) px2rem(78);
     header {
         width: px2rem(832);
         height: px2rem(116);

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

@@ -12,30 +12,39 @@ $baseFontColor:#999;
 @import "base/mMixins";
 
 
-html,body {
+html,
+body {
     height: 100%;
     overflow: hidden;
 }
+
 body {
     font-size: $baseFontSize;
-    font-family:$pingfan, $yahei    , Helvetica, Arial, sans-serif;
+    font-family: $pingfan, $yahei, Helvetica, Arial, sans-serif;
     background-color: #fff;
 }
+
 video {
-    object-fit: fill;
+    display: block;
+    max-height: 100%;
+    max-width: 100%;
+    margin: 0 auto;
 }
 
 .page-share {
     height: 100%;
     position: relative;
+
     .mask-wrap {
         cursor: pointer;
-        width:100%;height:100%;
+        width: 100%;
+        height: 100%;
         position: absolute;
         top: 0;
         left: 0;
         background: url(../img/icon-arrow.png) rem(500) rem(37) / rem(204) rem(158) no-repeat rgba($color: #000000, $alpha: 0.8);
         z-index: 10;
+
         .andriod i {
             position: absolute;
             width: rem(88);
@@ -44,14 +53,15 @@ video {
             top: rem(222);
             left: 50%;
             margin-left: -rem(44);
-           
         }
+
         .ios {
             p {
                 width: rem(210);
                 margin-left: -rem(105);
             }
-            i{
+
+            i {
                 position: absolute;
                 width: rem(86);
                 height: rem(86);
@@ -59,9 +69,10 @@ video {
                 top: rem(222);
                 left: 50%;
                 margin-left: -rem(43);
-                
+
             }
         }
+
         p {
             position: absolute;
             left: 50%;
@@ -74,69 +85,76 @@ video {
             line-height: rem(50);
         }
     }
+
     img {
-        width:100%;height:100%;
         position: absolute;
-        top:0;
+        top: 0;
         left: 0;
         z-index: 1;
+        max-height: 100%;
+        max-width: 100%;
+        margin: 0 auto;
     }
-    video {
-        width: 100%;
-        // height: 100%;
-    }
+
     .shade {
-        height: rem(595);
+        height: 80%;
         background: url(../img/img-mask.png) 0 0 / 1px 100%;
         z-index: 9;
         width: 100%;
         position: absolute;
         bottom: 0;
-        left: 0; 
+        left: 0;
+        visibility: hidden;
         p {
-            width: rem(500);
-            padding: rem(30) 0 rem(30) rem(30);
+            width: 250px;
+            padding: 15px 0 15px 15px;
             bottom: 0;
             left: 0;
             color: #fff;
-            font-size: rem(28);
-            line-height: rem(40);
+            font-size: 14px;
+            line-height: 20px;
             position: absolute;
         }
+
         .btn {
             position: absolute;
-            width: rem(135);
-            height: rem(109);
-            background: url(../img/icon-bg.png) 0 / 100%;
-            bottom: rem(30);
-            right: rem(35);
+            width: 67.5px;
+            height: 55px;
+            background: url(../img/icon-bg.png) 0 no-repeat / 100% 100% ;
+            bottom: 15px;
+            right: 18px;
             text-align: center;
+            cursor: pointer;
         }
+
         .icon-carm {
             display: block;
-            width: rem(72);
-            height: rem(57);
+            width: 36px;
+            height: 28.5px;
             background: url(../img/icon-video.png) 0 / 100%;
-            margin: rem(10) auto;
+            margin: 5px auto;
         }
+
         span {
-            font-size: rem(22);
+            font-size: 12px;
             color: #fff;
             position: absolute;
             left: 0;
             width: 100%;
-            bottom: rem(15);
+            bottom: 7.5px;
         }
     }
+
     .btn-play {
         position: absolute;
-        z-index: 5;
         top: 50%;
         left: 50%;
-        transform: translate(-50%,-50%);
-        width: rem(162);
-        height: rem(144);
-        background: url(../img/icon-play.png) 0 / 100% no-repeat;
+        width: 65px;
+        height: 70px;
+        margin: -35px 0 0 -32.5px;
+        background: url(../img/icon-play.png) 0 no-repeat / 100% 100%;
         cursor: pointer;
+        visibility: hidden;
+        z-index: 99;
     }
 }

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

@@ -13,7 +13,7 @@
 <body>
     <div class="page-share">
         
-        <video preload="meta" 
+        <video preload="auto" 
             x5-video-player-fullscreen="false" 
             loop 
             playsinline
@@ -21,14 +21,14 @@
             x5-video-player-type="h5">
         </video>
         
-        <img alt="">
+        <!-- <img alt="" /> -->
         <a class="btn-play"></a>
         <div class="shade">
             <p id="title"></p>
             <!-- 打开app协议 DWSuperShow -->
             <a class="btn">
                 <i class="icon-carm"></i>
-                <span href="http://www.baidu.com">炫同款</span>
+                <span data-pc="//hdzt.duowan.com/1905/m_422550375264.html" data-h5="//hdzt.duowan.com/1905/m_422550333169.html">炫同款</span>
             </a>
         </div>
     </div>