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

@@ -1,11 +1,15 @@
-// var utils = require('/src/lib/utils.js')
 var utils = require("../utils");
 var tipsMaskTmpl = __inline("../../tpl/tips-mask.tmpl");
+
 class Index {
     constructor() {
         this.init();
         this.id = utils.getParam("id");
         this.getVideoInfo();
+        this.resize = false;
+        if (utils.isMobile()) {
+            this.onResize();
+        }
     }
 
     init() {
@@ -48,9 +52,15 @@ class Index {
     }
 
     onResize() {
+        this.resize = true;
         var $video = $("video").eq(0);
+        if (utils.isMobile()) {
+            $video.addClass("full-screen");
+        } else {
+            $video.removeClass("full-screen");
+        }
         $(".shade").css("visibility", "visible");
-        $('.btn-play').css("visibility", "visible");
+        $(".btn-play").css("visibility", "visible");
         $("#title").css({ left: $video.css("marginLeft") });
         $(".btn").css({
             right: `${parseFloat($video.css("marginRight").slice(0, -2)) +
@@ -79,15 +89,17 @@ class Index {
         var data = ret.data;
         var self = this;
         $("video")
-            .attr("poster", data.cover)
-            .attr("src", data.url)
             .on("loadedmetadata", function() {
                 self.onResize();
-            });
+            })
+            .on("error", function(error) {
+                alert(error);
+            })
+            .attr("poster", data.cover)
+            .attr("src", data.url);
         $("#title").text(data.description);
         document.title = data.name;
     }
-
     openApp() {
         var self = this;
         var downloadLink = $(".btn")

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

@@ -29,6 +29,12 @@ video {
     max-height: 100%;
     max-width: 100%;
     margin: 0 auto;
+
+    &.full-screen {
+        width: 100%;
+        height: 100%;
+        object-fit: fill;
+    }
 }
 
 .page-share {
@@ -105,6 +111,7 @@ video {
         bottom: 0;
         left: 0;
         visibility: hidden;
+
         p {
             width: 250px;
             padding: 15px 0 15px 15px;
@@ -120,7 +127,7 @@ video {
             position: absolute;
             width: 67.5px;
             height: 55px;
-            background: url(../img/icon-bg.png) 0 no-repeat / 100% 100% ;
+            background: url(../img/icon-bg.png) 0 no-repeat / 100% 100%;
             bottom: 15px;
             right: 18px;
             text-align: center;