视频作为背景图像离子应用程序 [英] Video as Background image ionic app
问题描述
很像教程 /medium.com/swift-programming/ios-make-an-awesome-video-background-view-objective-c-swift-318e1d71d0a2rel =nofollow>此处，但是，使用MP4而不是GIF因为我想使用更长的视频。
我想在登录屏幕上使用此功能，如当前的Uber应用程序。
这应该工作：或至少让你在正确的路径：它将工作一旦编译？我不知道。此外，请确保您的视频具有足够高的分辨率以填充空间。 EDIT：必须删除离子内容才能正确缩放：
HTML：
<！DOCTYPE html>
< html>
< head>
< meta charset =utf-8>
< meta name =viewportcontent =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 =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>真棒应用< / h1>
< / ion-header-bar>
< video autoplay loop poster =id =bgvid>
< source src =http://video.webmfiles.org/big-buck-bunny_trailer.webmtype =video / webm>
< source src =http://video.webmfiles.org/big-buck-bunny_trailer.webmtype =video / mp4>
< / video>
< / ion-pane>
< / body>
< / html>
CSS：
code> #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
I was wondering if there was a way to do a cross-platform background video without using GIF.
Much like the tutorial here, however, with MP4 and not GIF as I'd like to use a longer video.
I'd like to use this on a login screen, like the current Uber app.
This should work: or at least put you on the right path: will it work once compiled? I do not know. Also make sure your video is high enough resolution to fill the space. EDIT: had to remove ion-content to get it to scale right:
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;
}
Playground: http://play.ionic.io/app/5157ac74b69b
这篇关于视频作为背景图像离子应用程序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
