This repository has been archived by the owner on Nov 10, 2020. It is now read-only.
forked from mozilla/popcorn-js
/
example.html
64 lines (61 loc) · 2.2 KB
/
example.html
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
<!DOCTYPE html>
<html>
<head>
<title>Popcorn Simple Demo</title>
<!-- You muct include the popcorn.js file. Ensure the path is correct -->
<script src="popcorn.js"></script>
<!-- You must include each plug-in needed for the demo individually. Ensure the path is correct -->
<!-- Footnote Plugin -->
<script src="plugins/footnote/popcorn.footnote.js"></script>
<!-- Subtitle Plugin -->
<script src="plugins/subtitle/popcorn.subtitle.js"></script>
<!-- Link popcorn-js to the video by uing the id of the video element -->
<!-- You need to tell popcorn when you want each plugin to execute -->
<script>
// wait for DOM to load
document.addEventListener('DOMContentLoaded', function () {
// popcorn events are chainable this means that you can also do:
// p.play(); or p.footnote{};
// Make a popcorn instance, passing the id of the video element.
// notice the <video id='video' ... > at the bottom of the page.
var p = Popcorn('#video')
// use the footnote plugin
// notice the <div id='footnotediv'> tag at the bottom of the page
.footnote({
start: 0, // seconds
end: 15, // seconds
text: 'This video made exclusively for drumbeat.org',
target: 'footnotediv'
} )
// use the subtitle plugin
.subtitle({
start: 1, // seconds
end: 15, // seconds
text: 'this is a subtitle'
} )
// make the video play automatically
.play();
}, false);
</script>
</head>
<body>
<h1>Popcorn Simple Demo</h1>
<p>You should see a footnote "This video made exclusively for drumbeat.org" appear right away</p>
<p>You should see a subtitle "this is a subtitle" appear at 1 sec away</p>
<!-- You need a video element with an id -->
<video id='video'
controls
width= '250px'
poster="test/poster.png">
<source id='mp4'
src="test/trailer.mp4"
type='video/mp4; codecs="avc1, mp4a"'>
<source id='ogv'
src="test/trailer.ogv"
type='video/ogg; codecs="theora, vorbis"'>
<p>Your user agent does not support the HTML5 Video element.</p>
</video>
<!-- this is needed for the footnote plugin -->
<div id="footnotediv"></div>
</body>
</html>