Question

我想知道是否有办法在不使用GIF的情况下制作跨平台背景视频。

就像教程here一样，使用MP4而不是GIF，因为我想使用更长的视频。

我想在登录屏幕上使用它，就像当前的优步应用程序一样。

Answer 1

这应该有效：或者至少让你走上正确的道路：一旦编译好了吗？我不知道。还要确保您的视频分辨率足以填满空间。 编辑：必须删除离子内容才能使其正确扩展：

HTML：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    <link href="http://code.ionicframework.com/1.0.0/css/ionic.min.css" rel="stylesheet">
    <script src="http://code.ionicframework.com/1.0.0/js/ionic.bundle.js"></script>
  </head>
  <body ng-app="app">
    <ion-pane>
      <ion-header-bar class="bar-stable">
        <h1 class="title">Awesome App</h1>
      </ion-header-bar>
           <video autoplay loop poster="" id="bgvid">

    <source src="http://video.webmfiles.org/big-buck-bunny_trailer.webm" type="video/webm">

    <source src="http://video.webmfiles.org/big-buck-bunny_trailer.webm" type="video/mp4">

    </video>
    </ion-pane>
  </body>
</html>

CSS：

#bgvid {

position: fixed;

top: 50%;

left: 50%;

min-width: 100%;

min-height: 100%;

width: auto;

height: auto;

z-index: -100;

-webkit-transform: translateX(-50%) translateY(-50%);
-moz-transform: translateX(-50%) translateY(-50%);
-ms-transform: translateX(-50%) translateY(-50%);
-o-transform: translateX(-50%) translateY(-50%);

transform: translateX(-50%) translateY(-50%);

background: url(http://video.webmfiles.org/big-buck-bunny_trailer.webm) no-repeat;

background-size: cover;

}

游乐场：http://play.ionic.io/app/5157ac74b69b

视频作为背景图像离子app

1 个答案: