Permalink
Find file
Fetching contributors…
Cannot retrieve contributors at this time
88 lines (77 sloc) 2.97 KB
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Vixen Test</title>
<link href="shadow/shadow.css" rel="stylesheet" type="text/css" />
<meta name="HandheldFriendly" content="True">
<meta name="MobileOptimized" content="320">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
<style>
body {
margin: 0px;
padding: 0px;
padding-bottom: 5em;
font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
}
[role=main] {
color: #444;
padding: 0px;
}
h1 {
background-color: #666;
color: white;
margin: 0px;
line-height: 2em;
padding-left: 0.5em;
padding-right: 0.5em;
}
p {
line-height: 2em;
padding-left: 0.5em;
padding-right: 0.5em;
}
</style>
</head>
<body>
<section role="main">
<h1>Vixen Demo</h1>
<p><a href="http://www.github.com/cgiffard/Vixen/">Fork Vixen on Github</a></p>
<p>Please log any issues you find!</p>
</section>
<video id="thing" height="180" width="320" controls title="Quite &amp; Orange - cdak 4K Demo" poster="video/poster.jpg">
<!-- H.264 -->
<source src="video/quite_orange-cdak-240p.mp4" type="video/mp4" res="240"/>
<source src="video/quite_orange-cdak-360p.mp4" type="video/mp4" res="360"/>
<source src="video/quite_orange-cdak-576p.mp4" type="video/mp4" res="576"/>
<source src="video/quite_orange-cdak-720p.mp4" type="video/mp4" res="720"/>
<source src="video/quite_orange-cdak-1080p.mp4" type="video/mp4" res="1080"/>
<!-- VP8 -->
<source src="video/quite_orange-cdak-240p.webm" type="video/webm" res="240"/>
<source src="video/quite_orange-cdak-360p.webm" type="video/webm" res="360"/>
<source src="video/quite_orange-cdak-576p.webm" type="video/webm" res="576"/>
<source src="video/quite_orange-cdak-720p.webm" type="video/webm" res="720"/>
<source src="video/quite_orange-cdak-1080p.webm" type="video/webm" res="1080"/>
<!-- Theora -->
<source src="video/quite_orange-cdak-240p.theora.ogv" type="video/ogv" res="240"/>
<track kind="captions" label="English captions" srclang="en" src="video/captions.vtt" />
<track kind="captions" label="Super long caption label that could ordinarily break the UI long text here" srclang="ja" src="video/japanese.vtt" />
<track kind="chapters" label="Chapters" srclang="en" src="video/chapters.vtt" />
</video>
<!-- Captionator TextTrack polyfill -->
<script src="https://raw.github.com/cgiffard/Captionator/captionplanet/js/captionator-min.js"></script>
<!-- Vixel DSL -->
<script src="vixel.js"></script>
<!-- Vixen Media Framework -->
<script src="vixen.js"></script>
<!-- Initialise Vixen! -->
<script>
var video;
document.addEventListener("DOMContentLoaded",function() {
video = Vixen.ify((document.querySelector ? document.querySelector("video") : null),function() {
alert("JWPlayer or a similar fallback would have loaded!");
});
},false);
</script>
</body>
</html>