mediaelement-demo/mep-transcript.html at master · IET-OU/mediaelement-demo · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
<!doctype html><html class="side-by" ><meta charset="utf-8" />

<base href="../mediaelement-transcript/" />


<title>*HTML5 MediaElement</title>

<script src="build/jquery.js"></script>
<script src="local-build/mediaelement-and-player.js"></script>

<script src="src/js/mep-feature-timedtranscript.js"></script>

<script data-src="demo/testforfiles.js"></script>


<link rel="stylesheet" href="local-build/mediaelementplayer.css" />
<link rel="stylesheet" href="../mediaelement-demo/css/mep-feature-timedtranscript.css" />


<h1>MediaElementPlayer.js</h1>

<h2>Interactive Transcript demo</h2>

<div class="desc">
<p>Try out the interactive transcript by:
<ol>
  <li> Pressing play and watching the highlighted phrase;
  <li> Clicking on a phrase and seeing the media player seek to the appropriate spot;
  <li> Entering a search term...
  <li> Pressing the "T" button in the control bar to show/hide the transcript;
</ol>
</div>


<video width="640" height="360" controls poster=
  "//podcast.open.ac.uk/feeds/student-experiences/OULIFE_student_00147.jpg">
  <source type="video/mp4" src=
    "//podcast.open.ac.uk/feeds/student-experiences/openings-being-an-ou-student.m4v" />

  <track kind="subtitles" srclang="en" type="text/vtt" src="../mediaelement-demo/media/ou-student-experiences-openings-captions.srt" />
  <track kind="subtitles" srclang="en-GB-x-transcript" label="Timed transcript (word-level)" type="text/vtt" src="../mediaelement-demo/media/ou-student-experiences-openings-captions-words.srt" />
</video>


<div id="transcript"></div>


<script>
$('video,audio').mediaelementplayer({

  transcriptSelector: '#transcript',
  transcriptLoadShow: true,

  //TODO: auto-scroll is a bit buggy - disable!
  transcriptAutoScroll: false,

  features: [
    'playpause', 'progress', 'current', 'duration', 'tracks',
    'timedtranscript', 'volume', 'fullscreen'
  ],

  toggleCaptionsButtonWhenOnlyOne: true,
  alwaysShowControls: true
});


if (document.location.href.match( /trace=1/ )) {
  $('body').addClass('x-trace');
}
</script>


<pre>


* TODO: switch to the MediaElement example media and caption files.
* Compatibility: tested mostly on Chrome. Other browsers may work!

<!--
Nick Freear, 26 June 2014 | https://gist.github.com/nfreear/905453fb86124bcd3f38

* http://mediaelementjs.com

* http://www.open.ac.uk/courses/what-study-like
* http://podcast.open.ac.uk/feeds/2846/player.xml
* http://podcast.open.ac.uk/pod/2846/#!b197338983
* http://mediaplayer.open.edu/popup/pod/student-experiences/db6cc60d6b
* https://github.com/johndyer/mediaelement/blob/master/src/js/mep-feature-tracks.js
* http://www.w3.org/2010/05/video/mediaevents.html
-->
</pre>
</html>