Ionic2入门教程（十一）制作一个视频背景欢迎页

制作一个视频背景欢迎页

系列教程看这里
Ionic2入门教程（一）安装和环境配置
Ionic2入门教程（二）进阶配置：Android打包
ionic2入门教程（三）高仿网易公开课（1）
ionic2入门教程（四）解读目录结构
ionic2入门教程（五）如何使用IonicPage
ionic2入门教程（六）地图服务（谷歌、高德、百度定位）
ionic2入门教程（七）来一个五星评分
ionic2入门教程（八）高仿网易公开课（2）
ionic2入门教程（九）样式修改和主题切换
Ionic2入门教程（十）如何debug一个Ionic应用

0、效果

1、实现过程

主要用到了HTML5的video标签，全屏显示，下方是一个按钮，加了一层cover增加朦胧感，主要是我选的视频太白了文字不是很凸显，这一个可以不加的。头部用了一个标题，可以换成logo之类的，slide用于显示介绍性滚动文字。

2、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>

3、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;
  }
}

4、源代码

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

下载后运行时将路径改为如下即可显示
http://localhost:8100/#/video