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
Related
So here is the point. I have some files downloaded on my device. Because can be video,mp3 or pdf, it can be nice to display it on a webview so its preview system will do the work for me, and I have no necessity to download any external media player.
I have this code
let's assume that this path:
const path = 'file:///Users/MyUser/Library/Developer/CoreSimulator/Devices/D18AD5B6-22D1-4F57-A162-8A1C5DBCAD7A/data/Containers/Data/Application/BF9347EB-8EDF-45CB-9CFD-08C0C8BE3D5C/Documents/song.mp3';
<WebView
javaScriptEnabled
source={{ uri: path }}
style={{ marginTop: 0 }}
/>
My problem is when I'm trying to load the file, it always raise this error:
I suspect it's about the route of the uri. With require It renders an error as well ( module cannot be resolved).
This app is just for Ios, not Android.
Any help will be really appreciate!
Thanks in advance
I got it!!!
It was rough but finally, I get it.
I did it with a webview finally. What I did:
<WebView source={{ html: `<html>
<body>
<video width="320" height="240" controls>
<source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
Your browser does not support the video
</video>
</body>
</html>` }} />
With this one, thanks to #marx_tseng I injected HTML on the webview, so I took advantage of the media player from the browser.
I had to load the video/image/mp3 from the bundle.js.It is loading previous when you invoke a webview. In this example, I use RNFetchBlob just to point to the folder that my documents are stored inside my device.
const html = `<script src="${RNFetchBlob.fs.dirs.MainBundleDir}/bundle.js"></script> `;
<WebView
source={{ baseUrl: RNFetchBlob.fs.dirs.DocumentDir, html,</Webview>
Finally, this is the code result:
const html = `<script
src="${RNFetchBlob.fs.dirs.MainBundleDir}/bundle.js"></script> `;
<WebView
source={{ baseUrl: RNFetchBlob.fs.dirs.DocumentDir, html,
html: `<html>
<body>
<video width="320" height="240" controls>
<source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
Your browser does not support the video
</video>
</body>
</html>`
}}
/>
Here #plougsgaard Provided with this solution.
https://github.com/wkh237/react-native-fetch-blob/issues/197
I hope that this answer can help if someone is stuck in the same situation.
Cheers!
You cannot play video in webview. please use npm packages like react-native-video it will help you to play videos with more controls
this maybe help you, using html video/audio tag
I am working on a site that uses JW Player to skin YouTube videos. It works fine in Chrome and FireFox but just doesn't load the skin in IE. The video plays using the YouTube player but it just doesn't have any controls.
Even in the most basic of setups it will still not work, example below. I am using a Pro account and the full version of JW Player is 6.11.4923.
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script src="http://jwpsrv.com/library/127baEpAEeSLmSIAC0WXxA.js"></script>
</head>
<body>
<div id='video'></div>
<script type='text/javascript'>
jwplayer('video').setup({
file: '//www.youtube.com/watch?v=aqz-KE-bpKQ',
skin: 'beelden'
});
</script>
</body>
</html>
I am also getting an error in the console, screenshot below:
> Error handling "jwplayerMediaLevelChanged" event listener [0]:
> TypeError: Cannot read property 'length' of undefined function
Any help would be great, thanks.
Ethan JWPlayer (https://stackoverflow.com/users/1645000/ethan-jwplayer) mentioned (here: jwplayer playlist is not working in mobile) that playlists are not supported with youtube videos on mobile, but it would be supported in the future.
Is it supported yet? If not what's the plan (ETA)?
Have you tried this code ?
<html>
<head>
<title>Test Page</title>
</head>
<body>
<script type="text/javascript" src="http://player.longtailvideo.com/jwplayer.js"></script>
<div id="player"></div>
<script type="text/javascript">
jwplayer("player").setup({
file: "http://gdata.youtube.com/feeds/api/playlists/PL895D164BB097AA0F",
flashplayer: "http://player.longtailvideo.com/player.swf",
volume: 80,
width: 465,
stretching: 'fill'
});
</script>
</body>
</html>
The playlist url must be in this format:
http://gdata.youtube.com/feeds/api/playlists/PL895D164BB097AA0F
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/
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.