JwPlayer with MPEG DASH - javascript

I am trying to get the jwplayer with mpeg dash support working but am having some trouble with that.
I am encountering the following error when the page loads :
Error loading player: No playable sources found.
The jwplayer player code is as follows:
<script type="text/javascript">
var playerInstance = jwplayer("myElement");
playerInstance.setup({
file: 'http://yt-dash-mse-test.commondatastorage.googleapis.com/media/car-20120827-manifest.mpd',
dash: true,
width: 640,
height: 360
});
</script>
I will appreciate any feedback to help me fix this problem.

You need a div in there which anchors the location for the player:
<div id="myElement"></div>
with your script and the div element mentioned above it plays fine for me using JWPlayer7:
<div id="myElement"></div><script type="text/javascript">var playerInstance = jwplayer("myElement");playerInstance.setup({file: 'http://yt-dash-mse-test.commondatastorage.googleapis.com/media/car-20120827-manifest.mpd',dash: true,width: 640,height: 360});</script>

I tried playing DASH stream (http://yt-dash-mse-test.commondatastorage.googleapis.com/media/car-20120827-manifest.mpd) in Chrome Canary browser using online JWPlayer test player which is provided and hosted by JWPlayer themselves and stream did work for me without any issue.

Related

HTML/JS Autoplay Clappr 360videos in Chrome

I want to implement a 360 video with Clappr as starting element to my homepage on WordPress-Basis. I am no coding expert, but I try my best.
I used this to build my code: https://ourcodeworld.com/articles/read/518/how-to-create-a-360-video-player-with-javascript-using-clappr
Video and everything is working fine, but, unfortunately, Chrome changed it's autoplay policy and the video is not starting to play in Chrome. In Firefox autoplay works fine.
Then I've found this solution: https://github.com/clappr/clappr/issues/1639#issuecomment-395414240
But, my 360 video is still not autoplaying in Chrome! I really can't figure out what to do, since the codesnippets are close to identical.
I'd be glad for any help or hint! Thanks!
<html>
<head>
<script src="https://cdn.jsdelivr.net/gh/clappr/clappr#latest/dist/clappr.min.js"></script>
<script src="https://cdn.rawgit.com/thiagopnts/clappr-video360/master/dist/clappr-video360.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/can-autoplay#3.0.0/build/can-autoplay.min.js"></script>
</head>
<div id="player" class="video-background"></div>
<script>
// The URL to the 360 video player
var Video360Url = '360_VR.mp4';
// Configure your Clappr player.
var PlayerInstance;
canAutoplay.video().then(function(o) {
var cap = o.result === true;
PlayerInstance = new Clappr.Player({
source: Video360Url,
poster: 'city-view-edit.jpg',
loop: 'true',
autoPlay: cap,
height: '100%',
width: '100%',
hideMediaControl: 'true',
chromeless: 'true',
allowUserInteraction: 'false',
preload: 'auto',
plugins:
{
container: [Video360],
},
parentId: '#player',
});
PlayerInstance.getPlugin('click_to_pause').disable();
});
</script>
</html>
Just passing by.
Do you try to mute the video first? As chrome and other browsers have policy that not allow auto-playing video with sound.
Clapper mute demo with JS script
cheer

JW Player - loop MP4 standby video when other media (RTMP) is disconnected

I have JW Player embedded on our website.
The plan is to stream video only at certain times of day, with a standby video used when the stream is not connected.
At present the below code works very well if the RTMP is connected, however it stalls o the RTMP media source if the RTMP stream is not live.
Current code (can be seen i action at http://www.powerballlive.com/powerball/streamtest.html);
<script type="text/javascript" src="http://www.powerballlive.com/powerball/jwplayer/jwplayer.js"></script>
<script>jwplayer.key="Iz4ZkMD0vBmE3ao9rJMrEK2hb2o00wjqUBMnvA==";</script>
<title>PowerBall Live: Test</title></head>
<body>
<div id="myElement">Loading the player...</div>
<script type="text/javascript">
var playerInstance = jwplayer("myElement");
playerInstance.setup({
playlist: [{
file: "http://www.powerballlive.com/powerball/jwplayer/standby.mp4"
},
{
file: "rtmp://cp310032.live.edgefcs.net/live/4ccc983a#390564"
}],
primary: "flash",
height: 360,
width: 480,
autostart: 'true',
repeat: "always"
});
</script>
</body></html>
I'm looking for a solution where the MP4 will loop until the RTMP is connected, then resume looping when it's offline.
Any support is greatly appreciated, thanks in advance!
var IsPlaying = jwplayer('myElement').getState();
setInterval(function(){
if (IsPlaying != 'PLAYING') {
$('#myElement').hide();
$('#standbyPlayer').show();
}
else {
$('#myElement').show();
$('#standbyPlayer').hide();
}
}, 1000);
That will poll your jwplayer every 1000ms and show the standby player if the main player is not playing. Do you know how to use jQuery to manipulate DOM elements? I can post more info if necessary. Thanks.

JwPlayer: HTML5 player not found

I am using JW Player to play videos. But its throwing Error loading player:
HTML5 player not found.
My Code:
<%= jwplayer_assets %>
<div id="mediaplayer", align="center">
</div>
<script type="text/javascript">jwplayer.key="wjl6yMFUQPDP";</script>
<script type="text/javascript">
jwplayer("mediaplayer").setup({
flashplayer: "<%= asset_path('player.swf') %>",
file: "<%=#video_url%>",
height: 360,
width: 640
});
</script>
please help me to solve this problem.
Here is a working copy.
You can clone or download it as zip file
https://github.com/shamsulsham89/jwplayer-rails3.2
and run it on your system. But update the browser to latest version so that it supports the html5 otherwise it will throw error.
Steps to run:
1> bundle install
2> rails s
Go to the show page after starting rails server from index page.

Youtube JS API Causes Error in Internet Explorer

I am attempting to embed a Youtube Video inside a webpage. I am using the Youtube Javascript API to embed/load the videos.
My Problem: The video embeds inside Internet Explorer but there are many javascript errors when I inspect the console. These errors mean I cannot replay the video, make the video grow, or really do anything. These javascript errors do not occur in Firefox or Chrome just IE.
Console Error:
SCRIPT87: Invalid Argument.
www-embed-player-vf1m....js line 211 character 405
Heres my JSFiddle that demonstrates the problem. Remember to RUN it in IE to see the problem.
My code:
<html>
<head>
<script src="https://www.youtube.com/player_api" type="text/javascript"></script>
<script type="text/javascript">
function loadYouTubeVideo(uid) {
setTimeout( function() {
var id = uid;
var instPlayer = new YT.Player(id, {
height: '240',
width: '426',
enablejsapi: 1,
suggestedQuality: 'highres',
videoId: uid});
}, 500);
}
</script>
</head>
<body>
<p>Run in IE and look at console</p>
<div id="Go3u2zw6fbE"></div><script> loadYouTubeVideo("Go3u2zw6fbE"); </script>
</body>
<html>
The problem was that I was running the Javascript code from a local HTML file and not from a HTML file over the internet.
I guess when you run the Youtube Javascript API in a local HTML file (inside Internet Explorer only) the youtube video wont play. Even if I click 'Allow Javascript' it still wont play.

Why won't my playlist work?

Cross-posted on the Flowplayer forums, but no response there yet, so I hope someone here could help.
I'm having no success at all using the Playlist plugin. I've followed the examples at http://flowplayer.org/plugins/javascript/playlist.html closely, and I get the initial clip to work, but the Playlist plugin does not seem to register. The video loads and plays, so FlowPlayer is loading properly, but playlist doesn't attach any functionality to my playlist objects.
I confirmed that the playlist script is loading: I added alert("playlist!"); to the top of the flowplayer.playlist-3.0.8.js, just after the initial comment block and before the start of the function code. When I load my web page, I see the alert. I get the same results whether using the minified or normal versions of the scripts, and whether I call the flowplayer function with flowplayer() or $f(). I'm using flowplayer 3.2.3 and playlist 3.0.8.
Here's a dead-simple static page that tries to render a FlowPlayer and two clips in a gallery: FlowPlayer appears, but clicking on either of the gallery links replaces the current page with the video playing directly in the browser window, instead of keeping me on the HTML page and playing the video in the FlowPlayer instance.
If I add a config param to the FlowPlayer call and provide a default clip, then that clip plays, but again the gallery links just take me to the raw clip, rather than pushing the clip into the FlowPlayer.
<!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>test flowplayer</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" type="text/javascript"></script>
<script src="/_library/script/flowplayer/flowplayer-3.2.3.min.js" type="text/javascript"></script>
<script src="/_library/script/flowplayer/flowplayer.playlist-3.0.8.min.js" type="text/javascript"></script>
</head>
<body>
<div id="player" style="display: block; width: 776px; height: 432px;"></div>
<div id="gallery">
video 1
video 2
</div>
<script type="text/javascript">
$(function () {
$f("player", "/_library/script/flowplayer/flowplayer-3.2.3.swf")
.playlist("gallery");
});
</script>
</body>
</html>
Any idea what I'm doing wrong? Any help appreciated, let me know if you need more details.
Thanks!
- Val
$f("player", "/_library/script/flowplayer/flowplayer-3.2.3.swf").playlist("gallery");
maybe?
.playlist() is not a function of $(function () {})
$(function () {})
Is how you register an event handler for the load event. Because of this,The code within it is not executed until the load event is fired by the browser and it is possible that the plugin is not available yet.
Also, you are not following the tutorials closely. The code the have is like this
$(function() {
// setup player without "internal" playlists
$f("player2", "http://releases.flowplayer.org/swf/flowplayer-3.2.3.swf", {
clip: {baseUrl: 'http://blip.tv/file/get'}
// use playlist plugin. again loop is true
}).playlist("div.petrol", {loop:true});
});
Note that .playlist is called on the return of $f(), not on $(function(){...}).
OK, fixed.
Many of the examples use a class on the playlist container. In examples using a class, the playlist function is passed a CSS selector -- usually something like playlist("div.gallery")
I changed my markup to use a class, changed the param to playlist() to a fully-qualified CSS selector, and it works!!!
Now, I don't want to use a class-- I have a single playlist element, so I want to use an ID. I changed the markup back to an ID:
<div id="gallery">
video1
video2
</div>
and changed the caller to use a CSS selector for IDs:
playlist("div#gallery");
And that works too!
Finally, I wondered if I needed to specify the element that has the playlist ID, and I don't -- I can give it just a CSS ID selector:
playlist("#gallery");
I think my problem was that with the main flowplayer script, you can address the placeholder element without the . or # qualifier, like $f("player"); instead of $f("#player");. But the Playlist plugin is more picky, and you have to use the qualifier.
All that pain for a single character!

Categories

Resources