Ionic2入門教程（十一）製做一個視頻背景歡迎頁

製做一個視頻背景歡迎頁

系列教程看這裏
Ionic2入門教程（一）安裝和環境配置
Ionic2入門教程（二）進階配置：Android打包
ionic2入門教程（三）高仿網易公開課（1）
ionic2入門教程（四）解讀目錄結構
ionic2入門教程（五）如何使用IonicPage
ionic2入門教程（六）地圖服務（谷歌、高德、百度定位）
ionic2入門教程（七）來一個五星評分
ionic2入門教程（八）高仿網易公開課（2）
ionic2入門教程（九）樣式修改和主題切換
Ionic2入門教程（十）如何debug一個Ionic應用

0、效果

一、實現過程

主要用到了HTML5的video標籤，全屏顯示，下方是一個按鈕，加了一層cover增長朦朧感，主要是我選的視頻太白了文字不是很凸顯，這一個能夠不加的。頭部用了一個標題，能夠換成logo之類的，slide用於顯示介紹性滾動文字。

二、html

<ion-content>
  <h1 text-center>舊時光</h1>
  <video autoplay loop src="assets/video/video1.mp4"></video>
  <div class="cover"></div>

  <!-- <video src="assets/video/video1.mp4"></video> -->
  <ion-slides autoplay="1000" pager loop>
    <ion-slide>
      <h4>歡迎</h4>
      <p>時間是真相的女兒</p>
    </ion-slide>
    <ion-slide>
      <h4>介紹</h4>
      <p>橘生淮南</p>
    </ion-slide>
    <ion-slide>
      <h4>聯繫</h4>
      <p>一個橙子</p>
    </ion-slide>
  </ion-slides>
</ion-content>
<ion-footer>
  <ion-grid>
    <ion-row>
      <!-- <ion-col col-2><button ion-button icon-only clear></button></ion-col> -->
      <ion-col>
        <button ion-button color="light" full outline>
          <ion-icon name="heart" color="danger"></ion-icon>
          <span padding-left>加入咱們</span>
        </button>
      </ion-col>
    </ion-row>
  </ion-grid>
</ion-footer>

三、scss

page-video {
  h1 {
    color: #fff;
    font-size: 30px;
  }
  font-family: '微軟雅黑',
  sans-serif;
  .cover {
    z-index: -99;
    background-color: #222;
    opacity: 0.3;
  }
  video {
    z-index: -100;
  }
  video,
  .cover {
    position: fixed;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    transform: translateX(-50%) translateY(-50%);
  }
  ion-slides {
    height: 200px;
    position: absolute;
    bottom: 0;
    ion-slide {
      color: #fff;
    }
    h4 {
      font-weight: bold;
    }
    .swiper-pagination-bullet {
      background: map-get($colors, light);
    }
  }
  button {
    font-weight: bold;
  }
}

四、源代碼

https://github.com/JiaXinYi/I...

下載後運行時將路徑改成以下便可顯示
http://localhost:8100/#/video