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?
Related
I have a nodogsplash version 0.9_beta9.9.9 installed on OpenWRT 15.05.01 device and they work well when I'm using the browser (mozzila, chrome) to access the captive portal and after click to 'Continue' they redirect me to pre-setting page.
This is my code:
`<!DOCTYPE html>
<html>
<head>
<!--
A client is authenticated by requesting the page $authtarget.
So, href to it here, with an img or link text the user can click on
Alternatively submit an HTTP form method=get, passing $authaction,
Also, note that any images you reference must reside in the
subdirectory that is the value of $imagesdir (default: "images").
Available variables:
error_msg: $error_msg
gatewayname: $gatewayname
tok: $tok
redir: $redir
authaction: $authaction
denyaction: $denyaction
authtarget: $authtarget
clientip: $clientip
clientmac: $clientmac
gatewaymac: $gatewaymac
nclients: $nclients
maxclients: $maxclients
uptime: $uptime
imagesdir: $imagesdir
pagesdir: $pagesdir
Additional Variables that can also be passed back via HTTP get.
Or just append them to the authentication link:
nodoguser
nodogpass
info
voucher
-->
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalida
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="0" />
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel='shortcut icon' href='$imagesdir/splash.jpg' type='image/x-icon'
<title>$gatewayname Entry</title>
<style>
body
{
background-color:lightgrey;
color:black;
margin-left: 5%;
margin-right: 5%;
text-align: left;
}
img
{
width: 40%;
max-width: 180px;
margin-left: 0%;
margin-right: 5%;
}
input[type=submit]
{
color:black;
margin-left: 0%;
margin-right: 5%;
text-align:left;
font-size: 1.0em;
line-height: 2.5em;
font-weight: bold;
border: 1px solid;
}
</style>
</head>
<body>
<b>Funz Hotspot Gateway.</b>
<br>
<br>
<b>
<img src="$imagesdir/splash.jpg" alt="Splash Page:For access to the Interne
<hr>
<span style="color:red; font-style:normal;">
Bem Vindo!
</span>
</b>
<hr>
<br>
<b>Por favor, para acessar a internet clique em continuar.</b>
<br>
<br>
<hr>
<form method='get' action='$authaction' target='_blank'>
<input type='hidden' name='tok' value='$tok'>
<input type='hidden' name='redir' value='http://webapp.funz.com.br'>
<input type='submit' value='Continue'>
</form>
<hr>Copyright (C) 2004-2016. This software is released under the GNU GPL l
</body>
</html>
`
But the real problem is when I click to submit the form (see below) on a mobile device and the login "pop-up" closes instantly and I am not redirected to setting URL, But when I use the browser on the android device the redirect to the setting URL well.
<form method='get' action='$authaction' target='_blank'>
<input type='hidden' name='tok' value='$tok'>
<input type='hidden' name='redir' value="http://webapp.funz.com.br">
<input type='submit' value='Continue'>
</form>
Some One had some idea to solve this problem with the redirect to a URL with the nodogsplash Captive Portal on a Mobile devices.
Thanks Until now.
This is a default behavior of android captive network assistant. It is very specific about its functionality and one feature is, that when it finally detects it got connected to the internet, it immediately closes itself. It doesnt happen on iOS devices and older androids though.
You might want to try send the form with ajax and redirect manually, this way I think I have achieved holding the page longer, but I am not sure now why I abandoned this solution. Probably because some misbehavior on other devices.
This time I try to use espresso to test my app.
I use webview to open the url and check below html code
I face the question that I can`t access the element in iframe.
<html>
<head></head>
<body>
<iframe id="mainFrame" src="Address/Default.aspx" scrolling="no"
style="border: 0px; width: 100%; height: 432px; position: absolute;">
<html>
<head></head>
<body>
<button onclick = "one function">
</body>
</html>
</iframe>
</body>
</html>
I copy the XPTH that is /html/body/button and code
onWebView().withElement(findElement(Locator.XPATH, "/html/body/button")).perform(webClick());
However, I get Atom evaluation returned null! and I can not get element.
Can espresso get element inside iframe? I can get element not in iframe.
As the button is inside an iframe, thus we need to use .inWindow(selectFrameByIdOrName("mainFrame"))
onWebView()
.inWindow(selectFrameByIdOrName("mainFrame"))
.withElement(findElement(Locator.XPATH, "/html/body/button")).perform(webClick());
Hope that helps.
I'm trying to define a title for a <select> tag which is read by the Android screen reader, mostly called "Talkback". On my test device (Galaxy S8+) it's called "Voice Assistant".
Interestingly, the following HTML works with NVDA (PC) and with VoiceOver (iOS), but I don't have any idea why it doesn't work on Android.
Here's the minimal example as HTML page:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>Test</title>
<style>
form{
background: red;
margin: 5px 0;
}
label,
select{
display: block;
margin: 10px 0;
}
</style>
</head>
<body>
Test link
<form action="/en" method="post" accept-charset="UTF-8">
<label name="edit-destination-1-label" id="edit-destination-1-label" for="edit-destination-1">Choose language</label>
<select id="edit-destination-1" name="edit-destination-1" aria-labelledby="edit-destination-1-label">
<option value="/de">German</option>
<option value="/fr">French</option>
<option value="/en" selected="selected">English</option>
</select>
</form>
Test link
</body>
</html>
As you can see it's just a reference of for and id as well as a reference of aria-labelledby.
Does anyone know a solution here? I just want the Android screen reader to speak "Choose language" and when you activate it, it should jump to the select menu.
For a working example reference take the post.ch page, section "calculate prices". When you navigate to it with Android it reads "Country" before the <select>.
EDIT What I've done to solve the problem temporary is to use a link instead of a label, as this works.
I debugged the css used with version 2 player.js (0002/player.js) and found the css below for the RED Overlay i want to remove from my default receiver.
from player.css
#player[type="video"][state="idle"]:after {
content: "SAMPLE";
position: absolute;
left: 0;
right: 0;
top: 50%;
bottom: 0;
text-align: center;
font-size: 50px;
margin-top: -150px;
opacity: 0.1;
color: red;
}
As the default player.js cycles thru states [IDLE PLAY BUFFER] the red , transparent overlay, "SAMPLE" is displayed.
I want to get rid of that feature when i play my own mp4s.
So, I removed the offending css above and i hosted the new css file without the red sample.
I went to the dev console for "Google Cast SDK" and changed the custom style to the URL for my hosted CSS file.
I wait 4 hours.
I reboot the chromecast device.
I manually reload the window in the debugger console for the device.
And , i still see the old CSS with the red SAMPLE.
What do i have to change to get rid of that CSS on the player.js used with the default receiver?
Below is the html loaded in the debugger for the chromecast device by my android app.
<html><head>
<title>Cast Media Player</title>
<link rel="stylesheet" href="0002/player.css">
<script type="text/javascript" src="0002/player.js"></script><link rel="stylesheet" type="text/css" href="https://storage.googleapis.com/gtv-videos-bucket/receivers/f742e4109ea711e3a5e20800200c9a66/style.css">
<script type="text/javascript" src="//www.gstatic.com/cast/sdk/libs/receiver/2.0.0/cast_receiver.js"></script>
<script type="text/javascript" src="//www.gstatic.com/cast/sdk/libs/mediaplayer/0.3.0/media_player.js"></script>
</head>
<body>
<div id="player" class="gcpa" type="video" state="playing"><div class="background"></div><div class="gcpb" style=""><video style="background-image: none;" src="http://....0685/fade0569-bd5b-4cc2-a05d-85cb24860c56-20140430101403.mp4"></video><div class="logo"></div><div class="gcpr"></div><div class="splash"></div><div class="watermark"></div><div class="gcpc"></div><div class="gcpd"><div class="gcph"><div class="gcpg" style="background-image: url(http://.....ecb7c32-me1563624197.jpg);"></div><div class="gcpf"><div class="gcpi">the light the Divinity t</div><div class="gcpj"><div><span>robrowntree</span></div><div><span>the light the Divinity the absolute poise Aaron rumpled beds at morning </span></div></div></div></div><div class="gcpk"><span class="gcpl"></span><span class="gcpp">00:08</span><span class="gcpq">00:10</span><div class="gcpm"><div class="gcpn progressBar" style="width: 80%;"></div><div class="gcpo" style="left: 80%;"></div></div></div></div></div><div class="message"></div></div>
<script>
var playerDiv = document.querySelector("#player");
new castplayer.CastPlayer(playerDiv).start();
</script>
</body></html>
If you use the applicationId "CC1AD845", then the SAMPLE is removed.
This is the default application ID and defined by constant CastMediaControlIntent.DEFAULT_MEDIA_RECEIVER_APPLICATION_ID.
I am not clear what the issue is here. If you use the "Default Receiver" or your own Styled Receiver, there will be no SAMPLE watermark at all; if you use the receiver that CastVideos app is using, you'll see that big red watermarking (which you will not be able to remove).
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