I have been at this for days and have had no luck with trying to trouble shoot. So I have multiple live streams up on my site and I wanted to put this in an app but everytime I upload to phonegap and download on my phone the video wont play.
Neither the Flash or HTML5 version of the app plays. I simply copied the code I used on the site to place in my index.html document of my app but for some reason it fails. The message I get reads something like (going off memory) Either there was a problem with the network or server or this file is not supported). Although I know that isnt the fact because it works when I view the site from my phone, just not the app.
Markup looks something like this:
<head>
<script type="text/javascript" src="http://www.my-domain.com/jwplayer/jwplayer.js"></script>
</head>
<body>
div id='mediaplayer2'>
<script type="text/javascript"> jwplayer('mediaplayer2').setup({
'id': 'playerID', 'width': '388', 'height': '218',
'provider': 'rtmp',
'streamer': 'rtmp://0.0.0.0/some-directory',
'autostart': 'true',
'stretching': 'exactfit',
levels: [{
bitrate: "800",
file: "my-file-name",
width: "1280"
}],
'modes': [
{type: 'flash', src: 'http://www.my-domain.com/jwplayer/player.swf'},
{
type: 'html5',
config: {
levels: [ {'file': 'http://0.0.0.0/some-directory/playlist.m3u8'} ],
'provider': 'video'
}
}
]
});
</script>
<video
id="mediaplayer2"
controls="1"
autoplay="1"
height="218"
preload="none"
src="http://0.0.0.0/some-directory/playlist.m3u8"
width="388">
</video>
</div>
</body>
What do I need to do different to get this to work in an app like it does in my browser? Im developing in Dreamweaver and even when I hit "Live" it streams perfectly, just not in app.
Thanks in advance
Use Vitamio Player it can play all kind of streaming also its open source,. u just need to include this as library into ur project and make sure to use vitamio videoview or mediaplayer,. k no worry take a look at this Sample to include Vitamio into ur project
Hope its Helps you,.
Regards
Rajeev
Related
I have one cordova app that loads content directly from client website.I have used it like <content src="https://example.com/ios/index.html"> in config.xml file.I have used the splashscreen delay of 6 seconds.and the issue is when the splash screen hides shows the black screen for 5-10 seconds and after that client website content is shown.and also sometimes i am getting the error CONNECTION TO SERVER WAS UNSUCCESSFULL.I have also specified <preference name="loadUrlTimeoutValue" value="700000" /> but still having same issue.Anyone having the same issue for cordova ios and android app?can anyone help me with this issue.
You shouldn't do it like that. Now I don't want to play this script where you ask A and I tell you to do B, don't worry, but it's really not the way you should do it.
You should make cordova load an index.html which loads a javascript file cordova.js. You don't need to actually have it, the js file will be included when you compile the app.
Then you should add the whitelist plugin in case you don't already it, in order for your website to load correctly. https://www.npmjs.com/package/cordova-plugin-whitelist
You should disable auto-hide for the splashscreen in config.xml like so:
<preference name="AutoHideSplashScreen" value="false" />
You should then make the javascript load a fullscreen iframe with your website like so, then detect when loading has finished: (This should go into your index.html, in the cordova app)
<html>
<head>
<title></title>
</head>
<body>
<iframe id='frameid' onload='iframeLoaded();' src='https://mywebsite.com/mypage.html' style='border: 0; width: 100%; height: 100%'>Your browser doesn't support iFrames.</iframe>
<script src='cordova.js'></script>
<script>
iframe = document.getElementById("frameid");
iframe = document.getElementById("frameid");
function ready(callback){
// in case the document is already rendered
if (iframe.readyState!='loading') callback();
// modern browsers
else if (iframe.addEventListener) iframe.addEventListener('DOMContentLoaded', callback);
// IE <= 8
else document.attachEvent('onreadystatechange', function(){
if (iframe.readyState=='complete') callback();
});
}
ready(function(){
setTimeout(function(){
navigator.splashscreen.hide();
},555)
});
</script>
</body>
</html>
I haven't used cordova for a few months but that's how I did it if I didn't forget anything - Hoping I didn't... I didn't have time to test this, but you get the gist:
App start
Show Splashscreen
Load Index.html with Iframe in fullscreen pointing to https website.
Wait for iframe to finish loading.
Close splashscreen
Tell me if you run into any issue and I can help you further.
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 am doing a project with the following techs: phonegap (v 4.1.2), angular (v 1.3.0) and onsen ui (v1.2.1).
I am really having a hard time to include Angular Google Maps on it. I am really lost because I am no receiving any log to follow.
I am going to write the steps I have followed in order to hopefully anyone notice where is the mistake.
First, I always like to start with a simple example, so I decided to create a sample project. I used this:
http://angular-ui.github.io/angular-google-maps/#!/use
I create my phonegap project structure, follow the instructions and voilá, the map appears correctly.
Then, it's time to include the code in the project. it consists in the following elements (I will write which I think are important to the issue, if any more info is required I will add it later)
File: index.html
<script src="components/onsen/js/angular/angular.js"></script>
<script src="lib/onsen/js/onsenui.js"></script>
<script src="components/lodash/lodash.js"></script>
<script src="components/angular-google-maps/angular-google-maps.js"></script>
<script src="cordova.js"></script>
<!--modules-->
<script src="app.js"></script>
<!--controllers-->
<script src="controllers/updateCtrl.js"></script>
<script src="controllers/geoCtrl.js"></script>
File: geolocalizacion.html
<ons-page on-device-backbutton="menu.setMainPage('main.html', {closeMenu: true});">
<ons-toolbar>
<div class="left">
<ons-toolbar-button ng-click="menu.toggle()">
<ons-icon icon="ion-navicon" size="28px" fixed-width="false"></ons-icon>
</ons-toolbar-button>
</div>
<div class="center">Geolocalización</div>
</ons-toolbar>
<div id="map_canvas" ng-controller="GeoCtrl">
<ui-gmap-google-map center='map.center' zoom='map.zoom'></ui-gmap-google-map>
</div
</ons-page>
File: app.js
//App module
angular.module('app', ['onsen', 'angularLocalStorage', 'ngSanitize', 'uiGmapgoogle-maps']);
//Configs
//Google Maps SDK
angular.module('app').config(function(uiGmapGoogleMapApiProvider) {
uiGmapGoogleMapApiProvider.configure({
key: 'xxx',
v: '3.17',
libraries: 'weather,geometry,visualization'
});
});
File geoCtrl:
angular.module('app').controller('GeoCtrl', function($scope, uiGmapGoogleMapApi, uiGmapLogger){
console.log('Loading geoCtrl');
uiGmapGoogleMapApi.then(function(maps) {
$scope.map = { center: { latitude: 45, longitude: -73 }, zoom: 8 };
console.log('map: ', maps);
});
});
It seems to be all correct, nothing is shown is logs. I have used the same api key for the sample app and the project, but I think this is allowed. The logs 'Loading geoCtrl' is appearing, and the 'map:' is appearing blank, but the same occurs in the sample app but even though the map appears.
Any idea what can I test, what is wrong or any little hint. I am pretty new to angular developement, I think this is importan to mention to.
Thanks in advance guys for your time.
Regards,
Néstor
Finally I found out what was happening. There was no problem with the code posted. The error was mine, I was missing some css code to display the map.
css:
.angular-google-map-container { height: 400px; }
need some help.
I'm building an app with HTML5 and using 'Intel XDK' to convert it to an .apk for android. The only issue I'm having is 'Looping' audio files.
I'm using a pretty simple code:
<audio id="myAudio" autoplay loop>
<source src="sounds/mysound.mp3" type="audio/mpeg"/>
<source src="sounds/mysound.ogg" type="audio/ogg"/>
</audio>
When I test the app the sound plays, but only once, no loop.
Thanks in advance!
You can achieve this in Java script in HTML by:
<script language="JavaScript" type="text/javascript">
var mp3snd = "songlocation.mp3";
var oggsnd = "home-sound.ogg";
document.write('<audio loop autoplay="autoplay">');
document.write('<source src="'+mp3snd+'" type="audio/mpeg">');
document.write('<source src="'+oggsnd+'" type="audio/ogg">');
document.write('<!--[if lt IE 9]>');
document.write('<bgsound src="'+mp3snd+'" loop="1">');
document.write('<![endif]-->');
document.write('</audio>');
//-->
</script>
It will achieve the same effect that you want (playing in background) while still being in HTML 5.
Installing this plugin might also help.
(Update for issue with XDK Android Sound Loop)
So I've made a compromise that works! Loops when app is running,but it won't run when the phone is locked.. Tested using Intel XDK Android build.
I created an internal IFRAME, that refreshes itself when the sound is over. Example below is a 1 minute sound:
On the page that audio is required:
<div id="audio_stream" style="position: absolute; margin-left: -1000px;">
<iframe src="iframes/audiotrack.html"></iframe>
</div>
This is the IFRAME code: (location: iframes/audiotrack.html)
<!--First, include refresh in meta-->
<meta http-equiv="refresh" content="60;url=audiotrack.html" />
<!--now enter audio that you wish to loop-->
<div id="audio_stream">
<audio controls autoplay="autoplay">
<source src="../sounds/FX/audiotrack.mp3" type="audio/mpeg"/>
</audio>
</div>
So it works, but not in the background. Anyone have any idea on how to keep this playing when the phone is locked?
I wanted to use FusionCharts with android 2.2 (may be on emulator).
I tried using Javascript and the HTML but did not get the expected result.
Any help??
My code is as follows :
WebView web;
/** Called when the activity is first created. */
#Override
public void on Create(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
web=(WebView)findViewById(R.id.webView1);
web.loadUrl("file:///android_asset/Fusioncharts/myChart.html");
}
}
Also my html,xml files :
<html>
<head>
<title>My First chart using FusionCharts
</title>
<script type="text/javascript" src="JavaScripts/FusionCharts.js">
</script>
</head>
<body>
<div id="chartContainer">FusionCharts will load here!
</div>
<script type="text/javascript">
<!--
var myChart = new FusionCharts("Pie2D.swf? dataURL=Data.xml","myChartId", "400", "300", "0", "1" );
myChart.setXMLUrl("Data.xml");
myChart.render("chartContainer");
// -->
</script>
</body>
</html>
and Data.xml :
The above code just displays me : FusionCharts will load here!
Thanks
Sneha
EDIT> NEW CONTENT:
You might need to enable JavaScript and plugins for the WebView:
webview.getSettings().setJavaScriptEnabled(true);
webview.getSettings().setPluginsEnabled(true);
http://developer.android.com/reference/android/webkit/WebView.html
What does "install Flash plugin" in WebView mean?
How to Enable Flash Plugin in Webview?
Also you might need to set proper path to the SWF and JS files. Please debug or attach code here.
OLD CONTENT:
There seems to be a JavaScript error or FusionCharts not getting loaded to do the rendering as stated by Duniyadnd.
Please check the Android debug (using adb logcat or other processes) if it traces any error.
Moreover, I did an implementation using PhoneGap which you can check-out from:
PhoneGap API to query call-logs
This is a small PhoneGap Android application which has FusionCharts to show call logs from the device. The post though showcases creation of plugin to get the calllog, you might derive the other elements which you require. Hope this might help.