Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Fetching contributors…

Cannot retrieve contributors at this time

165 lines (141 sloc) 12.059 kB
<!DOCTYPE html>
<!--[if lt IE 7]> <html xmlns="http://www.w3.org/1999/xhtml" class="no-js ie6 oldie" lang="en"> <![endif]-->
<!--[if IE 7]> <html xmlns="http://www.w3.org/1999/xhtml" class="no-js ie7 oldie" lang="en"> <![endif]-->
<!--[if IE 8]> <html xmlns="http://www.w3.org/1999/xhtml" class="no-js ie8 oldie" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html xmlns="http://www.w3.org/1999/xhtml" class="no-js" lang="en"> <!--<![endif]-->
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>JME 2 + jQuery Mobile</title>
<meta name="description" content="A demo page for jMediaelement (JME) and jQuery Mobile. Uses HTML5Boilerplate, Captionator and HTML5 microdata for SEO." />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
<link rel="stylesheet" href="jqm-style/css/player-styles.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.js"></script>
<!-- only slider + dependencies are required -->
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
<!-- END: slider -->
<!-- polyfill: only needed if you want to make it cross browser (do not hotlink) -->
<script src="http://afarkas.github.com/webshim/demos/js-webshim/minified/extras/modernizr-custom.js"></script>
<script src="http://afarkas.github.com/webshim/demos/js-webshim/minified/polyfiller.js"></script>
<!-- END: polyfill -->
<script src="../src/jme.js"></script>
<script>
(!$.jme && document.write('<script src="js\/jme.js"><\/script>'));
</script>
<!-- start polyfill (only if webshims is included) -->
<script>
jQuery.noConflict();
(function($){
if($.webshims){
$.webshims.polyfill('mediaelement');
}
function callOnPageInit() {
// TODO: May need to move call to webshims here to support JQM's AJAX navigation. -mderting
}
// TODO: Use delegate instead of live, since live is deprecated in jQuery 1.7.1. -mderting
$( '#wrapper' ).live('pageinit',function(event){
callOnPageInit();
});
})(jQuery);
</script>
<script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>
</head>
<body>
<div id="wrapper" data-role="page">
<header data-role="header">
<h1>JME 2 + jQuery Mobile</h1>
<a href="javascript:history.go(-1)" title="Back" data-role="button" data-rel="back" data-icon="arrow-l" data-iconpos="notext">Back</a>
<a rel="home" href="/" title="Home" data-role="button" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
</header><!-- end header -->
<div id="content-wrapper" data-role="content">
<div id="wrapper-2" class="ui-corner-all">
<div id="wrapper-3">
<div id="main" role="main">
<article itemscope="itemscope" itemprop="video" itemtype="http://schema.org/VideoObject" class="hmedia video">
<div class="mediaplayer" role="group" aria-labeledby="video-label-1" data-jme='{"controlbar": true}'>
<video poster="media/sintel/sintel-trailer.png" preload="none" class="player">
<source src="media/sintel/sintel-trailer.m4v" type="video/mp4" />
<source src="media/sintel/sintel-trailer.webm" type="video/webm" />
<track kind="subtitles" src="media/sintel/sintel-trailer_en.vtt" srclang="en" label="English captions" />
<div class="fallback">
<img src="media/sintel/sintel-trailer.png" alt="Sintel Trailer" itemprop="thumbnail" class="photo" />
<div class="fallback-text">
<p>Please use a modern browser or install <a href="http://get.adobe.com/flashplayer/">Flash-Plugin</a></p>
<ul>
<li><a rel="enclosure" itemprop="contentURL" class="source" href="media/sintel/sintel-trailer.m4v" download="sintel-trailer.m4v" type="video/mp4">Video: Sintel Trailer (<span itemprop="encodingFormat">mp4</span>)</a></li>
<li><a rel="enclosure" itemprop="contentURL" class="source" href="media/sintel/sintel-trailer.webm" download="sintel-trailer.webm" type="video/webm">Video: Sintel Trailer (<span itemprop="encodingFormat">webm</span>)</a></li>
<li><a href="media/sintel/sintel-trailer_en.vtt" type="text/vtt">Closed Captions (srt)</a></li>
</ul>
</div>
</div>
</video>
<div class="jme-default-poster-overlay poster-display"></div>
<div class="jme-default-media-overlay media-state play-pause"></div>
<div class="jme-default-control-bar">
<div class="jme-cb-box media-controls ui-bar-a" role="application">
<div class="media-bar">
<div class="toggle-control toggle-controlgroup">
<fieldset data-role="controlgroup" data-type="horizontal">
<input id="play-toggle-1" name="play-toggle-1" type="checkbox" title="Play/Pause" class="play-pause" />
<label for="play-toggle-1" title="Play/Pause" class="play-toggle"><span class="jme-icon"></span><span class="jme-text">Play/Pause</span></label>
<input id="captions-toggle-1" name="captions-toggle-1" type="checkbox" title="Captions On/Captions Off" class="captions" />
<label for="captions-toggle-1" title="Captions On/Captions Off" class="captions-toggle"><span class="jme-icon"></span><span class="jme-text">Captions On/Captions Off</span></label>
<div class="volume-controls">
<input id="mute-toggle-1" name="mute-toggle-1" type="checkbox" title="Mute/Unmute" class="mute-unmute" />
<label for="mute-toggle-1" title="Mute/Unmute" class="mute-toggle"><span class="jme-icon"></span><span class="jme-text">Mute/Unmute</span></label>
<div class="volume-slider"></div>
</div>
</fieldset>
</div>
<div class="currenttime-display">00:00</div>
<div class="time-slider ui-btn-down-a"></div>
<div class="duration-display">00:52</div>
<div class="toggle-control fullscreen-toggle">
<label for="fullscreen-toggle-1" title="Enter Fullscreen/Exit Fullscreen" class="ui-hidden-accessible"><span class="jme-text">Enter Fullscreen/Exit Fullscreen:</span></label>
<select id="fullscreen-toggle-1" name="fullscreen-toggle-1" title="Enter Fullscreen/Exit Fullscreen" class="fullscreen" data-role="slider">
<option value="off">Exit Fullscreen</option>
<option value="on">Enter Fullscreen</option>
</select>
</div>
</div> <!-- end media-bar -->
</div> <!-- end media-controls -->
</div> <!-- end jme-default-control-bar -->
</div> <!-- end mediaelement -->
<footer>
<div data-role="collapsible" data-theme="a" data-content-theme="a" class="details">
<h2 id="video-label-1" itemprop="name" class="fn">Video: Sintel Trailer</h2>
<p itemprop="description" class="description"><q>Sintel</q> is an independently produced short film, initiated by the Blender Foundation as a means to further improve and validate the free/open source 3D creation suite Blender. With initial funding provided by 1000s of donations via the internet community, it has again proven to be a viable development model for both open 3D technology as for independent animation film.</p>
<dl class="media-info">
<dt>File Size:</dt>
<dd itemprop="contentSize">10 MB</dd>
<dt>Duration:</dt>
<dd><meta itemprop="duration" content="PT00M52S" />00:52</dd>
<dt>Contributor:</dt>
<dd itemprop="contributor" itemscope="itemscope" itemtype="http://schema.org/Organization" class="vcard contributor">
<span>© copyright</span>
<span itemprop="name" class="fn">Blender Foundation</span>
<a itemprop="url" rel="external" href="http://www.sintel.org/" class="url">http://www.sintel.org</a></dd>
</dl>
</div>
</footer>
</article>
</div><!-- end main -->
</div><!-- end wrapper-3 -->
</div><!-- end wrapper-2 -->
</div><!-- end content-wrapper -->
<footer data-role="footer">
<div class="nav-utility">
<ul class="menu">
<li class="back">
<a href="javascript:history.go(-1)" title="Back" data-role="button" data-rel="back" data-icon="arrow-l" data-iconpos="notext">Back</a>
</li>
<li class="home">
<a rel="home" href="/" title="Home" data-role="button" data-icon="home" data-iconpos="notext">Home</a>
</li>
</ul>
</div><!-- end nav-utility -->
</footer><!-- end footer -->
</div><!-- end page -->
</body>
</html>
Jump to Line
Something went wrong with that request. Please try again.