2010-05-19 03:23:19 +03:00
<!DOCTYPE html>
< html >
2010-05-14 21:49:06 +03:00
< head >
2010-05-19 03:23:19 +03:00
< meta charset = "utf-8" / >
2010-05-27 22:42:06 +03:00
< title > HTML5 Video Player | Video JS< / title >
2010-05-22 05:57:03 +03:00
< meta name = "google-site-verification" content = "QHf9MEYVlEWoNHbzTeUkSQsbRT5Twzqu6N0nX1i3nes" / >
2010-05-19 03:23:19 +03:00
< script src = "video-js/video.js" type = "text/javascript" charset = "utf-8" > < / script >
2010-05-28 19:42:42 +03:00
<!-- JQuery not required, but used for dom ready function -->
< script src = "javascripts/jquery-1.4.2.min.js" type = "text/javascript" charset = "utf-8" > < / script >
2010-05-19 03:23:19 +03:00
< link rel = "stylesheet" href = "stylesheets/base.css" type = "text/css" media = "all" charset = "utf-8" / >
< link rel = "stylesheet" href = "video-js/video-js.css" type = "text/css" media = "all" charset = "utf-8" / >
< link rel = "stylesheet" href = "stylesheets/site.css" type = "text/css" media = "all" charset = "utf-8" / >
<!-- [if !IE 7]>
< style type = "text/css" >
#wrap {display:table;height:100%}
< / style >
<![endif]-->
2010-05-19 03:27:41 +03:00
2010-05-21 19:57:09 +03:00
< script type = "text/javascript" charset = "utf-8" >
2010-05-28 19:42:42 +03:00
// Using JQuery's DOM Ready function
// You can also use window.onload, but it loads slower
$(function(){
2010-05-21 19:57:09 +03:00
VideoJS.setup();
2010-05-28 19:42:42 +03:00
})
2010-05-21 19:57:09 +03:00
< / script >
2010-05-14 21:49:06 +03:00
< / head >
2010-05-21 19:57:09 +03:00
< body >
2010-05-14 21:49:06 +03:00
2010-05-19 03:23:19 +03:00
< div id = "wrap" >
< div id = "main" >
2010-05-19 03:27:41 +03:00
2010-05-19 03:23:19 +03:00
< ul id = "nav" >
< li > < a href = "http://github.com/zencoder/video-js" > Source< / a > < / li >
< li > < a href = "http://github.com/zencoder/video-js/issues" > Issue Tracker< / a > < / li >
< li > < a href = "http://wiki.github.com/zencoder/video-js/" > Wiki< / a > < / li >
< / ul >
2010-05-19 03:27:41 +03:00
2010-05-19 03:23:19 +03:00
< h1 > Video JS< / h1 >
< p class = "tagline" > Open Source HTML5 Video Player< / p >
2010-05-19 03:27:41 +03:00
2010-05-21 19:50:51 +03:00
< div class = "video-js-box" >
2010-05-19 08:01:43 +03:00
<!-- Using the Video for Everybody Embed Code (modified for VP8/WebM) http://camendesign.com/code/video_for_everybody -->
2010-06-02 20:50:56 +03:00
< video id = "video" class = "video-js" width = "640" height = "264" poster = "http://video-js.zencoder.com/oceans-clip.png" preload >
< source src = "http://video-js.zencoder.com/oceans-clip.mp4" type = "video/mp4" >
< source src = "http://video-js.zencoder.com/oceans-clip.webm" type = "video/webm" >
< source src = "http://video-js.zencoder.com/oceans-clip.ogg" type = "video/ogg" >
2010-05-19 03:23:19 +03:00
< object width = "640" height = "264" type = "application/x-shockwave-flash"
data="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf">
< param name = "movie" value = "http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf" / >
< param name = "allowfullscreen" value = "true" / >
2010-05-28 02:24:14 +03:00
< param name = "flashvars" value = 'config={"clip":"http://video-js.zencoder.com/oceans-clip.mp4"}' / >
< img src = "http://video-js.zencoder.com/oceans-clip.png" width = "640" height = "264" alt = "Poster Image" title = "No video playback capabilities." / >
2010-05-19 03:23:19 +03:00
< / object >
< / video >
< / div >
2010-05-21 19:50:51 +03:00
2010-05-19 03:23:19 +03:00
< p id = "video_note" > Video clip is from < a href = "http://disney.go.com/disneynature/oceans/" title = "Oceans" > Disney’ s Oceans< / a > < / p >
2010-05-19 03:27:41 +03:00
2010-05-20 01:03:12 +03:00
< p > Video JS is a javascript-based video player that uses the HTML5 video functionality built into advanced browsers. In general, the benefit of using an HTML5 player is a consistent look between browsers.< / p >
2010-05-19 03:27:41 +03:00
2010-05-28 02:02:15 +03:00
< p id = "sponsor" >
2010-05-28 02:28:23 +03:00
< a href = "http://zencoder.com" > Video encoding & hosting< / a > provided by:< br >
2010-05-28 02:02:15 +03:00
< a href = "http://zencoder.com" > < img src = "images/zencoder-logo.png" border = "0" alt = "Zencoder - Video Encoding" > < / a >
< / p >
2010-05-19 03:27:41 +03:00
< div id = "features_and_support" class = "clearfix" >
< div id = "features" >
2010-05-19 03:23:19 +03:00
< h6 > Features< / h6 >
< ul id = "feature_list" >
< li > Free & Open Source< / li >
< li > Lightweight. < strong > NO IMAGES USED< / strong > < / li >
< li > 100% skinnable using CSS< / li >
2010-05-22 21:17:16 +03:00
< li > Library independent< / li >
2010-05-19 03:23:19 +03:00
< li > Easy to use< / li >
< li > Easy to understand & extend< / li >
< li > Consistent look between browsers< / li >
< li > Full Window Mode< / li >
< li > Volume Control< / li >
2010-05-19 03:53:58 +03:00
< li > Fallback to < a href = "http://flowplayer.org/" > Flowplayer< / a > < / li >
2010-05-19 03:23:19 +03:00
< li > < / li >
< / ul >
< / div >
< div id = "supported" class = "clearfix" >
< h6 > Download< / h6 >
< div class = "supported-section" >
< a href = "http://github.com/zencoder/video-js/zipball/master" title = "Zip Download" > < img src = "images/icons/zip.png" alt = "Zip Download" > < / a >
< a href = "http://github.com/zencoder/video-js/tarball/master" title = "Tar Download" > < img src = "images/icons/tar.png" alt = "Tar Download" > < / a >
< / div >
< h6 > Supported Browsers< / h6 >
< div class = "supported-section" >
< a href = "http://www.mozilla.com/en-US/firefox/firefox.html" title = "Firefox" > < img src = "images/icons/firefox.png" alt = "Firefox" > < / a >
< a href = "http://www.apple.com/safari/" title = "Safari" > < img src = "images/icons/safari.png" alt = "Safari" > < / a >
< a href = "http://www.google.com/chrome" title = "Chrome" > < img src = "images/icons/chrome.png" alt = "Chrome" > < / a >
2010-05-28 01:24:37 +03:00
< a href = "http://www.opera.com/" title = "Opera" > < img src = "images/icons/opera.png" alt = "Opera" > < / a >
2010-05-19 03:23:19 +03:00
< / div >
< h6 > Fallback Support For< / h6 >
< div class = "supported-section" >
< a href = "http://www.microsoft.com/windows/Internet-explorer/default.aspx" title = "IE" > < img src = "images/icons/ie.png" alt = "IE" > < / a >
< / div >
< h6 > Supported Formats< / h6 >
< div class = "supported-section" >
< a href = "http://en.wikipedia.org/wiki/H.264/MPEG-4_AVC" title = "h264" > < img src = "images/icons/h264.png" alt = "h264" > < / a >
< a href = "http://www.theora.org/" title = "Ogg" > < img src = "images/icons/ogg.png" alt = "Ogg" > < / a >
< a href = "http://www.webmproject.org/" title = "WebM" > < img src = "images/icons/webm.png" alt = "WebM" > < / a >
< / div >
< h6 > Compatible With< / h6 >
< div class = "supported-section" >
< a href = "http://www.apple.com/iphone/" title = "iPhone" > < img src = "images/icons/iphone.png" alt = "iPhone" > < / a >
< a href = "http://www.apple.com/ipad/" title = "iPad" > < img src = "images/icons/ipad.png" alt = "iPad" > < / a >
< / div >
< / div >
2010-05-19 03:27:41 +03:00
2010-05-27 22:23:12 +03:00
< p id = "issues_link" > Submit any bugs in the < a href = "http://github.com/zencoder/video-js/issues" > Issue Tracker< / a > < / p >
2010-05-19 03:23:19 +03:00
< div id = "disqus_thread" > < / div >
< script type = "text/javascript" >
/**
2010-05-19 03:27:41 +03:00
* var disqus_identifier; [Optional but recommended: Define a unique identifier (e.g. post id or slug) for this thread]
2010-05-19 03:23:19 +03:00
*/
(function() {
var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
dsq.src = 'http://videojs.disqus.com/embed.js';
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
})();
< / script >
< noscript > Please enable JavaScript to view the < a href = "http://disqus.com/?ref_noscript=videojs" > comments powered by Disqus.< / a > < / noscript >
< a href = "http://disqus.com" class = "dsq-brlink" > comments powered by < span class = "logo-disqus" > Disqus< / span > < / a >
2010-05-19 03:27:41 +03:00
2010-05-19 03:23:19 +03:00
< / div >
< / div >
< div id = "footer" >
2010-05-27 20:29:36 +03:00
© < a href = "http://videojs.com" > The Video JS Project< / a > . Sponsored by < a href = "http://zencoder.com" > Zencoder< / a > .
2010-05-19 03:23:19 +03:00
< / div >
< / div >
2010-05-19 03:27:41 +03:00
2010-05-19 03:23:19 +03:00
< script type = "text/javascript" >
//< ![CDATA[
(function() {
2010-05-22 05:47:50 +03:00
var links = document.getElementsByTagName('a');
var query = '?';
for(var i = 0; i < links.length ; i + + ) {
if(links[i].href.indexOf('#disqus_thread') >= 0) {
query += 'url' + i + '=' + encodeURIComponent(links[i].href) + '&';
}
}
document.write('< script charset = "utf-8" type = "text/javascript" src = "http://disqus.com/forums/videojs/get_num_replies.js' + query + '" > < / ' + ' s c r i p t > ' ) ;
2010-05-19 03:23:19 +03:00
})();
//]]>
< / script >
2010-05-19 03:27:41 +03:00
2010-05-19 22:05:29 +03:00
< script type = "text/javascript" >
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-16505296-1']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
< / script >
2010-05-14 21:49:06 +03:00
< / body >
< / html >
