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>
Related
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.
An application I developed uses locally stored HTML to be shown in a webview.
It has always worked without any issue, but on Android 7 the HTML source is displayed instead of formatting the HTML.
The code for loading the HTML is as simple as this
var webView = view.FindViewById<WebView>(Resource.Id.webview);
webView.LoadUrl("file:///android_res/raw/info.html");
The content of the HTML is also very straightforward.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name = "viewport" content = "width=device-width">
<title></title>
<style>
body {
font-family: "Helvetica", sans-serif;
font-size: .85em;
padding-top: 25px;
}
body a {
color: #697782;
font-weight: bold;
}
h1 {
font-size: 1.15em;
text-transform: uppercase;
color: #24292f;
margin: 8px 0 8px;
padding: 0px;
}
strong {
color: #697782;
font-weight: bold;
}
p {
color: #2b2c30;
margin: 0 0 8px;
padding: 0px;
}
</style>
</head>
<body>
</body>
</html>
I'm not using Webview.LoadData, because reading the HTML will require to add it as Asset and not Resource, which I'm not going to do. (localization)
Anyone any idea's how to tackle this?
Oké. I found a solution after a lot of trial/error.
A lot of online solutions advice to move the files to the Assets folder and read the file content from there because it wasn't clear for a lot on how to read text file info from RAW folders. But I don't want to do this because the Assets folder isn't Localization-aware.
The files with HTML I want to show are Localized
/raw/info.html
/raw-fr/info.html
/raw-nl/info.html
In my previous solution I called the content with
webView.LoadUrl("file:///android_res/raw/info.html");
Which worked perfectly until Android 7 decided to show the source HTML in the browser. The correct file for the current OS language would be selected in this way. No need to write any Localization handling yourself.
The working solution
Consists of loading the string data from the file and feed it to the WebView via WebView.LoadData().
//get the Resource ID
var dd = Resource.Raw.info;
//read the file content from RAW folder
var content = LoadFile(dd);
//feed it to the webclient
// important: UTF-8 capitalized!
webView.LoadData(content, "text/html; charset=UTF-8", "UTF-8");
The LoadFile looks like this
public string LoadFile(int resourceId)
{
//get the file as a stream
var inputStream = Resources.OpenRawResource(resourceId);
var html = string.Empty;
using (StreamReader sr = new StreamReader(inputStream))
{
html = sr.ReadToEnd();
}
return html;
}
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 has a problem with the new implementation of webview for android 4.4+.
My HTML code:
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script src="http://s.videos.globo.com/p2/j/api.min.js" type="text/javascript"></script>
<style type="text/css" media="all">
#player-wrapper, #image-wrapper {
width: 100% !important;
height: 100% !important;
position: absolute;
left: 0;
top: 0;
z-index: 1;
}
#image-wrapper {
z-index: 999;
background-color: white;
}
</style>
</head>
<body>
<div id="player-wrapper"></div>
<img id="image-wrapper">
<script type="text/javascript">
var element = document.getElementById('player-wrapper');
var image = document.getElementById('image-wrapper');
var player = new WM.Player({
autoPlay: true,
width: 640,
height: 360
});
player.attachTo(element);
image.onclick = function() {
player.playVideo();
image.style.visibility = 'hidden';
};
</script>
</body>
But the rule width: 100% is not working, the # player-wrapper is getting bigger than the webview. Strange that only the #player is being affected, #image are right.
Can anyone help me with this?
The problem lies in the WM.player constructor, which sets the width of the player to 640px, which is probably bigger than your viewport. There is no parameter for max-width in the WM.Player constructor, so you'll have to use a meta tag. Trying adding <meta name="viewport" content="width=640px"> in the head section of your HTML so that the viewport is sized to fit the 640px width set in the WM.Player constructor.
This html tag might be useful.
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
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