Here is the code I am using, freely available on the video.js github:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Video.js Transcript</title>
<link href="//vjs.zencdn.net/5.6.0/video-js.css" rel="stylesheet">
<link href="css/videojs-transcript.css" title="Example 1" rel="stylesheet">
<link href="css/videojs-transcript2.css" title="Example 2" rel="alternate stylesheet">
<link href="css/videojs-transcript3.css" title="Example 3" rel="alternate stylesheet">
<style>
body {
font-family: Arial, sans-serif;
}
.info {
background-color: #eee;
border: thin solid #333;
border-radius: 3px;
padding: 0 5px;
text-align: center;
}
.video-js {
margin: 40px auto;
}
</style>
<script src="//vjs.zencdn.net/5.6.0/video.js"></script>
<script src="dist/videojs-transcript.js"></script>
</head>
<body>
<div class="info">
<p>
You can see the Video.js Transcript plugin in action below.
Look at the source of this page to see how to use it with your videos.
</p>
</div>
<div class="video-container">
<video id="video"
class="video-js vjs-default-skin"
height="300"
width="600"
controls>
<p>
Your browser doesn't support video. Please <a href="http://browsehappy.com/">upgrade your browser</a> to see the example.
</p>
<source src="Rogue One_ A Star Wars Story.m4v" type="video/mp4">
<!-- <source src="http://www.openbeelden.nl/files/92/104105.ed_hd.webm" type="video/webm"> -->
<track kind="captions" src="captions/captions.en.vtt" srclang="en" label="English" default>
<track kind="captions" src="captions/captions.sv.vtt" srclang="sv" label="Swedish">
<track kind="captions" src="captions/captions.ru.vtt" srclang="ru" label="Russian">
<track kind="captions" src="captions/captions.ja.vtt" srclang="ja" label="Japanese">
<track kind="captions" src="captions/captions.ar.vtt" srclang="ar" label="Arabic">
</video>
<div id="transcript"></div>
</div>
<script>
var video = videojs('video').ready(function(){
// fire up the plugin
var transcript = this.transcript();
// attach the widget to the page
var transcriptContainer = document.querySelector('#transcript');
transcriptContainer.appendChild(transcript.el());
});
</script>
</body>
</html>
But I am not able to play it. Is this because of the DRM security that Apple puts on their movie files and thus implying there is no legal way to play this file without pirating it or is there a legal way to purchase a movie file and play it programmatically with video.js or some similar library (prefereably html5 player or web-based player)?