Repository navigation
Expand file tree
/
Copy pathvideo10.html
More file actions
61 lines (51 loc) · 2.51 KB
/
Copy pathvideo10.html
File metadata and controls
61 lines (51 loc) · 2.51 KB
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Able Player Video Demo #10</title>
<link rel="stylesheet" href="demos.css" type="text/css">
<!-- Dependencies -->
<script src="../thirdparty/modernizr.custom.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="../thirdparty/js.cookie.js"></script>
<!-- Able Player CSS -->
<link rel="stylesheet" href="../build/ableplayer.min.css" type="text/css"/>
<!-- Able Player JavaScript -->
<script src="../build/ableplayer.js"></script>
<!-- CSS for this example -->
<style>
#video-wrapper {
float: left;
width: 500px;
}
#other-stuff {
position: relative;
font-size: 2em;
line-height: 2em;
color: #666;
z-index: 4000; /* Able Player uses 5000-10,000 */
}
</style>
</head>
<body>
<h1>Able Player Video Demo #10:<br/>Video with sign language</h1>
<p>An accompanying sign language video is provided for each <source> element using the
<em>data-sign-src</em> attribute.
</p>
<p>For additional demos see the <a href="index.html">Index of <em>Able Player</em> Examples</a>.</p>
<div id="video-wrapper">
<video id="video1" preload="auto" width="480" height="360" poster="../media/wwa.jpg" data-able-player>
<source type="video/mp4" src="../media/wwa.mp4" data-desc-src="../media/wwa_described.mp4" data-sign-src="../media/wwa_sign.mp4"/>
<source type="video/webm" src="../media/wwa.webm" data-desc-src="../media/wwa_described.webm" data-sign-src="../media/wwa_sign.webm"/>
<track kind="subtitles" src="../media/wwa_captions_es.vtt" srclang="es" label="Espanol"/>
<track kind="captions" src="../media/wwa_captions_en.vtt" srclang="en" label="English"/>
<track kind="descriptions" src="../media/wwa_description_en.vtt" srclang="en"/>
<track kind="descriptions" src="../media/wwa_description_es.vtt" srclang="es"/>
<track kind="chapters" src="../media/wwa_chapters_en.vtt" srclang="en"/>
<track kind="chapters" src="../media/wwa_chapters_es.vtt" srclang="es"/>
</video>
</div>
<div id="other-stuff">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</body>
</html>