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

How to Dynamically add captions do the player?


I have a list of videos on my website and I have a list of captions in a database, in this case a video can have no caption or can have 1 or more captions. I would like to know if there is a way to add captions dynamically using a javascript function?

here is a sample of my code:

<script>
function playTrailer(key,caption) {
jwplayer().load([{
file: "http://www.youtube.com/watch?v=" + key,
tracks: [{
file: caption,
label: "English",
kind: "captions",
"default": true
}]
}]);
jwplayer().play();
}
</script>

<a href="javascript:playTrailer('rKJamuzagI8','http://www.mysite.com/s1a1e1l1.srt')">Test</a>

I would like to send an array of subtitles to the function and add them dynamically to the player.

Thank you.

9 Community Answers

Ethan Feldman

JW Player Support Agent  
0 rated :

Check out this demo (set the current captions track)

http://developer.longtailvideo.com/player/tags/mediaplayer-6.0/test/api-captions.html

http://support.jwplayer.com/customer/portal/articles/1413089-javascript-api-reference

filiperangel

User  
0 rated :

Thank you Ethan, that is almost what i would like to do but still couldn't do that. What I want is something like that.

function loadPlayer(key,captions) {
var options = {
playlist: [{
title: 'Big Buck Bunny',
description: 'One captions track',
file: 'http://content.bitsontherun.com/videos/bkaovAYt-injeKYZS.mp4',
image: 'http://content.bitsontherun.com/thumbs/bkaovAYt-720.jpg',
captions: [
{file: 'assets/captions/bunny-eng.txt', label: 'English'}
]
},{
title: 'Bits on the Run',
description: 'No captions tracks',
file: 'http://content.bitsontherun.com/videos/yYul4DRz-327.mp4',
image: 'http://content.bitsontherun.com/thumbs/yYul4DRz-320.jpg',
captions: []
},{
title: 'Sintel',
description: 'Nine captions track',
file: 'http://content.bitsontherun.com/videos/3XnJSIm4-injeKYZS.mp4',
image: 'http://content.bitsontherun.com/thumbs/3XnJSIm4-720.jpg',
captions: [

/***** Here comes the magic :) ******/

for (var i=0; i<captions.length; i++) {
{file: captions[i], label: 'Chinese'},
}
]
}],
height: 300,
listbar: {
position: 'right',
size: 260
},
primary: primaryCookie,
width: 720
};
jwplayer("player").setup(options);
}

I would really appreciate if somebody could help me, and also I don't want to use a playlist. Thank you.

Ethan Feldman

JW Player Support Agent  
0 rated :

Do you have an example pf where you are trying to do this?

filiperangel

User  
0 rated :

Here is the test page i've been working on: http://filiperangel-001-site1.smarterasp.net/site/Playerjw.aspx

But I don't have an example of what I want because I get an error in the javascript function while compiling my code, so it is pointless uploading my code once I don't know how to do it. Sorry.

Ethan Feldman

JW Player Support Agent  
0 rated :

I want to see where it is broken though so I can debug the error.

filiperangel

User  
0 rated :

Here we go. That is an example of what I would like to do, I know that it is not right, that is why I am asking your help.

http://filiperangel-001-site1.smarterasp.net/site/Playerjw.aspx

Thank you.

Ethan Feldman

JW Player Support Agent  
0 rated :

Try to use this:

<a href=“javascript:playTrailer(‘rKJamuzagI8’,”http://www.tubefree.ga/admin/Subs/s1a1e1l1.srt", “http://www.tubefree.ga/admin/Subs/s1a1e1l2.srt”, “http://www.tubefree.ga/admin/Subs/s1a1e1l2.srt”)">Teste</a>

filiperangel

User  
0 rated :

That will not work in my case because I don't know how many parameter I will pass to the function, that is why I am trying to create an array so I can pass as many captions as I want.

Ethan Feldman

JW Player Support Agent  
0 rated :

Another idea would be to simply replace the player with another setup() entirely.

This question has received the maximum number of answers.