index.html 1.79 KB
Newer Older
1 2 3 4
<!doctype html>
<html lang="en">
<head>
     <meta charset="utf-8" />
5
     <title>Responsive Accessible HTML5 Video Player</title>
6 7 8 9
     <meta name="description" content="Custom HTML5 video controls and WebVTT captions." />
     <meta name="viewport" content="width=device-width, initial-scale=1" />

<!-- PX-VIDEO CSS -->
10
<link rel="stylesheet" href="../css/px-video.css" />
11 12 13 14 15 16 17

</head>

<body>

<div id="wrapper">

18
<h1>Responsive Accessible HTML5 Video Player</h1>
19 20 21 22

<div class="px-video-container" id="myvid">
	<div class="px-video-img-captions-container">
		<div class="px-video-captions hide"></div>
23 24 25
		<div class="px-video-wrapper">
			<video poster="../media/spyware-2.0.jpg" class="px-video" controls>
				<!-- video files -->
26
				
27
				<source src='//player.vimeo.com/external/116656700.hd.mp4?s=7c35a103bbe5bc74d7fa1a6241616d2b' type='video/mp4' />
Laura Kalbag's avatar
Laura Kalbag committed
28
				<source src="https://ind.ie/videos/spyware-2.0/spyware-2.0.ogv" type="video/ogg" />
29

30 31
				<!-- text track file -->
				<track kind="captions" label="English captions" src="../media/captions-spyware-2.0-en.vtt" srclang="en" default />
32

33 34
				<!-- fallback for browsers that don't support the video element -->
				<div>
Laura Kalbag's avatar
Laura Kalbag committed
35
					<a href="https://ind.ie/videos/spyware-2.0/spyware-2.0.mp4">
36 37 38 39 40
						<img src="../media/spyware-2.0.jpg" width="640" height="360" alt="download video" />
					</a>
				</div>
			</video>
		</div>
41 42 43 44 45
	</div><!-- end container for captions and video -->
	<div class="px-video-controls"></div>
</div><!-- end video container -->

</div><!-- end page wrapper container -->
46
<script src="../js/modernizr.js"></script>
47
<script src="../js/px-video.js"></script>
48 49 50 51

<script>

// Initialize
52
var video1 = new InitPxVideo({
53
	"videoId": "myvid",
54
	"captionsOnDefault": false,
55
	"seekInterval": 20,
56
	"videoTitle": "Ind.ie Launch",
57 58 59 60 61 62
	"debug": true
});

</script>

</body>
63
</html>