We Keep Coding

jPlayer playing two media files

I am attempting to piece together a jPlayer example that plays two audio files, one right after another.
I need to have full event control, so i decided not to use the playlist option, unless somebody can give me an example of having a way of controlling when the events fire, something like:
first media 'before' function
first media 'after' function
second media 'before' function
second media 'after' function
My example below is using a global variable in the "ended:" function and seems pretty clumsy.
Does anybody have a better suggestion how i might accomplish this? here is my working example of using the global variable:
$(document).ready(function(){
$("#jquery_jplayer_1").jPlayer({
ready: function (event) {
console.log('ready function.');
},
ended: function() {
console.log('ending function starting.');
var player = $("#jquery_jplayer_1");
player.jPlayer("stop");
player.jPlayer("clearMedia");
player.jPlayer("setMedia", {
wav: globalParmTwo
});
player.jPlayer("play", 0);
globalParmTwo = null;
},
loop: false, // added to remove the if condition
supplied: "wav, oga",
wmode: "window",
useStateClassSkin: true,
autoBlur: false,
smoothPlayBar: true,
keyEnabled: true,
remainingDuration: true,
toggleDuration: true
});
});
var globalParmTwo = null;
function komPare(parmOne, parmTwo) {
globalParmTwo = parmTwo;
var player = $("#jquery_jplayer_1");
player.jPlayer("stop");
player.jPlayer("clearMedia");
player.jPlayer("setMedia", {
wav: parmOne
});
player.jPlayer("play", 0);
}
And here my working example using the playlist, which seems like a better solution, assuming there is some way to fire specific functions at specific times:
var myPlaylist = null;
$(document).ready(function(){
myPlaylist = new jPlayerPlaylist({
jPlayer: "#jquery_jplayer_N",
cssSelectorAncestor: "#jp_container_N"
}, []
, {
playlistOptions: {
enableRemoveControls: true
},
supplied: "wav, ogv",
useStateClassSkin: true,
autoBlur: false,
smoothPlayBar: true,
keyEnabled: true,
audioFullScreen: false
});
$('.jp-playlist').hide();
myPlaylist.option("autoPlay", true);
});
function komPare(firstMediaUrl, secondMediaUrl) {
myPlaylist.setPlaylist([
{ wav: firstMediaUrl },
{ wav: secondMediaUrl }
]);
};
any suggestions are very appreciated.
UPDATE: i removed an if-condition and put in "loop: false," instead in the first example.

We can bind events to the playlist player, and then use a global media counter. This still uses global variables, but the code is cleaner.
as always, any suggestions are most appreciated.
var myPlaylist = null;
var mediaCounter = null;
$(document).ready(function(){
myPlaylist = new jPlayerPlaylist({
jPlayer: "#jquery_jplayer_1"
}, [] // empty initial playlist
, {
playlistOptions: {
enableRemoveControls: true
},
supplied: "ogv",
useStateClassSkin: true,
autoBlur: false,
smoothPlayBar: true,
keyEnabled: true,
audioFullScreen: false
});
$('#jquery_jplayer_1').bind($.jPlayer.event.ready,
function(event) {
console.log('ready.');
}
);
$('#jquery_jplayer_1').bind($.jPlayer.event.loadeddata,
function(event) {
console.log('loadeddata ' + mediaCounter++ );
}
);
$('#jquery_jplayer_1').hide();
$('.jp-playlist').hide();
$('.jp-controls').hide();
myPlaylist.option("autoPlay", true);
});
function komPare() {
var playlist = [];
for ( urlName of arguments ) {
playlist.push( { ogv: urlName } );
};
mediaCounter = 0;
myPlaylist.setPlaylist(playlist);
};

How to set flowplayer fullscreen option to false (not iframe)

Could you help me and answer how to set fullscreen in flowplayer to FALSE.
The code i use is:
$(document).ready(function () {
$("#player").flowplayer({
playlist: [
[{ webm: "http://.../file.webm "},
{ mp4: "http://.../file.mp4 "}]
]
});
});
And where and how i should write the option (fullscreen:false)?

You can disable fullscreen mode for all players on a page by overwriting the default settings of the global flowplayer object. For your example, it would look like this:
$(document).ready(function () {
//overwrites fullscreen: true in flowplayer.defaults
flowplayer.config = { fullscreen: false; }
$("#player").flowplayer({
playlist: [
[
{ webm: "http://.../file.webm"},
{ mp4 : "http://.../file.mp4 "}
]
]
});
});
I'm not sure if there's an easy way to change settings for individual players.
// edit: there actually is, as documented here: https://flowplayer.org/docs/setup.html#selective-configuration

Thank you for your answer, Phil !! But your variant unfortunately doesn't work in my script((
The following script works:
<script>$(document).ready(function () {
$("#player").flowplayer({
playlist: [
[{ webm: "http://.../file.webm "},
{ mp4: "http://.../file.mp4 "}]
],
fullscreen: false,
tooltip: false
});
});</script>

JWPlayer and IE11 -- Could not add internal listener

The player works fine on all other browsers, but isn't working in IE11. I'm getting the error message "Could not add internal listener" 8 times (one time for each playlist item, I assume).
The script gets to the onReady event, but never gets to onPlay. I'm running version 6.8. I have confirmed that the playList is being generated as it should, and as I mentioned, it works in all browsers except for IE11.
//get our playlist
var playListItems = [];
$(courseXML).find("audiofile").each(function() {
var newItem = {
file: "assets/audio/"+ $(this).text(),
type: "mp3"
};
playListItems.push(newItem);
});
//redoing this as a playlist
jwplayer("mediaplayer").setup({
flashplayer: "js/jwplayer.flash.swf",
html5player: "js/jwplayer.html5.js",
controls: false,
width: 1,
height: 1,
autostart: false,
playlist: playListItems,
allowscriptaccess: 'always',
events: {
onComplete: function() {
alert("I'm completed");
},
onReady: function() {
alert("I'm ready");
},
onPlay: function() {
alert("I'm playing!");
}
}
});

Completely failing to grasp SoundManager's scope (with examples)

Apologies for no Fiddle; just trying to understand SoundManager 2's basics and failing miserably.
Why doesn't this work:
<script>
soundManager.setup({
url: 'swf/',
preferFlash: false,
onready: function() {
// Ready to use; soundManager.createSound() etc. can now be called.
}
});
</script>
<script>
$(document).ready(function() {
soundManager.createSound({
id: 'mySound',
url: 'audio/sound.mp3',
autoLoad: true,
autoPlay: true,
volume: 50
});
mySound.play();
});
</script>
But this does:
<script>
soundManager.setup({
url: 'swf/',
preferFlash: false,
onready: function() {
soundManager.createSound({
id: 'mySound',
url: 'audio/mySound.mp3',
autoLoad: true,
autoPlay: true,
volume: 50
});
mySound.play();
}
});
</script>
I don't get it... at all. Does every sound have to be loaded into onready()? And if so, how is that remotely useful for 90% of use cases? I have to be missing something. The examples they provide make it seem as easy putting this anywhere in my code:
soundManager.createSound({
id: 'mySound2',
url: 'audio/mySound2.mp3'
});
soundManager.play('mySound2');
Yet it doesn't work. Why?

From the comments
The API properbly need to do some thing on intialize and before it is ready to run. If you call createSound before the API have finished loading there will be a error. Instead of using $(func..) as you starting point, you could try using the onready, and call the $(functio.. from inthere
I have made a non-working fiddle of what i mean: http://jsfiddle.net/YdC8j -- I have not working with soundmanager I am just guessing

flowplayer: coverImage as data attribute

I'm calling flowplayer like this:
flowplayer("a.rmPlayer", "libs/flowplayer/flowplayer.swf", {
plugins: {
audio: {
url: 'libs/flowplayer/flowplayer.audio.swf'
},
controls: {
volume: true
}
}
});
I'd now like to have different covers for each mp3 file being called. flowplayer provides the coverimage variable (see http://flash.flowplayer.org/plugins/streaming/audio.html), however can I somehow have the images in a data attribute?

I've ended up using the following code, which seems to work flawlessly.
The link:
<a data-toggle="modal" class="rmPlayer" data-fpurl="http://releases.flowplayer.org/data/fake_empire.mp3" data-fpimg="http://releases.flowplayer.org/data/national.jpg">click me</a>
And the corresponding javascript (with '#rmPlayerInterface' being the modal window)
<script type="text/javascript">
$(document).ready(function() {
player = flowplayer("player", "/libs/flowplayer/flowplayer.swf", {
plugins: {audio: {url: '/libs/flowplayer/flowplayer.audio.swf'},controls: {url: '/libs/flowplayer/flowplayer.controls.swf'}},
clip: {autoplay: false, autoBuffering: true}
});
$(document).on("click", ".rmPlayer", function () {
$('#rmPlayerInterface').data('playeroptions', $(this).data());//.music = music;
$('#rmPlayerInterface').modal('show');//:music});//('music', $(this).data('music'));
});
$('#rmPlayerInterface').on('show', function () {
var poptions = $('#rmPlayerInterface').data('playeroptions');
var c = {url: poptions["fpurl"],coverImage: {url: poptions["fpimg"],scaling: 'orig'}};
player.play(c);
});
$('#rmPlayerInterface').on('hide', function () {
player.pause();
});
});
</script>