视频作为背景图像离子应用程序答案

【问题标题】：Video as Background image ionic app视频作为背景图像离子应用程序
【发布时间】：2015-09-12 14:03:28
【问题描述】：

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

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

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

【问题讨论】：

Apparently，Uber 是一个运行 webview 的 Cordova 应用程序。但是，他们是否在打开视图上使用原生钩子来运行视频？

标签： android ios cordova ionic-framework ionic

【解决方案1】：

这应该可以工作：或者至少让你走上正确的道路：编译后它会工作吗？我不知道。还要确保您的视频具有足够高的分辨率来填充空间。 编辑： 必须删除 ion-content 才能使其正确缩放：

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

【讨论】：

无法在 iphone sim 中使用，假设在设备 screenshot 上相同，感谢您的尝试！！！
这是因为 ios 会自动禁用在移动设备上播放的视频以在 iphone 上保存数据。据我所知，没有办法播放背景视频。尝试做我用 gif 做的事情，也许这是为 IOS 做的唯一方法
有谁知道这在编译时是否至少适用于Android？如果没有，我会测试并报告。
应该有办法的。 iphone 中的 Facebook 应用会自动播放。
@BraianMellor 是的，但 facebook 使用本机代码而不是混合应用程序。几乎一个角度/离子应用程序就像一个网络浏览器。