Develop Reference

jPlayer jPlayerAndroidFix not working?

I'm working on a website using jPlayer. The problem appeared when I tried to use it with my android phone, so I started recoding it. Now I'm trying to use the jPlayerAndroidFix class. I'm doing it just like in the example given in the source code in the tutorial, and still it's not working.
Here's the code:
function playSound(sound) {
if (playToggle) {
return;
}
var id = "#jplayer-play";
var media = {
mp3: sound
};
var options = {
swfPath: $('body').data('jplayer-swf'),
solution: 'flash,html',
wmode:"window",
supplied: 'mp3',
preload: 'metadata',
volume: 0.8,
muted: false,
errorAlerts: false,
warningAlerts: false,
customCssIds: true
};
var myAndroidFix = new jPlayerAndroidFix(id, media, options);
myAndroidFix.setMedia(media);
myAndroidFix.play();
}
Important thing to add - the audio is received dynamically, for example from a link:
http://granie.t-mobile.pl/sets/play/69986
and that's the "sound" variable.
What may cause the problem? What am I doing wrong?
The jPlayerAndroidFix class can be found in the source code of
http://jplayer.org/latest/demo-01-android/?theme=0

Youtube Javascript API - disable related videos

Right, this seems to be poorly documented or I can't see it in the documentation. I basically want no related videos (?rel=0) using the JavaScript API.
$players[$vidIdPlaceholderRef] = new YT.Player('player_' + $vidIdPlaceholderRef, {
height: '550',
width: '840',
videoId: $vidId
});
is what I have in place.
I have also tried:
$players[$vidIdPlaceholderRef] = new YT.Player('player_' + $vidIdPlaceholderRef, {
height: '550',
width: '840',
videoId: $vidId + '?rel=0',
rel : 0
});
with no luck. Does any one know of an option which can be added (tried rel : 0 with no luck )

"rel" is a player parameter, as specified here:
https://developers.google.com/youtube/player_parameters#rel
To add player parameters to iframe players, you need to specify the playerVars property of the second constructor argument (at the time of writing this is documented here, and on the IFrame API documentation page)
e.g.
new YT.Player('playerid', {
height: '550',
width: '840',
videoID: 'video_id',
playerVars: {rel: 0, showinfo: 0, ecver: 2}
});

The behavior of the rel player parameter has changed.
From documentation,
The behavior for the rel parameter is changing on or after September
25, 2018. The effect of the change is that you will not be able to
disable related videos. However, you will have the option of
specifying that the related videos shown in the player should be from
the same channel as the video that was just played
So, it's no longer possible to disable related videos. Instead playerVars: {rel:0} will change the behavior of the player and shows suggestion from specified channel.

You get related videos in two places: at the end of the video with the grid, and at the bottom of the video while paused. I've figured out a way to remove them at the end and make the ones at the bottom at least tolerable for most businesses.
1. Remove related videos at the end of a video
IFrame Player API: Events
To avoid showing related videos at the end of a video, I just stopped the video so it returned to showing the thumbnail and play button:
var player = new YT.Player('player', {
height: '390',
width: '640',
events: {
'onStateChange': function(event){
switch(event.data){
// Stop the video on ending so recommended videos don't pop up
case 0: // ended
player.stopVideo();
break;
case -1: // unstarted
case 1: // playing
case 2: // paused
case 3: // buffering
case 5: // video cued
default:
break;
}
}
}
});
You could also replace player.stopVideo(); with any other code you want to run.
2. Making related videos at the bottom of a video only show your videos
IFrame Player API: YouTube Embedded Players and Player Parameters
rel=0 no longer avoids showing any related videos; now, it will still show related videos, but at least they'll only be from your channel. This changed sometime around September 25, 2018 (documentation).
By setting playerVars in YT.Player, we can at least have related videos only show our channel's videos. The documentation isn't clear that you have to have playerVars set up as an object, but you can set it up like so:
var player = new YT.Player('player', {
...
playerVars:{
rel: 0
modestbranding: 1, // If you're trying to remove branding I figure this is helpful to mention as well; removes the YouTube logo from the bottom controls of the player
// color: 'white', // Can't have this and modestbranding active simultaneously (just a note in case you run into this)
},
...
});
2A. Potential way to remove related videos from bottom
I may look more into it if I have the time, but here's where an answer may lie:
We can easily access the iframe object but we can't do anything with it: IFrame Player API: Accessing and modifying DOM nodes. It appears that because we'd be editing an iframe from YouTube there are security concerns (regardless of what we'd actually be doing). Ideally I could just remove the "More videos" text with player.getIframe().contentWindow.document.querySelector('.ytp-pause-overlay.ytp-scroll-min').remove(), but when I run player.getIframe().contentWindow.document I get an error SecurityError: Permission denied to access property "document" on cross-origin object.
But playerVars also has an origin value that may let us access the iframe's object anyway:
var player = new YT.Player('player', {
...
playerVars:{
origin: 'https://mywebsite.com'
},
...
});
It's not working with localhost, but that may be a Chromium and Firefox thing. Perhaps this is a legitimate option on a live site; I'll update this post when/if I try that to let you know if I succeed.

The accepted solution was not working for me. What does work is:
1) Putting the iframe in html that includes the rel parameter
<iframe id="youtube-video" width="560" height="315"
src="https://www.youtube.com/embed/M7lc1UVf-VE?enablejsapi=1&rel=0&modestbranding=1"
frameborder="0" enablejsapi="1" allowfullscreen></iframe>
2) Using the javascript API to attach to that existing player
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
var player;
function onYouTubeIframeAPIReady() {
player = new YT.Player('youtube-video', {
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
function onPlayerReady(event) {
console.log("ready");
}
function onPlayerStateChange(event) {
console.log("state changed");
}
demo fiddle: http://jsfiddle.net/bf7zQ/195/

If you're using SWFObject, you simply need to do something like this:
function loadVideo() {
var params = { allowScriptAccess: "always" }
, atts = { id: "myvideo" }
;
//NOTE THE END OF THE BELOW LINE vvvvvv
swfobject.embedSWF("https://www.youtube.com/v/[video id here]?enablejsapi=1&playerapiid=myvideo&version=3&rel=0"
, "videoplaceholderid"
, "768", "432", "8", null, null, params, atts);
}
Just add rel=0 to the end of your url.

No need to code through the API,now its easily can be done by
You tube embed button -> Show more -> tickout the option 'Show suggested videos when the video finishes'

Here is a Quick solution:
setInterval(function(){
if($('iframe').length > 0){
$('iframe').each(function(){
if($(this).hasClass('gotYou')){
//do nothing
}else{
var getMySrc = $(this).attr('src');
var newSrc = getMySrc.split('?');
console.log(newSrc);
var freshURL = newSrc[0]+'?rel=0&'+newSrc[1];
console.log(freshURL);
$(this).addClass('gotYou');
$(this).attr('src', freshURL );
}
});
}
}, 1);
What it does it, it looks for the iframe in your document. If it finds iframe, it grabs the src of the iframe, finds the ? mark and then replaces ? by ?rel=0& . Here the goal is to out rel=0

new YT.Player('playerid', {
height: '550',
width: '840',
videoID: 'video_id',
playerVars: {rel: 0},
});

Flowplayer progrss bar go fullwidth

I am using flowplayer with Javascript plugins for my mp3 file based site. Now everything is working except the progress bar and buffering. The buffer div is only have a width of 451px as my track div as got a custom width (I have given in CSS) of 903px. When I click on the play button the progress div will go full width that is 451px. There is no problem with the playback. When I supply a duration say as 402 or something, then the progress bar and playhead starts moving from the start point as desired. So I think this may be an issue with calculating the duration of the mp3 file. Please let me know how this can be fixed.
My code is like this
<div id="audio" style="display:block;height: 0px;visibility: hidden"></div>
<div id="footer" class="footer"></div>
window.onload = function(){
$f("audio", "swf/flowplayer-3.2.7.swf", {
// don't start automatically
clip: {
autoPlay: false,
autoBuffering: true,
duration:430,
baseUrl: 'http://localhost/gaanaOnline/gaanaonline',
onFinish: function() {
setTimeout('player_next()',100);
}
},
onLoad: function() {
load_clips();
},
// disable default controls
plugins: {
audio: {
url: 'swf/flowplayer.audio-3.2.2.swf'
},
controls: null
}
// install HTML controls inside element whose id is "hulu"
}).controls("footer", {
// CSS class name for the playhead
playHeadClass: 'playhead',
// CSS class name for the track
trackClass: 'track',
// CSS class name for the playhead when in a playing state
playClass: 'play',
// CSS class name for the playhead when in a paused state
pauseClass: 'pause',
// CSS class name for the buffer bar
bufferClass: 'buffer',
// CSS class name for the progress bar
progressClass: 'progress',
// CSS class name for the time display
timeClass: 'time',
// CSS class name for mute button
muteClass: 'mute',
// CSS class name for the unmute button
unmuteClass: 'unmute',
// a default duration for the time display in seconds
duration: 0
});
};
If it is an issue with the duration of mp3 file, please advice me how to calculate it in JS and supply to the player.
EDIT: I have added the screenshot below:

MediaElement.js - getting debug info

I'm creating an audio player with MediaElement.js, like this:
//button has been clicked, create new audio player and play
var audioElement = $('<audio>', {
id : 'audioPlayer' + index,
src : '/streamFriendFile',
loop : 'loop',
preload : 'none'
})[0];
$(row).append(audioElement);
new MediaElement(audioElement, {
plugins : ['flash', 'silverlight'],
pluginPath : 'http://localhost:3000/mediaelement/',
flashName : 'flashmediaelement.swf',
silverlightName : 'silverlightmediaelement.xap',
pluginWidth : 0,
pluginHeight : 0,
audioWidth: 0,
audioHeight : 0,
startVolume: 0.8,
//loop: true,
//enableAutosize: false,
//features : [],
//timerRate : 250,
success : function(mediaElement, domObj) {
console.log('mediaElement success!');
mediaElement.play();
},
error : function(mediaElement) {
console.log('medialement problem is detected: %o', mediaElement);
}
});
The error callback is immediately called, but it only contains the media element as an argument. This does not tell me what is wrong.
How can I get the actual error message so I can debug this issue?
Note that I'm only using the MediaElement core API, thus not the actual player (so I only include mediaelement.js).

In your MediaElement options (along with flashName, silverlightName, etc...) add enablePluginDebug:true and it should show debug errors on the screen. From the API reference in the code example at right.
Other than that I don't believe they have any detailed error handling yet for that error object, from looking at the github repo it seems to be a "to do" feature mentioned at the bottom (most likely a 2.2 feature).
Looks like you might have to figure out your own error handling for the time being.

How to change video (and start playing immediately) in Flowplayer via Javascript?

It should change the video and start playing regardless of whether or not a video is currently loaded and playing.
Thanks.

See example below where api is your flowplayer instance and replaceclip is the one you want to start plating
var api = flashembed("player", {src:'FlowPlayerDark.swf'}, {config: ...}});
var replaceclip = {'url':'myvideo.mp4', 'autoplay':true};
<button onClick="api.playClip(replaceclip)">Play</button>

See my example in Github https://github.com/Teaonly/android-eye/blob/master/assets/droideye.js
var initAudioPlayer = function () {
// install flowplayer into container
// http://flash.flowplayer.org/
$f("player", "flowplayer-3.2.15.swf", {
plugins: {
controls: {
fullscreen: false,
height: 30,
autoHide: false,
play: false,
}
},
clip: {
autoPlay: false,
url: "stream/live.mp3",
}
});
audioPlayer = $f();
};
var newClip = {'url':'stream/live.mp3?id='+audioCount,'autoplay':true};
audioCount ++;
audioPlayer.play(newClip);

$f().play([{url:'yourmovie.flv'}]);
In this way you can change the video dynamically in Ajax.

You can check out the javascript api for the flowplayer here
Specifically, you'll probably want to check out the flowplayer objects 'Clip' and 'Player'