i'm developing an app for iOS and Android with Phonegap 2.1.0 and jQuery Mobile 1.2.0. iOS version is already finished but we are experimenting some problems with the Android one...
One of the app sections is a list of videos and they are opened in a iframe inside a pop up, in iOS works well but if we try this in an Android device (Nexus 7 with Android 4.2) we only get the fist screenshot and when we press play only sound is played, without video. We've tryed to open the iframe url with childbrowser in a webview and the result is the same. Only if we open it in an external browser (openExternal) it seems to work.
I think maybe is Vimeo's player problem, but when we try to play the videos, we see this errors in the log:
01-08 22:45:12.084: E/libEGL(26580): call to OpenGL ES API with no current context (logged once per thread)
01-08 22:45:12.094: D/MediaPlayer(26580): Couldn't open file on client side, trying server side
I've been searching for hours without success, so i expect someone may know how to make it works... :/
For the iFrame, we are using the code Vimeo's giving us from the embed section of each video (i can´t post them here cause theyre private), and... Vimeo's option to make video compatible with mobile devices is marked as well.
Thanks!
HTML
<head>
<meta charset="utf-8">
<!--
| WARNING:
| For iOS 7, remove the width=device-width and height=device-height attributes.
| #see https://issues.apache.org/jira/browse/CB-4323
'-->
<meta name="viewport" content="width=device-width,height=device-height,target-densitydpi=device-dpi,user-scalable=no,initial-scale=1,minimum-scale=1,maximum-scale=1,minimal-ui">
</head>
<body>
<div class="close">
fechar
</div>
<script id="tmpl-player" type="text/template">
<iframe id="video" src="https://player.vimeo.com/video/[[video]]?autoplay=1&autopause=1&byline=0&badge=0&title=0&portrait=1&color=333&loop=0" width="100%" height="100%" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</script>
<script>
var bodyEl = document.querySelector('body');
var tmplPlayerEl = window.document.getElementById('tmpl-player');
var tmplPlayer = template(tmplPlayerEl.innerHTML, getURLParams());
function getURLParams() {
var query = location.search.substr(1);
var result = {};
query.split('&').forEach(function(part) {
var item = part.split('=');
result[item[0]] = decodeURIComponent(item[1]);
});
return result;
}
function template(raw, data, keep404) {
return raw.replace(/\[{2,}[(\s\uFEFF\xA0a-zA-Z0-9_\./]+\]{2,}/gi, function(match, value) {
value = match.replace(/^\[{2,}|\s+|\]{2,}$/g, '');
return typeof data[value] !== 'undefined' ? data[value] : (keep404 ? match : '');
});
}
var newNode = window.document.createElement('div');
newNode.innerHTML = tmplPlayer;
bodyEl.appendChild(newNode);
</script>
</body>
JAVASCRIPT:
var fsVideo = window.open('vimeo.html?video='+video, '_blank', 'location=no,zoom=no');
fsVideo.addEventListener('loaderror', onLoadError);
fsVideo.addEventListener('loadstop', onLoadStop);
fsVideo.addEventListener('exit', onExit);
function onLoadError(evt){
fsVideo.close();
}
function onLoadStop(evt){
evt.url.match('cordova:close') && fsVideo.close();
}
function onExit(evt){
fsVideo.removeEventListener('loaderror', onLoadError);
fsVideo.removeEventListener('loadstop', onLoadStop);
fsVideo.removeEventListener('exit', onExit);
fsVideo = null;
}
Don't forget https://github.com/apache/cordova-plugin-inappbrowser
Related
I've been wrestling with making calls to window open, using inappbrowser from within my app. Basically, I'm using phonegap as a wrapper to load up a mobile skinned CMS site with special app features.
Here is the index.html. I'm using inappbrowser (with location set to no).
<!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>
<title>Emerald Test App</title>
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="viewport" content="width=device-width" />
<script src="phonegap.js"></script>
<script type='text/javascript'>
var ref = null;
function onLoad() {
document.addEventListener("deviceready", onDeviceReady, false);
}
function onDeviceReady() {
var url = 'https://my-cms-site.com/content.aspx?page_id=31&org_id=1&app=1';
var target = '_blank';
var options = "location=no"
ref = cordova.InAppBrowser.open(url, target, options);
}
</script>
</head>
<body onload="onLoad()">
</body>
</html>
What I'm looking to do, is open links in a system browser - from my external site loaded through inappbrowser
I've tried downloading files using similar documentation and suggestions from posts like
<script type="text/javascript">
window.open(url, '_system');
</script>
And _blank, and adding 'location=no' etc, but no dice. These are external pages, loaded from my remote site.
When these links are clicked, they open in the same browser (inappbrowser or webview) and take over the browser. What I'm looking to do is open these up in another system browser (chrome, safari, whatever). This would take care of my download issue (as the files will hopefully open up in the system browser and the user can figure out what to do with them).
I've tried to add an event listener, and executescript to return a value of the href. Then use that value to window.open(href,'_system'); from the index.html (instead of the remote page). Because on the index, I will still have the reference to inappbrowser.
ref.addEventListener( "loadstop", function() {
ref.executeScript(
{ code: "var gbal = null; $('a').on('click', function() { gbal = $(this).attr('href'); }); (function runIt() { return gbal })();" },
function( values ) {
if (values != null) {
//alert( values[ 0 ] );
window.open(values[0],'_system');
}
}
);
});
}
The values[0] is always null. Which seems to indicate I'm not doing something correctly in the code: portion of executescript - or $(this) is not really this
So, big question - how can I open links in my external site in a system browser. window.open('whatever.htm', '_XXXXX') makes no difference when called on my remote site. Am I on the right track by using an event listener?
Answering my own question here so anyone facing a similar situation can get a solid answer. I've pieced this together from other posts, references and documentation.
So you want to open up a link to an external browser, in a remote loaded site in InAppBrowser?
On your remote site, you will need to include a script src to your cordova.js file, your cordova_plugins.js file, and include your plugins folder. These files must be hosted on your remote site.
I am choosing to load mine conditionally if I know it's the "app". The cordova files when loaded will throw a series of alerts, so you won't want to load these unless you know it's the app.
Where do you get these files? I installed Phonegap Desktop and used the files from the build, but had some reference errors. I instead used Phonegap Build, and extracted the files from the APK. Renamed the appname.apk to appname.apk.zip and extracted/copied the needed js files to my server. *There are some issues with platform differences, and the cordova.js file will need to be altered and conditionally loaded for iOS/Android.
These are necessary so you have handles to the inappbrowser (and in the case of my "close the app" requirement - navigator).
On my remote (external) site (after I have loaded the cordova/plugins) I can now close the app with a simple call to
navigator.app.exitApp();
In the pages of my remote (external) site loaded in inappbrowser, I can now open links in external pages by doing something like this:
<a onclick="loadUrl('http://google.com'); return false;" href="#">Test link, don't click</a>
<script type="text/javascript">
$('.closeapp').click(function() {
navigator.app.exitApp(); //this only works on Android. iOS doesn't allow for programmatic exit
});
function loadUrl(url){
navigator.app.loadUrl(url, { openExternal:true });
return false;
}
</script>
I plan on modifying the loadURL function somewhat using jquery, to be handled on click and look for a class. Something like:
$('.downloadable').click(function() {
var url = $(this).attr('href');
navigator.app.loadUrl(url, { openExternal:true });
});
The above only works for Android.
Trying a vanilla window.open('http://www.whatever.com', '_system') doesn't open an external browser in iOS from my external site. I thought about using another ref = cordova.inappbrowser.open() from inside my external site? That doesn't work. Anyone have any ideas?
I developed simple android and iOS app.
I want when user is in my site (from mobile phone), to popup text with redirect to google play or apple store, "for your device is available android or iOS application".
My question is how to do that?
Which script i can put in my website so when user surfing on my website from mobile device to popup information that exist mobile application for his device?
Thank you
The way I would do this, first find the mobile type using mobile agent and base on that will redirect to the correct locations. e.g. putting the java scripts on top of your header page between
<head></head>
<script>
if( /iPhone|iPod/i.test(navigator.userAgent) ) {
window.location = "YOUR apple app url goes here";
} else if( /Android/i.test(navigator.userAgent) ) {
window.location = "YOUR google play app url goes here";
}
</script>
For Iphone devices
you need to add this in head
<meta name="apple-itunes-app" content="app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL">
affiliate-data and app-argument is optional
For Android Devices
There is no native support for App Banners
You need to create yourself banner or use the jquery plugin click here to download
Here is the markup
<head>
<!-- copy head -->
<meta name="google-play-app" content="app-id=com.adianteventures.adianteapps.feliz_navidapp">
<link rel="stylesheet" href="jquery.smartbanner.css" type="text/css" media="screen">
<!-- end copy head -->
</head>
<body>
...
<!-- copy body -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script src="jquery.smartbanner.js"></script>
<script type="text/javascript">
$().smartbanner();
</script>
<!-- end copy body -->
</body>
I have this code in my index.html
if((navigator.userAgent.match(/iPhone/i)) ) {
if (document.cookie.indexOf('iphone_redirect=false') == -1) {
if (confirm('for your device exist iphone app')) {
window.location = 'https://itunes.apple.com/us/app/....';
}
}
}
var ua = navigator.userAgent.toLowerCase();
var isAndroid = ua.indexOf('android') > -1;
if(isAndroid) {
if (confirm('for your device exist iphone app')) {
window.location = 'https://play.google.com/store/apps/details?id=...';
}
}
But i don't know how to make cookie to remember my answer.
If user click "cancel" or "OK" to remember "cancel" or "OK" until user clean cache.
Do you have idea how to make cookie to remember answer?
The goal of what we are trying to do is get the user to click a link and then play a video fullscreen on mobile devices.
I am unable to get the below code working consistently on mobile devices using Video.js. We are using brightcove so I need to set the video element source dynamically. I can get the fullscreen working if the source is set initially, but even then it isn't consistent. We are testing on Android (Chrome, FireFox and the default browser) and iOS. For what it is worth we do not need to support desktop on this.
<!DOCTYPE html>
<html>
<head>
<title>Video.js | HTML5 Video Player</title>
<link href="video-js.css" rel="stylesheet" type="text/css">
<script src="video.dev.js"></script>
<script>
videojs.options.flash.swf = "video-js.swf";
</script>
</head>
<body>
<video id="example_video_1" class="video-js vjs-default-skin" controls preload="none" width="640" height="264">
</video>
play
<script>
var video = videojs("example_video_1", {}, function(){
});
video.on("fullscreenchange",eventTriggered);
video.on("play",eventTriggered);
function playVideo(){
video.src({src:'http://video-js.zencoder.com/oceans-clip.mp4',type:'video/mp4'});
video.play();
video.requestFullScreen();
return false;
}
function eventTriggered(e){
console.log("event:"+e.type);
}
</script>
</body>
</html>
Code variations
The below code works on FireFox and the default browser but not android. iOS plays but does not trigger the fullscreenchange event.
var video = videojs("example_video_1", {}, function(){
this.on("fullscreenchange",eventTriggered);
this.on("play",eventTriggered);
this.src({src:'http://video-js.zencoder.com/oceans-clip.mp4',type:'video/mp4'});
});
function playVideo(){
video.play();
video.requestFullScreen();
return false;
}
This as well has sporadic support
var video = videojs("example_video_1", {}, function(){
});
video.on("fullscreenchange",eventTriggered);
video.on("play",eventTriggered);
video.src({src:'http://video-js.zencoder.com/oceans-clip.mp4',type:'video/mp4'});
function playVideo(){
video.play();
video.requestFullScreen();
return false;
}
EDIT:
On further investigation, on iOS it appears the native tech is used. It doesn't seem to manually trigger this.trigger('fullscreenchange'); as the alternatives do.
Lines 3519-3523 video.dev.js
} else if (this.tech.supportsFullScreen()) {
// we can't take the video.js controls fullscreen but we can go fullscreen
// with native controls
this.techCall('enterFullScreen');
} else {
I am a beginner in learning Android app development. Here is my issue
I am using the eclipse given along with Android SDK to develop the Apps. To web enable the Apps i have used phonegap build tutorial to add cordova API. Now i am able to see the html file if i just use a normal HTML controls or text. But i have a code which calls a webservice from another WebSphere server and displays the data. When i run the code in IIS server (using DreanWeaver IDE) it works perfectly. But when i try to run this as an app in the emulator (From Android SDK) i dont see any output from the webservice. I can't even see a call from the android app to my webspehere server (which i can see when i run this code as a web page in Dreamweaver). Here is my index.html code. I have included the ws.js and prototype.js inside assets/www/scripts/ if anyone is wondering about that. Can somebody help me to resolve this issue.
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;" />
<meta charset="utf-8">
<script type="text/javascript" src="scripts/prototype.js"></script>
<script type="text/javascript" src="scripts/ws.js"></script>
<script type="text/javascript">
function onBodyLoad(name, container)
{
console.log("Here1");
var call = new WS.Call('http://localhost:9080/ILM/services/ILMReports');
var nsuri = '';
var qn_op = new WS.QName('getInboundSearchByItemReport',nsuri);
var qn_op_resp = new WS.QName('getInboundSearchByItemReportResponse',nsuri);
call.invoke_rpc(
qn_op,
new Array(
{name:'name',value:name}
),null,
function(call,envelope) {
var ret =
envelope.get_body().get_all_children()[0].
get_all_children()[0].get_value();
container.innerHTML = ret;
}
);
/*window.location = "TestingAJAXWS.html";*/
}
function onDeviceReady()
{
// do your thing!
navigator.notification.alert("PhoneGap is working")
}
</script>
</head>
<body onload="onBodyLoad('aaa',$('result'))">
<h1>Hey, it's PhoneGap!</h1>
</body>
The problem i can see is the localhost address you are using to access the web service.
Somehow android emulator don't allow to the localhost address as it is unknown to the emulator. (if you know the reason please write)
This is an old thread. But i hope it'l help somebody else.
/T
I have one question about access to the camera from the browser.
(Android and iOS browser)
Google and Apple announced 1 year ago, that the access from the browser to the camera should be available soon.
I need this function for a mobile Web Application.
Is this feature available now?
try the following:
<html>
<body>
<form>
<input type="file" accept="image/*;capture=camera"/>
<input type="submit"/>
</form>
</body>
</html>
I did using the input, as they said here, and worked really good on iOs. I could get a picture from camera or photo album and set an img element.
Here is the code: http://jsfiddle.net/2wZgv/
The js:
<script>
oFReader = new FileReader();
oFReader.onload = function (oFREvent) {
document.getElementById("fotoImg").src = oFREvent.target.result;
document.getElementById("fotoImg").style.visibility = "visible";
var screenHeight = screen.availHeight;
screenHeight = screenHeight - 220;
document.getElementById("fotoImg").style.height = screenHeight;
};
$(function() {
$("input:file").change(function (){
var input = document.querySelector('input[type=file]');
var oFile = input.files[0];
oFReader.readAsDataURL(oFile);
});
});
</script>
picture photo album mobile jquery camera
This is the w3c draft
After reading it the input tag should be
<input type="file" accept="image/*" capture="camera" id="capture">
Try this stuff.
<video id="Video" autoplay="autoplay" audio="muted" width="100%" height ="100%"> </video>
<script type="text/javascript">
if (navigator.getUserMedia) {
var video = document.getElementById('Video');
video.src = null;
navigator.getUserMedia('video', successCallback, errorCallback);
//if everything if good then set the source of the video element to the mediastream
function successCallback(stream) {
video.src = stream;
}
//If everything isn't ok then say so
function errorCallback(error) {
alert("An error occurred: [CODE " + error.code + "]");
}
}
else {
//show no support for getUserMedia
alert("Native camera is not supported in this browser!");
}
</script>
But remember this will work only with Opera Mobile for Android. No other browser right now supporting with camera access. Up to my knowledge iOS won't support this feature now, may be in future.
Thank You.
This is possible. You can access camera through your browser application. If you are developing through Phone Gap then look for http://docs.phonegap.com/phonegap_camera_camera.md.html
This is the camera API in PhoneGap to access camera.