add video on index banner

application/default/views/scripts/index/index.phtml

@@ -9,8 +9,29 @@
 <section class="panel home" data-section-name="首页">
     <div class="swiper-container banner">
         <div class="swiper-wrapper">
+            <div class="swiper-slide" style="background:url('<?php echo $this->news[0]['image']; ?>') no-repeat center;background-size:cover">
+                <span class="cdate"><!-- [<?php echo date("Y-m-d",strtotime($this->news[0]['ts_published'])) ?>] --></span>
+                <h2 class="btitle"><a href="javascript:void(0);" data-rel="<?php echo $this->news[0]['url']; ?>"><?php echo $this->news[0]['title']; ?></a></h2>
+                <?php
+                $description = "";
+                if (mb_strlen($this->news[0]['description'])>100)
+                {
+                    $description = mb_substr($this->news[0]['description'],0,100,'utf-8').'...';
+                }else{
+                    $description = $this->news[0]['description'];
+                }
+                ?>
+                <h4 class="bstitle"><?php echo $description; ?></h4>
+            </div>
+            <div class="swiper-slide" id="video_silder">
+                <video autoplay muted loop>
+                    <source src="/upload/media/tpe_1.mp4" type="video/mp4">
+                </video>
+                <h2 class="video_cover"><a href="javascript:void(0);">基于MODIS的2003年高亚洲积雪覆盖变化</a></h2>
+            </div>
             <?php foreach($this->news as $k=>$v) { ?>
                 <?php
+                if($k < 1) continue;
                 $description = "";
                 if (mb_strlen($v['description'])>100)
                 {

htdocs/static-sanji/css/index.css

@@ -348,3 +348,20 @@ h1{
      font-size: 25px;
      color:#ccc;
  }
+
+ #video_silder{background: #000;}
+
+ video {
+     position: absolute;
+     background: #000;
+     width:100%;
+     left: 50%;
+     top:50%;
+     transform: translate(-50%, -50%);
+ }
+
+ .video_cover {
+     position: absolute;
+     left: 50%;
+     top: 50%;
+ }

htdocs/static-sanji/js/index.js

@@ -63,4 +63,34 @@ $(function() {
     $('section.panel div.container').each(function(elem){
         $(this).css({position: 'relative', top: ($(window).height() -$(this).height()) / 2 });
     });
+
+    var video = document.querySelector('video')
+        , container = document.querySelector('#video_silder');
+
+    var setVideoDimensions = function () {
+        var w = video.videoWidth
+            , h = video.videoHeight;
+        var videoRatio = (w / h).toFixed(2);
+
+        var containerStyles = window.getComputedStyle(container)
+            , minW = parseInt( containerStyles.getPropertyValue('width') )
+            , minH = parseInt( containerStyles.getPropertyValue('height') );
+        var widthRatio = minW / w
+            , heightRatio = minH / h;
+
+        if (widthRatio > heightRatio) {
+            var newWidth = minW;
+            var newHeight = Math.ceil( newWidth / videoRatio );
+        }
+        else {
+            var newHeight = minH;
+            var newWidth = Math.ceil( newHeight * videoRatio );
+        }
+
+        video.style.width = newWidth + 'px';
+        video.style.height = newHeight + 'px';
+    };
+
+    video.addEventListener('loadedmetadata', setVideoDimensions, false);
+    window.addEventListener('resize', setVideoDimensions, false);
  });