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
Related
I am trying to render an image as html in webview of android but not able to calibrate it correctly in mobile, original image gets cropped both left and right using below code. how should I fix this and how to know if it will render fine on mobile (by running in browser only) ? below is what I am doing.
image dimensions are:(624*936)
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta charset="UTF-8" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" />
<link
rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP&display=swap"
/>
</head>
<body style="margin: 0; padding: 0; width: 100%; height: 100%">
<div
onclick="surface.touch()"
style="
background: url(https://image/startBackground_1)
center center fixed;
background-repeat: no-repeat;
height: 100%;
background-size: cover;
display: flex;
justify-content: flex-end;
flex-direction: column;
font-family: 'Noto Sans', sans-serif;
"
>
<div
style="margin-bottom: 100%; margin-top: 100%;"
></div>
</div>
</body>
</html>
im building and app for android that use google maps embed with i frame all this on intel xdi plus cordova on html5 the problem is sometimes the apk show all black and it didn't show the map or is not well centre sometimes looks all fine but is like random pls some advice so fix that
<html>
<head></head>
<body>
<style>
.wrapper {
position: relative;
padding-bottom: 165%; // This is the aspect ratio
height: 0;
overflow: hidden;
}
.wrapper iframe {
position: absolute;
top: 0;
left: 0;
width: 100% !important;
height: 93% !important;
}
</style>
<div class="wrapper">
<iframe src="http://mapbuildr.com/frame/hc0v2v" frameborder="0"></iframe> </div>
</body>
</html>
Some old android devices dont initialize height and width immediately, try loading map after Cordova deviceready event is fired, here is sample code I tested, this loads the iframe src after deviceready event is fired:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<style>
.wrapper {
position: relative;
padding-bottom: 165%; // This is the aspect ratio
height: 0;
overflow: hidden;
}
.wrapper iframe {
position: absolute;
top: 0;
left: 0;
width: 100% !important;
height: 93% !important;
}
</style>
<script src="cordova.js"></script>
<script>
document.addEventListener("deviceready", function(){
document.getElementById("map").src = "http://mapbuildr.com/frame/hc0v2v";
}, false);
</script>
</head>
<body>
<div id="mapa_2" class="upage-content vertical-col left hidden">
<div class="wrapper">
<iframe id="map" src="" frameborder="0"></iframe>
</div>
</div>
</body>
</html>
I have created a local HTML page that I want to display in fullscreen in my Android app.
What happens now is that the page opens correctly in a desktop browser, but looks zoomed in my Android device (Google Glass).
My res/layout/webview.xml is the standard:
<?xml version="1.0" encoding="utf-8" ?>
<WebView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/webView"
android:layout_width="fill_parent"
android:layout_height="fill_parent"></WebView>
My HTML file is as follows:
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Cover</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/test.css">
</head>
<body>
<div class="container">
<div class="photo card">
<img src="img/cover.png">
<footer class="footer-cover">
</footer>
</div>
</div>
</body>
The img/cover.png is has the size of the Glass display: 640x360. Also, the app only needs to work in one device (Google Glass), so the CSS describes most sizes in pixels:
* {
margin: 0;
padding: 0;
border: 0;
font: inherit;
}
div.card {
width: 640px;
height: 360px;
display: block;
overflow: hidden;
position: absolute;
background-color: #000;
color: #fff;
}
div.card a {
text-decoration: none;
color: #00fcff;
}
footer {
margin: 0 40px 28px 40px;
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 40px;
font-weight: 600;
font-size: 24px;
line-height: 1.4em;
overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;
}
footer.footer-cover{
left: 0;
margin: 0;
background-color:#00293F;
min-height: 100px;
padding:0 40px;
}
Since there is no fillViewPort for WebView, you can try using
getSettings().setUseWideViewPort(true);
to load the content zoomed out.
I have a scrollLeft function on a header so it is fixed vertically but scrolls horizontally. There is a bug in chrome for android where the header scrolls horizontally twice as fast as the rest of the page.
If I view this example in chrome for android it works as it should.
jsfiddle demo
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title> - jsFiddle demo</title>
<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'>
</script>
<link rel="stylesheet" type="text/css" href="/css/result-light.css">
<style type='text/css'>
#header {
height: 40px;
width: 900px;
background-color: red;
position: fixed;
z-index: 2; }
#content {
height: 1000px;
width: 900px;
background-color: blue;
top: 50px;
position: absolute;
z-index: 1; }
</style>
<script type='text/javascript'>//<![CDATA[
$(window).load(function(){
$(window).scroll(function(){
$('#header').css('left', 8 - $(this).scrollLeft());
});
});//]]>
</script>
</head>
<body>
<div id="header">This is a fixed header that scrolls horizontally</div>
<div id="content">This is blah blah blah blah</div>
</body>
</html>
When I implement the code on a basic page as this page, the bug appears.
simple jsfiddle page
Somehow jsfiddle gets around the bug.
Changing
$('#header').css('left', 8 - $(this).scrollLeft());
to
$('#header').css('margin-left', 8 - $(this).scrollLeft());
and setting the fixed element to left:auto !important;
has resolved the issue!!!
It seems that the background-fixed CSS property doesn't work right in Jelly Bean WebView (both inside an application and using the default Android browser).
If I set this property, the background image gets loaded over the content, i.e. the content is behind the background image.
Here's my relevant HTML code:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="target-densitydpi=device-dpi">
<meta name="viewport" content="initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="./gesture-background_files/genre-channel-background.css">
<style type="text/css"></style></head>
<body>
<div id="right-keys">
<img src="./gesture-background_files/one.png"><br />
Film24<br />
</div>
<div id="right-keys-vertical">
<img src="./gesture-background_files/one.png"><br />
Film24<br />
</div>
<div id="footer">
MUSCADE<span class="large">EPG</span>
</div>
</body>
</html>
And here's the relevant part of the CSS:
body {
background-image: url(hot-black-background.jpg);
background-color: black;
background-repeat: no-repeat;
background-attachment: fixed;
background-position: bottom left;
}
#right-keys, #right-keys-vertical {
position: absolute;
right: 10px;
width: 100px;
text-align: center;
text-shadow: black 2px 2px 0px;
}
#right-keys img, #right-keys-vertical img {
height: 90px;
margin-bottom: 0;
}
#footer {
position: absolute;
right: 10px;
bottom: 10px;
font-size: 20px;
}
It's a bit long, but the only important part are the background-attachment and background-position properties on top of the CSS file. If I remove those, everything works fine.
Is this a known bug? Can anyone suggest a workaround?
Here's a link to the file so you can try opening it from a Jelly Bean native browser (not Chrome):
http://212.92.197.78/gesture/gesture-background.htm
It turns out that in the Jelly Bean browser if you use
body {
background-image: url(any-image.jpg);
background-attachment: fixed;
background-position: bottom;
}
or anything involving bottom or right for background-position, any elements you position with reference to the right or bottom edge of the screen will be overlaid by the background image.
This is most certainly a bug in Jelly Bean's browser.
Instead of using the above, I put a background image on my page using the following code:
HTML:
<body>
<img id="background" src="any-image.jpg" />
(...)
</body>
CSS:
#background {
z-index: -1;
position: fixed;
bottom: 0;
left: 0;
}
for position related and absolute you can use z-index. Read more about z-index: http://www.w3schools.com/cssref/pr_pos_z-index.asp
On my website, to make the background image to reappear behind the content (on Jelly Bean browser), I only had to remove the css property: background-attachment: fixed.
Zoltan's solution not worked well to me because it makes the background image does not display correctly in some browsers (tested on browserstack)