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

mp4 subtitles

We are getting ready to switch over to mp4 files for our video player. To that end, I've learned how to use MP4Box and ttxt files to embed subtitles in the files. The subtitles display fine on iTunes, QuickTime, and iPads; I've not yet tested on iPhones of aTVs.

Unless I've read something wrong the JW Player should be able to read and display these embedded subtitles. My web team has informed me that it is not.

Test file: http://dl.dropbox.com/u/3840885/everify_test.mp4
TTXT file: http://dl.dropbox.com/u/3840885/everify2.ttxt

The command for mp4box I'm using is:
bc.. mp4box -add 'videoFile.mp4' -add 'ttxtFile.ttxt:hdlr=sbtl:lang=en:group=2:layer=1' -new 'newFile.mp4'



Finally, the code the web team is using to call the JW Player is:
bc.. <h2>everify_subs_041112.mp4</h2>
<div id="test1">Loading the player…</div>
<script type="text/javascript" src="/js/jwplayer/jwplayer.js"></script>
<script type="text/javascript">
jwplayer("test1").setup({
flashplayer: "/js/jwplayer/player.swf",
file: "http://www.ice.gov/doclib/video/gallery/everify_subs_041112.mp4",
skin: "/js/jwplayer/slim.zip",
autostart: false,
width: 310,
height: 250
});
</script>
<div style="clear:both"></div>




Any help would be greatly appreciated. Thanks!

54 Community Answers

Up Down

Ethan Feldman

JW Player Support Agent  
0 rated :

Yes, by using this plugin:

http://www.longtailvideo.com/addons/plugins/84/Captions

Up Down

JW Player

User  
0 rated :

Our web team is using the Caption plugin; sorry, I neglected to mention that.

They were successfully using it to call SRT files while playing Flash videos. With the switch to MP4 video, it is not displaying the embedded subtitles. The documentation simply says that the Caption plugin will automatically detect the embedded subtitles. Is there a "switch" that needs to be flipped in order for this to happen?

Thanks.

Up Down

Ethan Feldman

JW Player Support Agent  
0 rated :

Np. Do you have a link ? It should work…

Up Down

JW Player

User  
0 rated :

http://www.ice.gov/sandbox/amy/buffer/mp4.htm

They provided me with the code snippet above, so I'd imagine that's what they are using to call the player.

Up Down

Ethan Feldman

JW Player Support Agent  
0 rated :

This isn’t using the captions plugin.

Up Down

JW Player

User  
0 rated :

Well, that would explain things wouldn't it?

Up Down

Ethan Feldman

JW Player Support Agent  
0 rated :

Yep :)

Up Down

JW Player

User  
0 rated :

I pointed that out to the web team. Presto, it works. Sorry for bothering you.

Up Down

Ethan Feldman

JW Player Support Agent  
0 rated :

Np!

Up Down

JW Player

User  
0 rated :

Ethan:

I'd like to know how I can use the embed code on the following page can be modified to include subtitles.

http://www.longtailvideo.com/support/jw-player/jw-player-for-flash-v5/12538/supported-player-embed-methods

<embed
flashvars="file=/data/bbb.mp4&autostart=true"
allowfullscreen="true"
allowscriptaccess="always"
id="player1"
name="player1"
src="player.swf"
width="480"
height="270"
/>

I am embedding the videos into a Learning Management System - Moodle. How can I get the subtitles added using this code? I would much rather use this code than using the iframe html tag.



Thank you.

Up Down

Ethan Feldman

JW Player Support Agent  
0 rated :

flashvars=“file=/data/bbb.mp4&autostart=true”

Would be:

flashvars=“file=/data/bbb.mp4&autostart=true&plugins=captions&captions.file=something.srt”

For example…

Up Down

JW Player

User  
0 rated :

Ethan:

Thank you. I figured it was something simple. Unfortunately, it appears that I have uncovered one more issue. Here is my code:

<p>
<embed flashvars="file=http://ourserver.abc.net/videos/sandbox/Employment_Laws.mp4&autostart=true&mute=false&plugins=captions&captions.file=http://ourserver.abc.net/videos/sandbox/Employment_Laws.srt"
allowfullscreen="true"
allowscriptaccess="always"
id="player1"
name="player1"
src="http://ourserver.abc.net/videos/jwplayer/player.swf"
height="480"
width="640" /></p>

I accessed the videos using an iPhone and my iPad, and the video will simply not play. Talk about frustrating.

Up Down

Ethan Feldman

JW Player Support Agent  
0 rated :

Of course they wont, this is just <embed> code, it is a Flash only type of embedding.

You need to use jwplayer.js for html5 support.

More info – http://www.longtailvideo.com/support/blog/15827/using-the-jw-embedder-to-embed-your-player

Up Down

JW Player

User  
0 rated :

Ethan:

Thank you. Unfortunately, I am can't include any kind of script in the pages I need to embed the code.

Thanks again.

Up Down

Ethan Feldman

JW Player Support Agent  
0 rated :

Np

Up Down

Andrew

JW Player Support Agent  
0 rated :

Hi,

can any one send me the entire code to play a .flv, .swf formats in webview using jwplayer pulgin..
please send the code to the below mail id
andrew.paragonandro@gmail.com

Thanks..

Up Down

Ethan Feldman

JW Player Support Agent  
0 rated :

We don’t have code for a webview and swf isn’t a supported format.

Up Down

JW Player

User  
0 rated :

Hi Ethan,

Thank you for the embed code. But somehow my caption still doesn't work, although the CC button looks activated:

http://mkhere.blogspot.tw/2012/12/angler-fish.html

My code:
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0" height="400" width="550"><param name="movie" value="http://sites.google.com/site/mkhere73/music/JWplayer4-5.swf"><param name="allowFullScreen" value="true"><param name="allowscriptaccess" value="always"><embed src="http://sites.google.com/site/mkhere73/music/JWplayer4-5.swf" type="application/x-shockwave-flash" height="400" width="550" allowscriptaccess="always" allowfullscreen="true" flashvars="file=http://content.bitsontherun.com/videos/3XnJSIm4-kNspJqnJ.mp4&backcolor=cdc673&frontcolor=ffffff&lightcolor=453500&volume=80&plugins=captions&captions.file=http://developer.longtailvideo.com/trac/export/880/plugins/captions/v5/test/files/corrie.srt"></embed></object>

Up Down

Ethan Feldman

JW Player Support Agent  
0 rated :

You should put the SRT files on your own server.

Crossdomain issue:

Error #2044: Unhandled securityError:. text=Error #2048: Security sandbox violation: http://plugins.longtailvideo.com/captions.swf cannot load data from http://developer.longtailvideo.com/trac/export/880/plugins/captions/v5/test/files/corrie.srt.
	at com.jeroenwijering.plugins::Captions()

Up Down

JW Player

User  
0 rated :

Thank you, Ethan. It worked after I put the caption file and JWplayer4-5.swf in the same domain. Then I replaced the video file url with a Youtube link, but "Error #2035" showed up (URL Not Found):

http://mkhere.blogspot.tw/2012/12/angler-fish.html

How do I solve the problem?

Another thing: I cannot use object/embed with JW6, right? Is it possible use JW6 in a Blogger post?

Up Down

Ethan Feldman

JW Player Support Agent  
0 rated :

For JW6 it has to be done via jwplayer.js

4.5 requires a file called yt.swf as well, I would recommend using 5.10, instead.

Up Down

JW Player

User  
0 rated :

Thank you. Now I know how to insert javascript in a Blogger post, and both HD and caption switches work!

Up Down

JW Player

User  
0 rated :

But I found that the caption sometimes went seriously out of sync if part of the video is skipped (by dragging the slider). Does anyone else have the same problem?

Up Down

Ethan Feldman

JW Player Support Agent  
0 rated :

Np!

Regarding that issue, do you have an example?

Up Down

JW Player

User  
0 rated :

Thank you for you help. I used the same link: http://mkhere.blogspot.tw/2012/12/angler-fish.html
(But the caption is in Chinese... If you want to be able to recognize some characters, at 00:01:02.5 there is a double X in the caption "???????XX??????")

The caption stays in sync as along as I drag the slider after the whole youtube video is loaded. If I drag the slider before loading completes, the time shown on the control bar can be messed up, which means the controller time doesn't match the video's real time. So actually it's the player's clock which went out of sync, not just the caption.

Up Down

Ethan Feldman

JW Player Support Agent  
0 rated :

I would not recommend doing that as the player needs to connect to the YouTube API first…

Up Down

JW Player

User  
0 rated :

Thanks for clarifying that. Looks like the player clears all the data once the video plays to the end, and then it needs to connect to the YouTube API again when the video is restarted. But usually viewers want to review the video from somewhere they think interests them most, not from the beginning of the video, and it's the time when people discover the caption out of sync. Is it possible for the JW player to store the data temporally until the browser page is closed, just like the YouTube player?

Up Down

Ethan Feldman

JW Player Support Agent  
0 rated :

It is not.

Up Down

JW Player

User  
0 rated :

Or can I set a stop time right before the end, so the slider won't go all the way to the end, and therefore the data can be kept...

Up Down

Ethan Feldman

JW Player Support Agent  
0 rated :

You could do that by using the our API:

events:{
				onTime: function(object) {
				if(object.position > object.duration - 1) {this.pause();}
				}
			}

Up Down

JW Player

User  
0 rated :

Thanks, but sorry it still doesn't seem to pause... Did I not put the code in a proper line?

Up Down

Ethan Feldman

JW Player Support Agent  
0 rated :

You need to embed using our JavaScript embedder, jwplayer.js, for the events to work.

Up Down

JW Player

User  
0 rated :

<script type='text/javascript' src='https://dl.dropbox.com/u/5173388/mkhere/jwplayer/jwplayer.js'></script><div id='mediaplayer'>
</div>
<script type="text/javascript"> jwplayer('mediaplayer').setup({ 'flashplayer': 'https://dl.dropbox.com/u/5173388/mkhere/jwplayer/player.swf', 'id': 'playerID', 'width': '580', 'height': '450', 'file': 'Z-BbpaNXbxg', 'provider': 'youtube', events:{onTime: function(object) {if(object.position > object.duration - 1) {this.pause();}}}, 'plugins': {'captions-2': { file: 'https://dl.dropbox.com/u/5173388/mkhere/subtitles/fish.srt' },'hd-2': {} } });</script>

Here is my script. I thought I was already using jwplayer.js, wasn't I? I also have script src jwplayer.js ready in the header. Or I am using a wrong version?

Up Down

Ethan Feldman

JW Player Support Agent  
0 rated :

Use this code then:

<script type='text/javascript' src='https://dl.dropbox.com/u/5173388/mkhere/jwplayer/jwplayer.js'></script><div id='mediaplayer'> </div> <script type="text/javascript"> jwplayer('mediaplayer').setup({ 'flashplayer': 'https://dl.dropbox.com/u/5173388/mkhere/jwplayer/player.swf', 'id': 'playerID', 'width': '580', 'height': '450', 'file': 'Z-BbpaNXbxg', 'provider': 'youtube', events:{onTime: function(object) {if(object.position > object.duration - 1) {this.pause();}}}, 'plugins': {'captions-2': { file: 'https://dl.dropbox.com/u/5173388/mkhere/subtitles/fish.srt' },'hd-2': {} },events:{ onTime: function(object) { if(object.position > object.duration - 1) {this.pause();} } } });</script>

Up Down

JW Player

User  
0 rated :

Sorry it still doesn't work:
http://mkhere.blogspot.tw/2012/12/angler-fish.html
Maybe it's Blogger which conflicts with the code...

Up Down

Ethan Feldman

JW Player Support Agent  
0 rated :

It might be. I have used this code on a html page and it works fine.

Up Down

JW Player

User  
0 rated :

I tried some online code tester (like this one: http://www.csgnetwork.com/htmlcodetest.html ), but the "pause" thing still doesn't work. The script I pasted on the tester is:

<html>
<head>
<title></title>
<script src='https://dl.dropbox.com/u/5173388/mkhere/jwplayer/jwplayer.js' type='text/javascript'></script>
</head>
<body>
<!-- Put the body of your page below this line -->
test
<script type='text/javascript' src='https://dl.dropbox.com/u/5173388/mkhere/jwplayer/jwplayer.js'></script><div id='mediaplayer'>
</div>
<script type="text/javascript"> jwplayer('mediaplayer').setup({ 'flashplayer': 'https://dl.dropbox.com/u/5173388/mkhere/jwplayer/player.swf', 'id': 'playerID', 'width': '580', 'height': '450', 'file': 'Z-BbpaNXbxg', 'provider': 'youtube', events:{onTime: function(object) {if(object.position > object.duration - 1) {this.pause();}}}, 'plugins': {'captions-2': { file: 'https://dl.dropbox.com/u/5173388/mkhere/subtitles/fish.srt' },'hd-2': {} },events:{
onTime: function(object) {
if(object.position > object.duration - 1) {this.pause();}
}
} });</script>
<!-- Put the body of your page above this line -->
</body>
</html>

Up Down

Ethan Feldman

JW Player Support Agent  
0 rated :

I used this sample, it works:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <script type="text/javascript" src="http://player.longtailvideo.com/jwplayer.js"></script>
		<title>Multiple 3</title>
    </head>
	<body>
			<div id="container"></div>
			<script type="text/javascript">
			jwplayer("container").setup({
			file: "http://www.longtailvideo.com/jw/upload/bunny.mp4",
			image: "http://www.longtailvideo.com/jw/upload/bunny.jpg",
			flashplayer: "http://player.longtailvideo.com/player.swf",
			height: 200,
			width: 300,
			controlbar: "bottom",
			stretching: "exactfit",
			events:{
				onPlay: function() {
				jwplayer('container2').stop();jwplayer('container3').stop();jwplayer('container2').pause();jwplayer('container3').pause();
				},
				onTime: function(object) {
				if(object.position > object.duration - 1) {this.pause();}
				}
			}
			});
			</script>
			<br />
			<div id="container2"></div>
			<script type="text/javascript">
			jwplayer("container2").setup({
			file: "http://www.longtailvideo.com/jw/upload/bunny.flv",
			image: "http://www.longtailvideo.com/jw/upload/bunny.jpg",
			flashplayer: "http://player.longtailvideo.com/player.swf",
			height: 200,
			width: 300,
			controlbar: "bottom",
			stretching: "exactfit",
			events:{
				onPlay: function() {
				jwplayer('container').stop();jwplayer('container3').stop();jwplayer('container').pause();jwplayer('container3').pause();
				},
				onTime: function(object) {
				if(object.position > object.duration - 1) {this.pause();}
				}
			}
			});
			</script>
			<br />
			<div id="container3"></div>
			<script type="text/javascript">
			jwplayer("container3").setup({
			file: "http://www.longtailvideo.com/jw/upload/bunny.mov",
			image: "http://www.longtailvideo.com/jw/upload/bunny.jpg",
			flashplayer: "http://player.longtailvideo.com/player.swf",
			height: 200,
			width: 300,
			controlbar: "bottom",
			stretching: "exactfit",
			events:{
				onPlay: function() {
				jwplayer('container').stop();jwplayer('container2').stop();jwplayer('container').pause();jwplayer('container2').pause();
				},
				onTime: function(object) {
				if(object.position > object.duration - 1) {this.pause();}
				}
			}
			});
			</script>
	</body>
</html>

Up Down

JW Player

User  
0 rated :

Thank you! I'll try it next time.

Up Down

Ethan Feldman

JW Player Support Agent  
0 rated :

Np

Up Down

JW Player

User  
0 rated :

Why isn't the following code working? I just inserted a "plugins" line...

bc.. <html>
<head>
<script type="text/javascript" src="http://player.longtailvideo.com/jwplayer.js"></script>
<title>Multiple 3</title>
</head>
<body>
<div id="container"></div>
<script type="text/javascript">
jwplayer("container").setup({
file: "http://www.youtube.com/watch?v=Z-BbpaNXbxg",
flashplayer: "http://player.longtailvideo.com/player.swf",
height: 200,
width: 300,
controlbar: "bottom",
stretching: "exactfit",
plugins: {captions-2: { file: "https://dl.dropbox.com/u/5173388/mkhere/subtitles/fish.srt" }, hd-2: {} },
events:{
onPlay: function() {
jwplayer('container2').stop();jwplayer('container3').stop();jwplayer('container2').pause();jwplayer('container3').pause();
},
onTime: function(object) {
if(object.position > object.duration - 1) {this.pause();}
}
}
});
</script>
</body>
</html>

Up Down

Ethan Feldman

JW Player Support Agent  
0 rated :

Can I see where this is running?

Up Down

JW Player

User  
0 rated :

I tried it on my Blogger, and also on an online tester http://www.csgnetwork.com/htmlcodetest.html . The code worked before I inserted that "plugins" line.

Up Down

Ethan Feldman

JW Player Support Agent  
0 rated :

plugins: {captions-2: { file: "https://dl.dropbox.com/u/5173388/mkhere/subtitl

Needs to be:

plugins: {"captions-2": { file: "https://dl.dropbox.com/u/5173388/mkhere/subtitl

Up Down

JW Player

User  
0 rated :

Thank you. Now the video can play, but the subtitle cannot show.

Up Down

Ethan Feldman

JW Player Support Agent  
0 rated :

Np. Can you put up an example on your blog?

Up Down

JW Player

User  
0 rated :

http://mkhere.blogspot.tw/2012/01/test.html
CC switch is activated, but the caption cannot show.

Up Down

Ethan Feldman

JW Player Support Agent  
0 rated :

I think the issue is that the crossdomain.xml file on – https://dl.dropbox.com/crossdomain.xml does not allow for other domains to access it.

Up Down

JW Player

User  
0 rated :

But the caption works here:
http://mkhere.blogspot.tw/2012/12/angler-fish.html
So for now I can either add the caption successfully or pause the movie, but I cannot do both.

Up Down

Ethan Feldman

JW Player Support Agent  
0 rated :

The two things shouldn’t have any effect on one another.

I just did a local test, it works:

<script type='text/javascript' src='https://dl.dropbox.com/u/5173388/mkhere/jwplayer/jwplayer.js'></script>
<div id='mediaplayer'></div>
<script type="text/javascript">
    jwplayer('mediaplayer').setup({
        'flashplayer': 'https://dl.dropbox.com/u/5173388/mkhere/jwplayer/player.swf',
        'id': 'playerID',
        'width': '580',
        'height': '450',
        'file': 'Z-BbpaNXbxg',
        'provider': 'youtube',
        'plugins': {
            'captions-2': {
                file: 'https://dl.dropbox.com/u/5173388/mkhere/subtitles/fish.srt'
            },
            'hd-2': {}
        },
        events: {
            onTime: function (object) {
                if (object.position > object.duration - 1) {
                    this.pause();
                }
            }
		}
        });
</script>

Up Down

JW Player

User  
0 rated :

I tried this code on my Blogger:
http://mkhere.blogspot.tw/2012/01/test.html
This time the caption can show but the movie cannot pause.

Thank you so much for your patience. I am fine with how the player works now (caption function is enough for me for now). If someday I figure out how to make the caption and the pause both work, I will let you know.

Up Down

Ethan Feldman

JW Player Support Agent  
0 rated :

Weird, if I link to the file for player.swf on our server, it stops at the end, but then it won’t load the captions because of the cross domain error:

<script type='text/javascript' src='https://dl.dropbox.com/u/5173388/mkhere/jwplayer/jwplayer.js'></script>
<div id='mediaplayer'></div>
<script type="text/javascript">
    jwplayer('mediaplayer').setup({
        'flashplayer': 'http://player.longtailvideo.com/player.swf',
        'id': 'playerID',
        'width': '580',
        'height': '450',
		'file': 'Z-BbpaNXbxg',
        'provider': 'youtube',
        'plugins': {
            'captions-2': {
                file: 'https://dl.dropbox.com/u/5173388/mkhere/subtitles/fish.srt'
            },
            'hd-2': {}
        },
		events:{
				onTime: function(object) {
				if(object.position > object.duration - 1) {this.pause();}
				}
		}
        });
</script>

Up Down

JW Player

User  
0 rated :

I thought the caption files HAVE to be in the same domain with the player? And since the caption with cross domain error cannot work, the pause function happily steps up and works. (Sounds weird but it fits my naive story about each of the two being able to work individually but not together.)

Up Down

Ethan Feldman

JW Player Support Agent  
0 rated :

Yes, they do, unless you have a valid crossdomain.xml file, so basically if you had the captions file on a domain (not dropbox) with an un restricted crossdomain.xml file, both would work fine.

This question has received the maximum number of answers.