1<!DOCTYPE html> 2<html lang="en"> 3 <head> 4 <meta charset="utf-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> 6 <link rel="shortcut icon" href="favicon.ico" type="image/x-icon"> 7 <link rel="icon" href="favicon.ico" type="image/x-icon"> 8 9 <title>MediaElement.js - HTML5 video and audio unification framework</title> 10 <meta name="description" content="HTML5 video and audio player with support for YouTube, SoundCloud, Facebook, Vimeo, HLS, Dash, and others."/> 11 <meta name="keywords" content="HTML5, video, H.264, Javascript, media, mp3, mp4"/> 12 13 <!-- fonts --> 14 <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Montserrat:400,700"> 15 <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato:300,300i"> 16 17 <!-- site --> 18 <link rel="stylesheet" href="css/mejs-site.css"> 19 20 <!-- library --> 21 <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/mediaelement@latest/build/mediaelementplayer.min.css"> 22 </head> 23 <body> 24 25 26 <header class="header"> 27 <a href="/" class="logo-container"> 28 <div class="logo"> 29 <!-- Empty alt-attribute, because it's not a content image --> 30 <img src="images/logo-orange.svg" alt=""/> 31 </div> 32 33 <h1 class="brand"> 34 <!-- Empty alt-attribute, because we have an alternative screenreader text not visible --> 35 <img src="images/mediaelement.svg" alt=""/><span class="sr-only">MediaElement.js</span> 36 </h1> 37 </a> 38 39 <nav class="menu" aria-label="Main-Navigation"> 40 <ul> 41 <li><a href="examples.html">Examples</a></li> 42 <li><a href="https://github.com/mediaelement/mediaelement/blob/master/docs/installation.md">Installation</a></li> 43 <li><a href="https://github.com/mediaelement/mediaelement/blob/master/docs/usage.md">Usage</a></li> 44 <li><a href="https://github.com/mediaelement/mediaelement/blob/master/docs/api.md">API</a></li> 45 <li><a href="https://github.com/mediaelement/mediaelement-plugins">Plugins</a></li> 46 </ul> 47 </nav> 48 </header> 49 50 <section class="overview"> 51 <div class="container"> 52 <h2 class="main headline-2">MediaElement.js</h2> 53 <p>A dependable HTML media framework</p> 54 <div class="center"> 55 <a class="button download" href="https://github.com/mediaelement/mediaelement/releases">Download Player</a> 56 </div> 57 58 <div class="overview-links"> 59 <a class="github-button" href="https://github.com/mediaelement/mediaelement" 60 data-size="large" 61 data-show-count="true" 62 data-count-aria-label="# stargazers on GitHub" aria-label="Star MediaElement.js on GitHub">Star Us</a> 63 <a href="https://www.npmjs.com/package/mediaelement"> 64 <img src="https://img.shields.io/npm/v/mediaelement.svg" alt="NPM version" height="25"> 65 </a> 66 </div> 67 68 <h2 class="main headline-2">MediaElement.js Plugins</h2> 69 <p>Boost your player with Chromecast, Google Analytics and more</p> 70 <div class="center"> 71 <a class="button download" href="https://github.com/mediaelement/mediaelement-plugins/releases">Download Plugins</a> 72 </div> 73 <div class="overview-links"> 74 <a class="github-button" href="https://github.com/mediaelement/mediaelement-plugins" 75 data-size="large" 76 data-show-count="true" 77 data-count-aria-label="# stargazers on GitHub" aria-label="Star Mediaelement Plugins on GitHub">Star Us</a> 78 <a href="https://www.npmjs.com/package/mediaelement-plugins"> 79 <img src="https://img.shields.io/npm/v/mediaelement-plugins.svg" alt="NPM version" height="25"> 80 </a> 81 </div> 82 </div> 83 </section> 84 85 86 <!-- player demos --> 87 <section class="players"> 88 89 <div class="container"> 90 91 <h2 class="headline-2">Look good. Sound good.</h2> 92 <p class="players_text center">MediaElement.js is a blazingly fast and amazingly powerful HTML5 audio and video library that creates a 93 unified feel for media files (MP4, MP3), streaming content (HLS, M(PEG)-DASH), and embeddable players like 94 YouTube, Vimeo, Twitch, DailyMotion, Facebook, and SoundCloud.</p> 95 96 <div class="media-container"> 97 <div class="flex"> 98 <h3 class="headline-3">Video Player</h3> 99 <select name="player1-sources" id="player1-sources"> 100 <option value="">Select source</option> 101 <option value="//github.com/mediaelement/mediaelement-files/blob/master/big_buck_bunny.mp4?raw=true">MP4</option> 102 <!--<option value="https://upload.wikimedia.org/wikipedia/commons/2/22/Volcano_Lava_Sample.webm">WebM</option>--> 103 <!--<option value="rtmp://184.72.239.149/vod/BigBuckBunny_115k.mov">RTMP</option>--> 104 <!--<option value="rtmp://firehose.cul.columbia.edu:1935/vod/mp4:sample.mp4">RTMP</option>--> 105 <option value="//bitdash-a.akamaihd.net/content/MI2
10501109210084_1/m3u8s/f08e80da-bf1d-4e3d-8899-f0f6155f6efa.m3u8">HLS</option> 106 <!-- <option value="//la2.indexcom.com/me/flv/guqin.flv">FLV</option> --> 107 <option value="//www.bok.net/dash/tears_of_steel/cleartext/stream.mpd">M(PEG)-DASH</option> 108 <!--<option value="http://dash.edgesuite.net/envivio/EnvivioDash3/manifest.mpd">M(PEG)-DASH</option>--> 109 <option value="//www.dailymotion.com/video/x11prnt">DailyMotion</option> 110 <option value="//www.youtube.com/watch?v=twYp6W6vt2U">YouTube</option> 111 <option value="//player.vimeo.com/video/108018156?title=0&byline=0&portrait=0&badge=0">Vimeo</option> 112 <option value="//www.facebook.com/facebook/videos/10155278547321729">Facebook</option> 113 <option value="//www.twitch.tv/videos/109010497">Twitch</option> 114 </select> 115 </div> 116 117 <div class="player"> 118 <video id="player1" width="640" height="360" preload="none" style="max-width: 100%" controls poster="images/big_buck_bunny.jpg" playsinline webkit-playsinline> 119 <source src="//github.com/mediaelement/mediaelement-files/blob/master/big_buck_bunny.mp4?raw=true" type="video/mp4"> 120 <track src="dist/mediaelement.vtt" srclang="en" label="English" kind="subtitles" type="text/vtt"> 121 </video> 122 </div> 123 </div> 124 125 <div class="media-container"> 126 <div class="flex"> 127 <h3 class="headline-3">Audio Player</h3> 128 <select name="player2-sources" id="player2-sources"> 129 <option value="">Select source</option> 130 <option value="dist/AirReview-Landmarks-02-ChasingCorporate.mp3">MP3</option> 131 <!--<option value="//www.vorbis.com/music/Hydrate-Kenny_Beltrey.ogg">OGG</option>--> 132 <option value="//db3.indexcom.com/bucket/ram/00/05/64k/05.m3u8">HLS</option> 133 <!--<option value="rtmp://s3b78u0kbtx79q.cloudfront.net/cfx/st/mp3:fake_empire-cbr">RTMP</option>--> 134 <option value="//api.soundcloud.com/tracks/323195515/stream?client_id=95f22ed54a5c297b1c41f72d713623ef">SoundCloud</option> 135 <option value="https://opus-codec.org/static/examples/ehren-paper_lights-96.opus">Opus</option> 136 </select> 137 </div> 138 139 <div class="player"> 140 <audio id="player2" preload="none" controls style="max-width: 100%"> 141 <source src="dist/AirReview-Landmarks-02-ChasingCorporate.mp3" type="audio/mp3"> 142 </audio> 143 </div> 144 </div> 145 </div> 146 147 </section><!-- /.players --> 148 149 <div class="features"> 150 <div class="container"> 151 <h2><div class="line">We <span class="heart">Love</span> accessibility!</div></h2> 152 153 <p class="feature__text center"> 154 This videoplayer is <a href="https://www.w3.org/TR/WCAG21/">WCAG 2.1</a> compliant and additionally we are 155 following the rules for the german accessibility information act <a href="https://www.gesetze-im-internet.de/bitv_2_0/__3.html">BITV 2.0</a> 156 and european <a href="https://www.etsi.org/deliver/etsi_en/301500_301599/301549/03.02.01_60/en_301549v030201p.pdf">accessibility requirements 157 for ICT products and services (EN 301 549)</a>. If you have any accessibility concerns, please let us know by <a href="https://github.com/mediaelement/mediaelement/issues">creating an issue</a> on github. 158 </p> 159 160 <div class="center"> 161 <a class="button" href="https://github.com/mediaelement/mediaelement/tree/master/docs" target="_blank">Read the Docs</a> 162 <a class="button" href="https://github.com/mediaelement/mediaelement" target="_blank">View on GitHub</a> 163 <a class="button" href="https://github.com/mediaelement/mediaelement-plugins" target="_blank">Enhance MediaElement.js</a> 164 </div> 165 </div> 166 </div> 167 168 <section class="sitesusing"> 169 <div class="container"> 170 <h2>Used by Smart Folks</h2> 171 172 <ul class="site-logos"> 173 174 <li class="site-logo"> 175 <a href="http://www.wordpress.org/" target="_blank"><img src="images/wordpress.png" alt="Wordpress"/></a> 176 </li> 177 178 <li class="site-logo"> 179 <a href="http://www.canvaslms.com/" target="_blank"><img src="images/canvas.png" alt="Instructure Canvas"/></a> 180 </li> 181 182 <li class="site-logo"> 183 <a href="http://www.revision3.com/" target="_blank"><img src="images/revision3.png" alt="Revision3"/></a> 184 </li> 185 186 <li class="site-logo"> 187 <a href="http://www.rottentomatoes.com/" target="_blank"><img src="images/rottentomatoes.png" alt="Rotten Tomatoes"/></a> 188 </li> 189 190 <li class="site-logo"> 191 <a href="http://www.teamtreehouse.com/" target="_blank"><img src="images/treehouse.png" alt="Treehouse Coding"/></a> 192 </li> 193 194 <li class="site-logo"> 195 <a href="http://www.mozilla.org/" target="_blank"><img src="images/mozilla.svg" alt="Mozilla Nightly News"/></a> 196 </li> 197 198 <li class="site-logo"> 199 <a href="http://articles.salsalabs.com/" target="_blank"><img src="images/salsa.png" alt="Salsa Labs"/></a> 200 </li> 201 202 <li class="site-logo"> 203 <a href="http://www.streamindex.com/" target="_blank"><img src="images/streams.svg" alt="StreamS"/></a> 204 </li> 205 206 <li class="site-logo"> 207 <a href="https://transloadit.com/" target="_blank"><img src="images/transloadit.png" alt="Transloadit"/></a> 208 </li> 209 210 <li class="site-logo"> 211 <a href="https://contao.org/" target="_blank"><img src="images/contao.svg" alt="Contao"/></a> 212 </li> 213 214 <li class="site-logo"> 215 <a href="https://www.er-secure.de/" target="_blank"><img src="images/er-secure.png" alt="ER Secure"/></a> 216 </li> 217 218 <li class="site-logo"> 219 <a href="https://www.defense.gov/" target="_blank"><img src="images/seal.svg" alt="U.S. Department of Defense" style="height:80px"/></a> 220 </li> 221 222 <li class="site-logo"> 223 <a href="https://medsims.com/" target="_blank"><img src="images/medsims.svg" alt="MedSims from WebMD/Medscape"/></a> 224 </li> 225 226 </ul><!-- /.site-logos --> 227 228 </div> 229 </section> 230 231 <footer> 232 <div class="footer-container"> 233 <div class="left"> 234 <a href="https://github.com/mediaelement/mediaelement">MediaElement.js</a> was created by 235 <a href="https://j.hn">John Dyer</a> at <a href="http://www.dts.edu/">Dallas Theological 236 Seminary</a>. 237 </div> 238 <div class="right">Logo and page design by <a href="https://github.com/cobyalmond">Coby Almond</a>.</div> 239 </div> 240 </footer> 241 242 <!-- JS --> 243
243<script src="https://cdn.jsdelivr.net/npm/mediaelement@latest/build/mediaelement-and-player.min.js"></script>
243 244
244<script src="https://cdn.jsdelivr.net/npm/mediaelement@latest/build/renderers/dailymotion.min.js"></script>
244 245
245<script src="https://cdn.jsdelivr.net/npm/mediaelement@latest/build/renderers/facebook.min.js"></script>
245 246
246<script src="https://cdn.jsdelivr.net/npm/mediaelement@latest/build/renderers/soundcloud.min.js"></script>
246 247
247<script src="https://cdn.jsdelivr.net/npm/mediaelement@latest/build/renderers/twitch.min.js"></script>
247 248
248<script src="https://cdn.jsdelivr.net/npm/mediaelement@latest/build/renderers/vimeo.min.js"></script>
248 249
249<script src="https://buttons.github.io/buttons.js"></script>
249 250
250<script src="https://platform.twitter.com/widgets.js"></script>
250 251
251<script> 252 253 var 254 sourcesSelector = document.body.querySelectorAll('select'), 255 sourcesTotal = sourcesSelector.length 256 ; 257 258 for (var i = 0; i < sourcesTotal; i++) { 259 sourcesSelector[i].addEventListener('change', function (e) { 260 var 261 media = e.target.closest('.media-container').querySelector('.mejs__container').id, 262 player = mejs.players[media] 263 ; 264 265 player.setSrc(e.target.value.replace('&', '&')); 266 player.setPoster(''); 267 player.load(); 268 269 }); 270 271 // These media types cannot play at all on iOS, so disabling them 272 if (mejs.Features.isiOS) { 273 if (sourcesSelector[i].querySelector('option[value^="rtmp"]')) { 274 sourcesSelector[i].querySelector('option[value^="rtmp"]').disabled = true; 275 } 276 if (sourcesSelector[i].querySelector('option[value$="webm"]')) { 277 sourcesSelector[i].querySelector('option[value$="webm"]').disabled = true; 278 } 279 if (sourcesSelector[i].querySelector('option[value$=".mpd"]')) { 280 sourcesSelector[i].querySelector('option[value$=".mpd"]').disabled = true; 281 } 282 if (sourcesSelector[i].querySelector('option[value$=".ogg"]')) { 283 sourcesSelector[i].querySelector('option[value$=".ogg"]').disabled = true; 284 } 285 if (sourcesSelector[i].querySelector('option[value$=".flv"]')) { 286 sourcesSelector[i].querySelector('option[value*=".flv"]').disabled = true; 287 } 288 } 289 } 290 291 document.addEventListener('DOMContentLoaded', function() { 292 var mediaElements = document.querySelectorAll('video, audio'), total = mediaElements.length; 293 294 for (var i = 0; i < total; i++) { 295 new MediaElementPlayer(mediaElements[i], { 296 iconSprite: '/images/mejs-controls.svg', 297 success: function () { 298 var target = document.body.querySelectorAll('.player'), targetTotal = target.length; 299 for (var j = 0; j < targetTotal; j++) { 300 target[j].style.visibility = 'visible'; 301 } 302 } 303 }); 304 } 305 }); 306 </script>
306 307 </body> 308</html>
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.