Skip to content

Instantly share code, notes, and snippets.

@baldwicc

baldwicc/jsbin.xocey.html

Created June 2, 2014 03:36
Show Gist options
  • Save baldwicc/42fe6689357932130f49 to your computer and use it in GitHub Desktop.
Save baldwicc/42fe6689357932130f49 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
jsbin.xocey.html
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="Test for QUT Media Warehouse playback" />
<title>QMW HTML5 Video Test</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<link href="https://mediawarehouse.qut.edu.au/QMW/css/vendor/bootstrap.css" rel="stylesheet">
<!-- Modernizr -->
<script src="http://modernizr.com/downloads/modernizr-latest.js"></script>
</head>
<body>
<div class="container">
<div class="page-header">
<h1>QMW Video Test</h1>
<p class="lead">This page tests HTML5 Video Compatability.</p>
</div>
<div class="row">
<div class="col-xs-12">
<h3>HTML5 Video</h3>
<video id="QUT_player" style="width: 100%; height: 100%" preload="auto" src="https://mediawarehouse.qut.edu.au/cs/groups/public/documents/video/mdaw/mde2/~edisp/qmw_016606~1~mp4.mp4" controls>
</video>
</div>
<div class="col-xs-12">
<h3>Debug Output <small>(view <a href="http://modernizr.com/download/#-fontface-backgroundsize-borderimage-borderradius-boxshadow-flexbox-flexboxlegacy-hsla-multiplebgs-opacity-rgba-textshadow-cssanimations-csscolumns-generatedcontent-cssgradients-cssreflections-csstransforms-csstransforms3d-csstransitions-applicationcache-canvas-canvastext-draganddrop-hashchange-history-audio-video-indexeddb-input-inputtypes-localstorage-postmessage-sessionstorage-websockets-websqldatabase-webworkers-geolocation-inlinesvg-smil-svg-svgclippaths-touch-webgl-shiv-mq-cssclasses-prefixed-teststyles-testprop-testallprops-hasevent-prefixes-domprefixes-a_download-audio_audiodata_api-audio_webaudio_api-cookies-cors-css_mediaqueries-elem_time-elem_track-es5_strictmode-event_deviceorientation_motion-exif_orientation-file_api-file_filesystem-forms_placeholder-fullscreen_api-getusermedia-ie8compat-iframe_sandbox-iframe_seamless-iframe_srcdoc-img_apng-img_webp-json-network_connection-network_eventsource-network_xhr2-notification-performance-script_async-script_defer-svg_filters-url_data_uri-userdata-load">modernizr build</a>)</small></h3>
<pre id="debug"></pre>
</div>
</div>
</div>
<!-- jQuery -->
<script src="https://mediawarehouse.qut.edu.au/QMW/js/vendor/jquery.js"></script>
<!-- Bootstrap -->
<script src="https://mediawarehouse.qut.edu.au/QMW/js/vendor/bootstrap.js"></script>
<!-- Main -->
<script type="text/javascript">
$(document).ready(function(){
var output = $('#debug');
output.append('\n=== Video Formats ===');
output.append('\n ogg: ' + Modernizr.video.ogg);
output.append('\n webm: ' + Modernizr.video.webm);
output.append('\n h264: ' + Modernizr.video.h264);
output.append('\n');
output.append('\n=== Audio Formats ===');
output.append('\n m4a: ' + Modernizr.audio.m4a);
output.append('\n mp3: ' + Modernizr.audio.mp3);
output.append('\n ogg: ' + Modernizr.audio.ogg);
output.append('\n wav: ' + Modernizr.audio.wav);
output.append('\n');
output.append('\n=== All ===');
output.append('\nModernizr: ' + JSON.stringify(Modernizr, undefined, 2));
output.append();
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment