I'm working on a reader, and we used to work on epub2, and I working on pagination effect using CSS file. I have recently received an ePub 3 file and it does not abide by the CSS rules that I have provided, although it works correctly when tried on Play Books android app.
Note that I have manipulated several features related to web view such as:
testWV.getSettings().setUseWideViewPort(true);
testWV.getSettings().setLoadWithOverviewMode(true);
and this is the paging CSS used which as mentioned before works perfectly on epub2 files
html {
height:heightplaceholderpx; //set dynamically depending on phone screen size
width:100%;
}
body {
margin:0px;
padding:0px;
width:100%;
pointer-events: none;
}
#viewer {
width:widthplaceholderpx;
height:heightplaceholderpx;
}
#book {
width:widthplaceholderpx;
height:heightplaceholderpx;
margin-left:50px;
margin-right:50px;
margin-top:10px;
-webkit-column-count:auto;
-webkit-column-width:widthplaceholderpx;
-webkit-column-gap:100px;
text-align:justify;
}
.h {
margin-top:60px;
margin-left:100px;
margin-right:100px;
}
img {
max-width: 100%;
height:auto;
}
This is how I'm integrating the CSS file:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" href="columnPaging.css" type="text/css" media="screen"/>
headplaceholder //the header extracted from the xhtml file of the book
</head>
<body>
<div id="viewer">
<div id="book">
bodyplaceholder //the body extracted from the xhtml file of the book
</div>
</div>
</body>
</html>
Like you can see you use this var widthplaceholderpx in his css. Normally it should be override it in the Java code. But when the bodyplaceholder was add to the body in the HTML I needed to override the widthplaceholderpx again. So the css would know what the actual height was.
Related
I am currently developing an HTML kiosk presentation for iPad and Android. Issue I am having is with popup videos on Android, which works perfectly on iPad and also within Chrome on Android. I need to present this as a kiosk style application and so am using Protosee on iPad and Fully Kiosk Browser on android which I believe uses the Android Webview (Chromium) engine so should work too but doesn't.
Using FKB the video popup comes up but with a blank screen and a video icon in the centre, touching the screen again removes the popup and the video plays in the background.
Any pointers would be much appreciated.
Code is as follows
<html>
<head>
<title>BASE Charging Stand</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<meta name="apple-mobile-web-app-capable" content="yes"/>
<link href="logitech.css" type="text/css" rel="stylesheet"/>
<script type="text/javascript" src="js/logitech.js"></script>
</head>
<body>
<div class="main_content basechargingstand">
<div class="header">
<div class="hotspot" onclick="goBack()"></div>
<div class="hotspot"></div>
<div class="hotspot"></div>
</div>
<div class="page_navigation">
<div class="top_slot" onclick="goBack()"></div>
</div>
<div class="product_detail">
<div id="video_pop" onclick="onPopClick()"></div>
<a onclick="onVideoClick('videos/Base.mp4');">
<img src="images/play_btn_lrg.png" width="78"/>
</a>
<div class="hotspot 3col"></div>
</div>
</div>
</body>
</html>
</script>
function onVideoClick(theLink) {
document.getElementById("video_pop").innerHTML = "<video poster autoplay id=\"the_Video\"><source src=\""+theLink+"\" type=\"video/mp4\" ></video>";
document.getElementById("video_pop").style.display="block";
document.getElementById('video_pop').play();
}
function onPopClick() {
document.getElementById("video_pop").style.display="none";
document.getElementById("video_pop").innerHTML = "";
}
</script>
<style>
#video_pop {
z-index: 9999;
position: absolute;
left: 0px;
width: 100%;
height: 100%;
background: rgb(193, 198, 201) !important;
display: none;
cursor: pointer;
top: 20.7%;
}
#the_Video {
width: 100%;
position: fixed;
top: 60.5%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
</style>
Android and iOS have disabled video autoplay with purpose! Imagine browsing the web with your phone and all the video advertisements that could be playing in the background will just simply eat up all your bandwidth.
While working with hybrid HTML clients, I used this trick/workaround to start autoplaying videos: When user entered the page for the first time, then <video> element with empty src has to be created the page (hidden somewhere). Whenever user touches the screen for the first time for whatever reason, then I tried to invoke play method on the video element (this breaks the first usergesture on html video element). This will usually give a small error/warning in console but that is okay because what matters is that the first user gesture has been made, thus enabling you to use play() method whenever you want! So after the first user gesture has been made, you simply just have to use the same <video> element!
I hope this helps.
I think that you cannot Autoplay a video inside a WebView in Android. I believe Android does it for security reasons, so apps don't use too much mobile data unless the user wants it. Maybe you could try it by having the video stored locally?
i am getting error on logcat "mediaplayer error (-1,2147483648)" while trying to play a video on android using phonegap.
i am using cordova videoplayer plugin.
so why i am getting this error while testing it on android emulator api v14? am i missing something?? please help me out.
here i am pesting my entire code.
<!DOCTYPE html>
<html>
<head>
<script src="js/cordova-2.7.0.js" type="text/javascript"></script>
<script src="js/video.js" type="text/javascript"></script>
<link rel="stylesheet" href="js/video-js.css" type="text/css">
<meta charset="utf-8">
<title>HTML5 Video Player</title>
<style>
body {
font-family: sans-serif;
border: 0;
margin: 0;
padding: 0;
}
header {
text-align: center;
}
#player {
display: table;
width: 100%;
padding: 4px;
}
</style>
<script type="text/javascript">
$( document ).ready(function() {
//This is on load , You can also use 'example_video_1' click event
var video = $('#example_video_1').get(0);
video.load();
video.play();
});
</script>
</head>
<body>
<header>
<h1>HTML5 Video Player</h1>
</header>
<div>
<section id="player">
<video id="example_video_1" class="video-js vjs-default-skin" controls autobuffer height="430" width="400">
<source src="/playvideo/res/raw/asd.mp4">
<source src="mrbeancart_c5bplN27.mp4">
</video>
</section>
</div>
</body>
</html>
thank you for any kind of help....
Maybe not the answer you are lookig for, but, there's no need to use a plugin, at least for me.
My workaround is to save the files locally and bind them from the root directory, into a html5 video tag, as I stated
here
Hope this helps.
Also, this will cause the error you write about on emulator, so the video never plays but it is confirmed in real devices. I have tested this approach in several models of android 4.0
This question already has answers here:
android Not allowed to load local resource:file:///android_asset
(5 answers)
Closed 9 years ago.
I load html files from remote server and show them in webview but default font face for my language is a bit messy so I tried to load fonts from asset folder. here are my java code and html file.
webView.getSettings().setAppCacheEnabled(false);
webView.getSettings().setAppCacheMaxSize(1);
webView.getSettings().setDomStorageEnabled(true);
webView.addJavascriptInterface(new WebAppInterface(this), "Android");
webView.setWebViewClient(new MyWebViewClient());
isShowing=true;
dialog.show();
String address="http://server/test.html";
Log.d("checking", address);
webView.loadUrl(address);
html code:
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> Title Here </title>
<style type="text/css">
#font-face {
font-family:nazanin;
src:url('file:///android_asset/fonts/BNAZANIN.TTF');
}
body {
font-family: nazanin;
font-size: medium;
text-align: justify;
}
</style>
</head>
<body>
<p>this is for test</p>
</body>
</html>
the problem is after loading I got this error:
11-21 10:50:55.439: E/Web Console(9572): Not allowed to load local resource: file:///android_asset/fonts/BNAZANIN.TTF at :0
what is the solution for this?
I end up adding that font on server and link to that in html file. I tried almost any ways and I think this is the only way that works. LoadDataWithBaseUrl and adding font in asset folder is not the way when you have external files like css and js to use in html.
I have a link to a download handler inside an iframe. This download handler has "Content-Disposition: Attachment" in the headers to force the user to download the file. This works in every browser except on Android devices. Android ignores the file without any errors or messages. Using Fiddler, i can confirm that the handler is getting requested successfully, & the download appears to complete successfully, but the browser is not letting me save or open the file.
Before you tell me to stop using iframes, i am afraid that is not an option for me at this time.
Below is some code to reproduce this issue. Three files:
Default.aspx: Contains an iframe pointing to DownloadPage.aspx
DownloadPage.aspx: Contains a hyperpink to Download.ashx
Download.ashx: Responds with a text/plain content-type type with content-disposition: attachment
Default.aspx:
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="AndroidTest.Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<iframe src="DownloadPage.aspx" width="320" height="1000"></iframe>
</div>
</form>
</body>
</html>
DownloadPage.aspx
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="DownloadPage.aspx.cs" Inherits="AndroidTest.DownloadPage" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:HyperLink NavigateUrl="~/Download.ashx" runat="server">Download</asp:HyperLink>
</div>
</form>
</body>
</html>
Download.ashx.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
namespace AndroidTest {
/// <summary>
/// Summary description for Download
/// </summary>
public class Download : IHttpHandler {
public void ProcessRequest(HttpContext context) {
context.Response.ContentType = "text/plain";
context.Response.AddHeader("Content-Disposition", "attachment;filename=\"test.txt\"");
context.Response.Write("Hello World");
}
public bool IsReusable {
get {
return false;
}
}
}
}
Thanks for your time.
most browsers will do this as a point of security to avoid maliciously embedded automated downloads. you may want to present the user with a link or a button to complete the download so that the browser recognises the interaction and allows the download to complete.
I have been scratching my head for several days over this issue. I am attempting to embed a flash stream from own3d.tv in a HTML page that is view-able in the android web browser. No matter what I do the flash object goes white several seconds after the page loads. I have tried copying their exact code as well as using swfobject but have had no luck. The more confusing part is I am able to view the same stream on their homepage just fine. (own3d.tv). Here are the details:
What I am using:
Android 4.0.1 on Google Galaxy Nexus
swfobject 2.0
Flash 11
Always use a stream id that is online
The Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js"></script>
<style type="text/css">
* { margin: 0; padding: 0; }
body { text-align: center; }
html, body { height: 100%, width: 100%; }
</style>
<script>
$(document).ready(function(){
var flashvars = {};
var params = {
allowscriptaccess : "always",
allowfullscreen : "true",
wmode : "transparent"
};
var attributes = {};
swfobject.embedSWF("http://www.own3d.tv/livestream/34046;autoplay=true", "player", "400", "300", "11.0.0","expressInstall.swf", flashvars, params, attributes);
});
</script>
</head>
<body>
<div id="player" style="visibility: hidden;"></div>
</body>
</html>