Flowplayer · Subtitles · Demo

VTT subtitles

The subtitles are loaded from a different domain by serving the vtt file with an appropriate CORS (Cross Origin Resource Sharing) policy.

Your browser ... CORS.

The subtitles are customized via CSS:

.flowplayer {
background-color: #666;
}
 
.flowplayer.custom-subtitles {
background-image: url(//flowplayer.org/media/img/demos/playful.jpg);
}
@media(-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
.flowplayer.custom-subtitles {
background-image: url(//flowplayer.org/media/img/demos/playful@x2.jpg);
}
}
.flowplayer.custom-subtitles .fp-captions {
/* override default centered position */
text-align: left !important;
top: 40px;
left: 40px;
/* avoid covering the play button */
height: 0;
}
 
.flowplayer.custom-subtitles .fp-captions p {
background: none;
text-shadow: 0 0 2px #000;
}
 
.flowplayer.fp-slim.is-splash {
background-color: #8a0707;
}

CSS

SRT subtitles

Here the subtitles are loaded locally.

Note that SRT files will not be accepted as native subtitles because their format differs from VTT, and browsers will not recognize them.

<body/>

<div data-ratio="0.4167" class="flowplayer fp-playful is-splash custom-subtitles">
 
<video crossorigin>
<source type="video/webm" src="//edge.flowplayer.org/playful.webm">
<source type="video/mp4" src="//edge.flowplayer.org/playful.mp4">
<track default kind="subtitles" srclang="en" label="English"
src="//d12zt1n3pd4xhr.cloudfront.net/fp/subtitles-demo.vtt">
</video>
 
</div>
 
<!-- ... -->
 
<div class="flowplayer fp-slim is-splash"
data-embed="false"
data-ratio="0.4286"
data-rtmp="rtmp://s3b78u0kbtx79q.cloudfront.net/cfx/st">
 
<video data-title="Buffalo Soldiers">
<source type="video/mp4" src="//edge.flowplayer.org/buffalo_soldiers.mp4">
<source type="video/flash" src="mp4:buffalo_soldiers">
<track default kind="subtitles" srclang="en" label="English"
src="/media/srt/buffalo.srt">
</video>
 
</div>

HTML

CORS

The VTT file in the first demo is loaded from a different domain, so it must served with a CORS header and as this is a VIDEO tag based installation the VIDEO tag must feature the crossorigin attribute.

//d12zt1n3pd4xhr.cloudfront.net points to a cloudfront instance of an Amazon S3 bucket. The CORS configuration of the bucket looks like this:

<CORSConfiguration>
<CORSRule>
<AllowedOrigin>*</AllowedOrigin>
<AllowedMethod>GET</AllowedMethod>
<MaxAgeSeconds>3000</MaxAgeSeconds>
<AllowedHeader>*</AllowedHeader>
</CORSRule>
</CORSConfiguration>

XML

You can edit the CORS configuration of a bucket in its "Properties" tab under 'Permissions' in the AWS console.

Additionally the 'Origin' header must be whitelisted in the Cloudfront distribution:

  1. select distribution
  2. click on 'Behaviors' tab
  3. select 'Default (*)' behavior
  4. click 'Edit'
  5. from the 'Forward Headers' selector choose 'Whitelist'
  6. add 'Origin' header