I've been trying to use a separate php file for serving the actual mp3 file. So instead of putting actual file path in JWPlayer such as:
player.load('http://www.mydomain.com/music/mysong.mp3');
I'm wanting to do it this way:
player.load('http://www.mydomain.com/serve.php');
The code seems simple enough, but it's not working yet. When JWPlayer tries to load the song, I get an error that says:
"Playlist could not be loaded: Playlist file did not contain a valid playlist"
I'm not using a playlist, so I'm not sure what that means.
Here is the code for the two files:
index.php (main file)
<head>
<script src="js/jquery-1.7.1.min.js" type="text/javascript" language="javascript"></script>
<script src="js/jwplayer.js" type="text/javascript" language="javascript"></script>
<script type="text/javascript" language="javascript">
// <![CDATA[
var player = null;
$(document).ready(function() {
jwplayer('track_player').setup({
flashplayer: "player.swf",
height: 200,
width: 375,
autostart: true,
controlbar: 'over',
events: {
onReady: function(event) {
player = jwplayer('track_player');
}
}
});
});
function loadSong() {
//player.load('http://www.mydomain.com/music/mysong.mp3');
player.load('http://www.mydomain.com/serve.php');
}
// ]]>
</script>
</head>
<body>
Load Song<br />
<div id="track_player"></div>
</body>
serve.php (serve the mp3 file)
<?php
$filename = 'music/mysong.mp3';
header('Content-Type: audio/mpeg');
header("Content-Length: ".filesize($filename));
readfile($filename);
?>
If I call the serve.php file via the browser, it serves up the file fine and the mp3 plays within the browser (FireFox tested).
I can't figure out why it doesn't work via JWPlayer, though.
Any help is appreciated. Thanks.
SOLVED!
'provider' needs to be added to the load() function. So it should look like this:
player.load({'file':'http://www.mydomain.com/serve.php','provider':'sound'});
I hope this helps someone, as someone helped me.
Related
I want to switch from the old OpenVideoPlayer to JWPlayer 7.3 to get better results on my webcasts. We are using Multibitrate RTMPE stream with Akamai Live secure streaming, but within JWPlayer, I only got the "No playabe sources found" (http://webdiffusion.pjcformation.com/evenement/DetailsTest/71/).
To make it work in OpenVideoPlayer (http://webdiffusion.pjcformation.com/evenement/DetailsTestOpenVideo/71/), we create the token from the Akamai API, put it in a variable, then add it at the end of our streamname (see SMIL file below). We create a dynamic SMIL with the 3 streams (multibitrate) to the url /evenement/smil/71/
Akamai told us it is a player issue and JWPlayer doesn't understand at all our problem
So you, how did you manage the token? Here is our code and the SMIL file:
Javascript
<script type="text/javascript">
var filePathNotEncoded = '/evenement/smil/71/';
var tokenOnly = 'dbFaSaWaHbKbjaodoawckcEbbdqajd2aOaM-bxnEBE-Dta-fjLWa-zDCCuFtD';
var aifp = 'ab345';
var playerInstance = jwplayer("my-video");
playerInstance.setup({
provider: '/assets/client/js/plugins/jwplayer-7.3.6/AkamaiAdvancedJWStreamProvider.swf',
file: filePathNotEncoded,
height: 540,
width: 960,
skin: { name: "vapor" },
primary: "flash",
autostart: true
});
</script>
SMIL:
<smil>
<head>
<meta base="rtmpe://xxxxxxx.live.edgefcs.net/live/" />
</head>
<body>
<switch>
<video src="Streamname_1#sxxxxxx/?auth=dbFaSaWaHbKbjaodoawckcEbbdqajd2aOaM-bxnEBE-Dta-fjLWa-zDCCuFtD&aifp=ab345" system-bitrate="300000" />
<video src="Streamname_2#sxxxxxx/?auth=dbFaSaWaHbKbjaodoawckcEbbdqajd2aOaM-bxnEBE-Dta-fjLWa-zDCCuFtD&aifp=ab345" system-bitrate="800000" />
<video src="Streamname_3#sxxxxxx/?auth=dbFaSaWaHbKbjaodoawckcEbbdqajd2aOaM-bxnEBE-Dta-fjLWa-zDCCuFtD&aifp=ab345" system-bitrate="2400000" />
</switch>
</body>
</smil>
Please help, JWPlayer isn't able to help us and Akamai told us that our code is right (it were working with OpenVideoPlayer from Akamai)
Thanks,
Matt
IN my Phonegap ios project i have an i frame and src of Iframe is a local html page within the same www folder . inside the html (IFrame source) one button and onlick listener. i need to open one website while clicking that button in InAppBrowser or in safari (new window). i cannot able to access phonegap methods from the html file (IFrame source), i includeed cordova on both html files, my source html page given bellow, this page is shown in an Iframe.
<html>
<head>
<script type="text/javascript" charset="utf-8" src="cordova.js"></script>
<script src="js/libs/jquery.js"></script>
<script src="adv.js"></script>
<script>
$(document).ready(function () {
$('#advArea').find('button').on('click', function (e) {
e.preventDefault();
var path = "http://www.google.com");
console.log(path);
//window.open(path,'__system');
//need to acces inApp Browser from here
})
});
</script>
</head>
<body>
<div id="advArea">
<button></button>
</div>
</body>
</html>
In your "parent" page where your iFrame is, create the below function
function popnew(path) {
navigator.app.loadUrl(link, { 'openExternal' : true });
}
then you call the above function for any button/link in the iFrame
<button onclick="javascript:parent.popnew('http://www.stackoverflow.com')"></button>
I am new to PhoneGap and would like to know how to save an in-App image to Photos in iOS.
While I was able to use
navigator.camera.getPicture
with options
quality:50, destinationType:Camera.DestinationType.DATA_URL,saveToPhotoAlbum: true
to save a picture taken with the camera to Photos, I am now trying to find out how to save an in-App image to Photos.
Consider the following PhoneGap - Cordova page where the element myPhoto holds imagedata such as "data:image/jpeg;base64,"...
<html>
<head>
<title>Save Image</title>
<script type="text/javascript" charset="utf-8" src="cordova-2.1.0.js"></script>
<script type="text/javascript" charset="utf-8">
function savePicture(){
//this is where the magic would happen
//how can I save myPhoto to Photos?
//output imageData to a jpg or png file which would show up in Photos?
}
</script>
</head>
<body>
<button onclick="savePicture();">Save Photo</button> <br>
<input type="hidden" name="myPhoto" id="myPhoto" value="">
</body>
</html>
Question:
What should savePicture() do to save the imagedata from myPhoto to Photos in iOS via Phonegap?
Maybe you could try the plugin I wrote for IOS (If you want to save a canvas element to photogallery, you could get the dataURI of the canvas the use the downloadWithUrl method below). Hope it works for you.
here is the git link: https://github.com/Nomia/ImgDownloader
Short Example:
document.addEventListener("deviceready",onDeviceReady);
//google logo url
url = 'https://www.google.com/images/srpr/logo11w.png';
onDeviceReady = function(){
cordova.plugins.imgDownloader.downloadWithUrl(url,function(){
alert("success");
},function(){
alert("error");
});
}
//also you can try dataUri like: 1px gif
//url = 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7'
you can also save a local file to image gallery use the download method
I recently came across the following Phonegap plugin for saving Canvas images to Photos in iOS:
https://github.com/devgeeks/Canvas2ImagePlugin
Follow the readme instructions for importing the plugin and then you can use it the following way:
<html>
<head>
<title>Save Image</title>
<script type="text/javascript" charset="utf-8" src="cordova-2.1.0.js"></script>
<script type="text/javascript" charset="utf-8" src="../Canvas2Image/Canvas2ImagePlugin.js"></script>
<script type="text/javascript" charset="utf-8">
var canvas2ImagePlugin; //devgeeks plugin for saving canvas images to photo gallery
function onDeviceReady() {
canvas2ImagePlugin = window.plugins.canvas2ImagePlugin;
}
function savePicture(){
canvas2ImagePlugin.saveImageDataToLibrary(function(msg){console.log(msg);},function(err){console.log(err);},'mycanvas');
}
</script>
</head>
<body>
<canvas id="myCanvas" width="500px" height="300px"> <strong>[Your browser can not show this example.]</strong> </canvas>
<button onclick="savePicture();">Save Photo</button> <br>
</body>
</html>
I'm using jquery mobile and phonegap to create an android application. I followed the short guide "20 Recipes for Programming Phonegap" which recommends using a callback from a custom script loaded on index.html to a function named onPageLoad() where Page is the name of the destination page's html file.
I'm stuck however, because the javascript, which I included inside the data-role="page" div with a script tag, is not loading.
https://stackoverflow.com/a/8838639/153382 points to the jQuery mobile guide that says this should work. I've read the guide, it's not working. Now what?
Has something changed with jquery mobile that makes this no longer work?
Update
Some testing shows that inline scripts run, but the script src attribute is not being evaluated for the script I am trying to load from a file.
also tried <script type="text/javascript">$.getScript("js/lookup.js");</script>. It did not work either.
code
common.js included on index.html after <div data-role="page">...</div>:
<script type="text/javascript" charset="utf-8" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" charset="utf-8" src="js/jquery.mobile-1.1.0.min.js"></script>
<script type="text/javascript" charset="utf-8" src="js/common.js"></script>
relevant contents of common.js:
function executeCallback() {
if (isPhoneGapReady) {
// get name of current html page
var pages = currentUrl.split("/");
var currentPage = pages[pages.length - 1].
slice(0, pages[pages.length - 1].indexOf(".html"));
// captalize the first letter and execute the function
currentPage = currentPage.charAt(0).toUpperCase() +
currentPage.slice(1);
if (typeof window['on' + currentPage + 'Load'] ==
typeof(Function)) {
window['on' + currentPage + 'Load']();
}
alert('on' + currentPage + 'Load: ' + typeof window['on' + currentPage + 'Load']);
// says onLookupLoad: undefined
}
}
$(document).bind("pageload", function(event, data) {
init(data.url);
});
window.onload = init;
init(url) calls onDeviceReady() which calls executeCallback()
lookup.html includes the following line inside <div data-role="page">:
<script type="text/javascript" charset="utf-8" src="js/lookup.js"></script>
Seems as if the issue was that Eclipse was not generating a new apk. I guess this is because the assets directory changed, but the src directory had not. If I delete the apk in the bin folder and run the emulator my code works as designed.
I'm trying to embed a column3d chart from fusioncharts in my MonoTouch project using UIWebView. I've added the necessary outlets and tested by using loadrequest to load a url and loadHtmlString to format a simple line of text. This works fine. I even tested that fusionchart works correctly on my browser using the below code and it does.
I have a folder named "charts" in my MonoTouch project that contains, Column3d.swf, jquery.min.js, FusionCharts.js, FusionCharts.HC.js and FusionCharts.HC.Charts.js.
In my
ViewDidLoad
string htmlString = "<html>
<head>
<script type=\"text/javascript\"src=\"Charts/jquery.min.js\">
</script>
<script type=\"text/javascript\" src=\"Charts/FusionCharts.js\">
</script>
<script type=\"text/javascript\" src=\"Charts/FusionCharts.HC.js\">
</script>
<script type=\"text/javascript\" src=\"Charts/FusionCharts.HC.Charts.js\">
</script>
</head>
<body>
<div id=\"chartContainer\">FusionCharts will load here!
</div>
<script type=\"text/javascript\"> var myChart = new FusionCharts( \"Charts/Column3D.swf\", \"myChartId\", \"400\", \"300\", \"0\", \"1\" );myChart.setXMLUrl(\"Charts/Data.xml\");
myChart.render(\"chartContainer\");
</script>
</body>
</html>";
this.webView.LoadHtmlString (htmlString, new NSUrl ("./Charts", true));
/*string htmlString = "<html><head></head><body><span style=\"font-weight: bold;\">This</span> " +
"<span style=\"text-decoration: underline;\">is</span> <span style=\"font-style: italic;\">some formatted</span> " +"<span style=\"font-weight: bold;text-decoration: underline;\">text!</span><br></body></html>";*/ //works
//this.webView.LoadHtmlString (htmlString, null); //works
Data.xml
<chart caption='Weekly Sales Summary'
xAxisName='Week' yAxisName='Amount' numberPrefix='$'>
<set label='Week 1' value='14400' />
<set label='Week 2' value='19600' />
<set label='Week 3' value='24000' />
<set label='Week 4' value='15700' />
</chart>
Can someone explain how I can get this working? Thanks in advance.
EDIT: I also tried
string htmlString = "<html><head> <title>Creating Pure JavaScript chart</title><script type=\"text/javascript\" src=\"charts/FusionCharts.js\"></script></head> <body><div id=\"chartContainer\">FusionCharts will load here!</div> <script type=\"text/javascript\">FusionCharts.setCurrentRenderer('javascript');var myChart = new FusionCharts( \"charts/Column3D.swf\", \"myChartId\", \"400\", \"300\", \"0\", \"1\" );myChart.setXMLData(\"<chart><set label='Data1' value='1' /></chart>\"); myChart.render(\"chartContainer\"); </script></body> </html>";
where i force the renderer to use javascript and set the chart parameters in the string to no avail. Anyone?
I solved my issue and thought I would post it should someone run into a similar issue.
The first thing I did was to right click on each of my javscript files ie FusionCharts.js, FusionCharts.HC.js and FusionCharts.HC.Charts.js and set their build type to content.
I then told Monotouch the build path for the charts would be contained in the charts folder by declaring
string path = NSBundle.MainBundle.BundlePath + "/Charts/";
Since I declare i am going to look in the Charts folder for related files, I then had to amend my htmlString by removing the "charts" keyword reference from all the "src" as below (since we are already lo.
string htmlString = "<html>
<head>
<script type=\"text/javascript\" src=\"jquery.min.js\">
</script>
<script type=\"text/javascript\" src=\"/FusionCharts.js\">
</script>
<script type=\"text/javascript\" src=\"/FusionCharts.HC.js\">
</script>
<script type=\"text/javascript\" src=\"FusionCharts.HC.Charts.js\">
</script>
</head>
<body>
<div id=\"chartContainer\">FusionCharts will load here!
</div>
<script type=\"text/javascript\"> var myChart = new FusionCharts(\"Column3D.swf\", \"myChartId\", \"400\", \"300\", \"0\", \"1\" );myChart.setXMLUrl(\"Charts/Data.xml\");
myChart.render(\"chartContainer\");
</script>
</body>
</html>";
I then call the loadHtml string method as below with the second argument pointing to the path that contains the javascript files.
this.webView.LoadHtmlString(htmlString, new NSUrl(path, true));
I even tested that fusionchart works correctly on my browser using the below code and it does.
Did you test this with an iOS device running Safari ?
project that contains, Column3d.swf,
That looks like a Flash file and iOS (and WebKit) does not support flash.
The website hints of an HTML5 version - so if they support flash-less browser then you should be able to do what you want using MonoTouch (or anything in iOS) using FusionChart. Otherwise you might need to look at other charting products (or a server-side solution).
FusionCharts had put out a blog post showing how to get HTML5 charts in iOS devices.
Have a look at it here - http://blog.fusioncharts.com/2012/02/create-charts-for-iphone-and-ipad-apps-using-fusioncharts-xt/