Name is required.
Email address is required.
Invalid email address
Answer is required.
Exceeding max length of 5KB

Title to appear under player!

Hello to the Forum!
First of all let me say that I have been looking through the Forum for the last few days trying to find a workable script to do the following. Either they dont work or I am doing something wrong, most likely the latter!
I have a page as follows:

http://www.skysignals.net/index.php?sky=mar2014

As you can see I have some code that when someone clicks on a Yes under audio in the log it loads the corresponding media file into the player. This all works great for me.
What I would like to do is when the Yes is clicked and the file is loaded that the title of the file appears underneath the player in for example:

bc.. <div id=fileTitle></div>.


I am using the latest player and would be most grateful for someone with far better knowleged to write the little amount of code that I need but please in layman terms as I am not that great with JavaScript.
I dont want to use a playlist bar on the page but would like visitors to know that they are listening to the file that they want to.
I would be most grateful for any help as I have said already that I just cant get anything else to work.
Most Kindest Regards,
Andrew.

28 Community Answers

Up Down

Ethan Feldman

JW Player Support Agent  
0 rated :

Have you tried to put the title in the player itself, as it will just show up in the play button?

Up Down

JW Player

User  
0 rated :

Hi @Andrew

1) Include your target DIV on the page somewhere:

bc.. <div id=fileTitle></div>



2) Replace your *jwplayer.setup(...)* and *function loadAudio(myFile){...}* javascript with this:

bc.. $(document).ready(function(){

var oPlaylist = [];

$('td a[href]').each(function(iA, oA){
var $a = $(oA);
var $tr = $a.parents('tr');
var oTD = $tr.children('td')[4];

var oPLI={};
oPLI["title"] = $(oTD).text();
oPLI["file"] = $a.attr('href');

if(oPLI["file"].indexOf("loadAudio('") >-1){
oPLI["file"] = oPLI["file"].substring(oPLI["file"].indexOf("loadAudio('")+11);
oPLI["file"] = oPLI["file"].substring(0,oPLI["file"].lastIndexOf("')"));
}

oPlaylist.push(oPLI);

$a.click(function(e){
if(jwplayer("myElement") && jwplayer("myElement")["container"]){
jwplayer("myElement").playlistItem(iA);
e.preventDefault();
}
});

});

jwplayer("myElement").setup({
"playlist": oPlaylist,
"width": 1000,
"skin": "/jwplayer/five.xml",
"controls": "false",
"height": 30
});

jwplayer("myElement").onPlay(function(){
$("#fileTitle").text(this.getPlaylistItem()["title"]);
});

});



3) Change your "Yes" links to link directly to the mp3 files. So change this:

bc.. <a href="javascript:loadAudio('/audio/201404/20140403_214356_13760_AM_V._of_Korea.mp3')">Yes</a>



to this:

bc.. <a href="/audio/201404/20140403_214356_13760_AM_V._of_Korea.mp3">Yes</a>



That should do it.

Up Down

JW Player

User  
0 rated :

Forgot to mention... this should mean you only need to manage your table rows going forward (no further JavaScript modifications) + you'll get the same behaviour whether you click "Yes" from the table or use the built in JW playlist "next" and "previous" buttons.

Up Down

JW Player

User  
0 rated :

Hi Ethan,

Have not tried that! How would that be done?


Hi James,
It didn't work! I have left the code in that you said on:

http://www.skysignals.net/index.php?sky=apr2014

My original is still the same on:
http://www.skysignals.net/index.php?sky=mar2014

Thank you to both for coming back so quickly! I await you further advice.

Regards,
Andrew.

Up Down

JW Player

User  
0 rated :

Sorry James,

Forgot info!
The player does not load and if you try the yes link it just downloads the file and plays it with my native browser player!

Up Down

JW Player

User  
0 rated :

Strange... I wonder whether the error relating to "slideShow(4000);" - slideShow is not defined - is causing subsequent $(document).ready(...) events to not be honoured.

Can you try commenting out the "slideShow(4000);" line in "jquery_scripts.js"?

Up Down

JW Player

User  
0 rated :

Yep - that was it!

Up Down

JW Player

User  
0 rated :

You were right James, It now works but leaves me with the problem that my slide show don't work on my home page any more. The slide show is in the javascript file because it caused problems when it was on the home page.

Might have to drop it or find another slide show.

Regards,

Andrew.

Up Down

JW Player

User  
0 rated :

Andrew

Ideally you would only call the "slideShow" function if the supporting function/assets actually existed on a page.

If you need to include it not knowing one way or another, you can test for it's existence first in order to not raise an error:

bc.. if(slideShow && (typeof slideShow==="function")) slideShow(4000);

Up Down

JW Player

User  
0 rated :

I see you've now put my code in the "jquery_scripts.js" file - which is good - but it needs to be inside the "$(document).ready(function() {" closure...

Also include the code in my previous post.

Up Down

JW Player

User  
0 rated :

Nearly...! ;o)

Up Down

JW Player

User  
0 rated :

Now the code is being used on other pages where "jwplayer" has not been loaded you need to wrap my code in a conditional check to ensure "jwplayer" exists:

bc.. if(jwplayer){
... my original code...
}

Up Down

JW Player

User  
0 rated :

Okay,

The player works great so thank you very much for big help James!

I have put the slide show bit to the end of the script file but no joy!
Any ideas?

Andrew.

Up Down

JW Player

User  
0 rated :

Change:

bc.. if(slideShow && (typeof slideShow==="function")) slideShow(4000);



to

bc.. if(top.slideShow && (typeof slideShow==="function")) slideShow(4000);

Up Down

JW Player

User  
0 rated :

still no go!!!
I'm in you hands with this one!! :-)

Up Down

JW Player

User  
0 rated :

...and wrap my original code in the "jwplayer" check as detailed above...

Up Down

JW Player

User  
0 rated :

sorry, make it:

bc.. if(top.jwplayer){
... my original code...
}

Up Down

JW Player

User  
0 rated :

BINGO!
Thank you so very much James for your time! I'm glad you were there to help!

Andrew

Up Down

JW Player

User  
0 rated :

No probs - glad we got there in the end!

Up Down

Ethan Feldman

JW Player Support Agent  
0 rated :

Nice, glad you got it! :)

Up Down

JW Player

User  
0 rated :

Hi James!

Sorry one final question? What would I add to the code if I wanted to print the Date as well as the Station Name?
Should have asked you earlier, sorry!

Regards,

Andrew.

Up Down

JW Player

User  
0 rated :

Hi Andrew

So if you replace the "player script" part of your code with the following:

bc.. // player script

if(top.jwplayer){
var aPlaylist = [];
var oRowData = {};

/* Loop through a collection of all links (A) in the table cells (TD) */
$('td a[href]').each(function(iA, oA){
var $a = $(oA);

/* Get the table row (TR) this link (A) appears in */
var $tr = $a.parents('tr');

/* Get a collection of the table cells (TD)
var $td = $tr.children('td');

/* Load the table cell data into variables */
oRowData["date"] = $($td[0]).text();
oRowData["start"] = $($td[1]).text();
oRowData["end"] = $($td[2]).text();
oRowData["freq"] = $($td[3]).text();
oRowData["station"] = $($td[4]).text();
oRowData["lang"] = $($td[5]).text();
oRowData["txsite"] = $($td[6]).text();
oRowData["country"] = $($td[7]).text();
oRowData["latlong"] = $($td[8]).text();
oRowData["bear"] = $($td[9]).text();
oRowData["dist"] = $($td[10]).text();
oRowData["sinpo"] = $($td[11]).text();
oRowData["audio"] = $($td[12]).text();
oRowData["report"] = $($td[13]).text();
oRowData["qsl"] = $($td[14]).text();


/* MODIFY TITLE HERE */
var sTitle = oRowData["date"] + " - " + oRowData["station"];
/* MODIFY TITLE HERE */


/* Build the JW Playlist */
var oPLI={};
oPLI["title"] = sTitle;
oPLI["file"] = $a.attr('href');
aPlaylist.push(oPLI);

/* Modify the link action to move to the correct playlist item */
$a.click(function(e){
if(jwplayer("myElement") && jwplayer("myElement")["container"]){
jwplayer("myElement").playlistItem(iA);
e.preventDefault();
}
});
});

/* Render the JW Player instance with the dynamically built playlist */
jwplayer("myElement").setup({
"playlist": aPlaylist,
"width": 1000,
"skin": "/jwplayer/five.xml",
"controls": "false",
"height": 30
});

/* Add a JW event to extract the Playlist title and display in a custom DIV */
jwplayer("myElement").onPlay(function(){
$("#fileTitle").text(this.getPlaylistItem()["title"]);
});
}



You will see a part where I've included */* MODIFY TITLE HERE */*.

Within this section you can modify the Title string by adding any of the variables assigned to the "oRowData" object using the notation indicated.

I'm guessing the next question will be how to present the date in a user friendly format...!

Up Down

JW Player

User  
0 rated :

Dear James,

I found a little error but sorted it myself and "IT ALL WORKS A TREAT"! :-)

/* Get a collection of the table cells (TD)
var $td = $tr.children('td');

the"*/" was missing but I was happy to found the problem!!!

With regard to the date format, this is fine. I use the international format because there are so many other ways of doing it but anyone visiting the site should hopefully know this format!

I am so grateful and amazed at what you have done for me and my site. I guess that you work with code everyday so if you have a website then please let me have the link and I will gladly put it on my links page by way of a big thank you.

Thank you again!

Most Kindest Regards,

Andrew.

Up Down

JW Player

User  
0 rated :

Andrew

Great - I'm glad it works for you (apologies for the error - I wasn't able to test so was writing the code "blind")!

I have a blog site which is generally orientated towards JW Player and Accessibility.

It would be cool if you were to include a link to that: http://powered-by-haiku.co.uk/

Cheers
James

Up Down

JW Player

User  
0 rated :

Done James!

http://www.skysignals.net/index.php?sky=links

Thanks again!

Up Down

JW Player

User  
0 rated :

Hi James!

A problem has occurred! Can you email (use my contact form) direct instead of keep posting here? If not then just post here! Promise I won't take up too much more of your time!!!

I want to add links to the "Report" and "QSL" fields. When I do and click on one, the link works but also plays the next audio track in the table at the same time, plus all the other audio tracks then do not match the order of the table. Is there a way just to get the Loop part in your script to ignore any links in the "Report" and "QSL" fields.

Sorry but I just seem to be digging myself a big hole here!!!

Regards,
Andrew.

Up Down

JW Player

User  
0 rated :

Submitted a resolution via your contact form.

Up Down

Ethan Feldman

JW Player Support Agent  
0 rated :

Glad you made progress with this Andrew.

This question has received the maximum number of answers.