263 lines
12 KiB
HTML
263 lines
12 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html lang="en">
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8">
|
||
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||
|
|
<title>MediaElement.js 3.0 - audio/video unification library</title>
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
|
|
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
|
||
|
|
<link rel="icon" href="favicon.ico" type="image/x-icon">
|
||
|
|
|
||
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
|
||
|
|
<link rel="stylesheet" href="../build/mediaelementplayer.css">
|
||
|
|
|
||
|
|
<style>
|
||
|
|
|
||
|
|
html, body {
|
||
|
|
overflow-x: hidden;
|
||
|
|
}
|
||
|
|
|
||
|
|
#container {
|
||
|
|
padding: 0 20px 50px;
|
||
|
|
}
|
||
|
|
.error {
|
||
|
|
color: red;
|
||
|
|
}
|
||
|
|
a {
|
||
|
|
word-wrap: break-word;
|
||
|
|
}
|
||
|
|
|
||
|
|
code {
|
||
|
|
font-size: 0.8em;
|
||
|
|
}
|
||
|
|
|
||
|
|
#player2-container .mejs__time-buffering, #player2-container .mejs__time-current, #player2-container .mejs__time-handle,
|
||
|
|
#player2-container .mejs__time-loaded, #player2-container .mejs__time-hovered, #player2-container .mejs__time-marker, #player2-container .mejs__time-total {
|
||
|
|
height: 2px;
|
||
|
|
}
|
||
|
|
|
||
|
|
#player2-container .mejs__time-total {
|
||
|
|
margin-top: 9px;
|
||
|
|
}
|
||
|
|
#player2-container .mejs__time-handle {
|
||
|
|
left: -5px;
|
||
|
|
width: 12px;
|
||
|
|
height: 12px;
|
||
|
|
border-radius: 50%;
|
||
|
|
background: #ffffff;
|
||
|
|
top: -5px;
|
||
|
|
cursor: pointer;
|
||
|
|
display: block;
|
||
|
|
position: absolute;
|
||
|
|
z-index: 2;
|
||
|
|
border: none;
|
||
|
|
}
|
||
|
|
#player2-container .mejs__time-handle-content {
|
||
|
|
top: 0;
|
||
|
|
left: 0;
|
||
|
|
width: 12px;
|
||
|
|
height: 12px;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
|
||
|
|
<body>
|
||
|
|
|
||
|
|
<div id="container">
|
||
|
|
<section>
|
||
|
|
<h1>MediaElement.js</h1>
|
||
|
|
|
||
|
|
<h2><em>audio/video</em> unification library</h2>
|
||
|
|
|
||
|
|
<p><em>MediaElement</em> is a wrapper that mimics the native HTML5 MediaElement syntax (get/set) as a renderer that
|
||
|
|
can handle media from HTML5, YouTube, Vimeo, Soundcloud, Flash, Facebook, and other libraries.</p>
|
||
|
|
|
||
|
|
<p><em>MediaElementPlayer</em> is built off of MediaElement and creates a fully featured player on top of the
|
||
|
|
unified syntax from MediaElement.</p>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<section>
|
||
|
|
<h3>Global Options</h3>
|
||
|
|
<form action="#" method="get">
|
||
|
|
<label>Language <select name="lang">
|
||
|
|
<option value="ca">Català / Catalan (ca)</option>
|
||
|
|
<option value="cs">Čeština / Czech (cs)</option>
|
||
|
|
<option value="de">Deutsch / German (de)</option>
|
||
|
|
<option value="en" selected>English (en)</option>
|
||
|
|
<option value="es">Español / Spanish; Castilian (es)</option>
|
||
|
|
<option value="fa">فارسی / Persian (fa)</option>
|
||
|
|
<option value="fr">Français / French (fr)</option>
|
||
|
|
<option value="hr">Hrvatski / Croatian (hr)</option>
|
||
|
|
<option value="hu">Magyar / Hungarian (hu)</option>
|
||
|
|
<option value="it">Italiano / Italian (it)</option>
|
||
|
|
<option value="ja">日本語 / Japanese (ja)</option>
|
||
|
|
<option value="ko">한국어 / Korean (ko)</option>
|
||
|
|
<option value="nl">Nederlands / Dutch (nl)</option>
|
||
|
|
<option value="pl">Polski / Polish (pl)</option>
|
||
|
|
<option value="pt">Português / Portuguese (pt)</option>
|
||
|
|
<option value="ro">Română / Romanian (ro)</option>
|
||
|
|
<option value="ru">Русский / Russian (ru)</option>
|
||
|
|
<option value="sk">Slovensko / Slovak (sk)</option>
|
||
|
|
<option value="sv">Svenska / Swedish (sv)</option>
|
||
|
|
<option value="uk">Українська / Ukrainian (uk)</option>
|
||
|
|
<option value="zh">繁体中文 / Traditional Chinese (zh-TW)</option>
|
||
|
|
<option value="zh-CN">简体中文 / Simplified Chinese (zh-CN)</option>
|
||
|
|
</select>
|
||
|
|
</label>
|
||
|
|
<label>Stretching (Video Only)<select name="stretching">
|
||
|
|
<option value="auto" selected>Auto (default)</option>
|
||
|
|
<option value="responsive">Responsive</option>
|
||
|
|
<option value="fill" selected>Fill</option>
|
||
|
|
<option value="none" selected>None (original dimensions)</option>
|
||
|
|
</select>
|
||
|
|
</label>
|
||
|
|
</form>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<br>
|
||
|
|
<div class="players" id="player1-container">
|
||
|
|
|
||
|
|
<h3>Video Player</h3>
|
||
|
|
|
||
|
|
<div class="media-wrapper">
|
||
|
|
<video id="player1" width="640" height="360" style="max-width:100%;" poster="http://www.mediaelementjs.com/images/big_buck_bunny.jpg" preload="none" controls playsinline webkit-playsinline>
|
||
|
|
<source src="https://commondatastorage.googleapis.com/gtv-videos-bucket/CastVideos/mp4/BigBuckBunny.mp4" type="video/mp4">
|
||
|
|
<track srclang="en" kind="subtitles" src="mediaelement.vtt">
|
||
|
|
<track srclang="en" kind="chapters" src="chapters.vtt">
|
||
|
|
</video>
|
||
|
|
</div>
|
||
|
|
<br>
|
||
|
|
<div>
|
||
|
|
<label>Sources <select name="sources">
|
||
|
|
<option value="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4">MP4</option>
|
||
|
|
<option value="http://ep-lin-upload.s3.amazonaws.com/vupl_lin/F64/CDF/F64CDF3B0348471E95C244DE2DDDD3F3">MP4 (no ext.)</option>
|
||
|
|
<option value="https://upload.wikimedia.org/wikipedia/commons/2/22/Volcano_Lava_Sample.webm">WebM</option>
|
||
|
|
<!--<option value="rtmp://184.72.239.149/vod/BigBuckBunny_115k.mov">RTMP</option>-->
|
||
|
|
<!--<option value="rtmp://firehose.cul.columbia.edu:1935/vod/mp4:sample.mp4">RTMP</option>-->
|
||
|
|
<option value="http://www.streambox.fr/playlists/test_001/stream.m3u8">HLS</option>
|
||
|
|
<!--<option value="http://www.streambox.fr/playlists/x36xhzz/x36xhzz.m3u8">HLS 2</option>-->
|
||
|
|
<!--<option value="http://dash.edgesuite.net/envivio/EnvivioDash3/manifest.mpd">M(PEG)-DASH 1</option>-->
|
||
|
|
<option value="http://www.bok.net/dash/tears_of_steel/cleartext/stream.mpd">M(PEG)-DASH</option>
|
||
|
|
<option value="http://la2.indexcom.com/me/flv/guqin.flv">FLV</option>
|
||
|
|
<option value="https://www.dailymotion.com/video/x11prnt">DailyMotion</option>
|
||
|
|
<option value="https://www.youtube.com/watch?v=twYp6W6vt2U">YouTube</option>
|
||
|
|
<option value="https://player.vimeo.com/video/108018156?title=0&byline=0&portrait=0&badge=0">Vimeo</option>
|
||
|
|
<option value="https://www.facebook.com/facebook/videos/10155278547321729">Facebook</option>
|
||
|
|
<option value="https://www.twitch.tv/videos/109010497">Twitch</option>
|
||
|
|
</select>
|
||
|
|
</label>
|
||
|
|
</div>
|
||
|
|
<br>
|
||
|
|
<div class="player-info">
|
||
|
|
<h4>Player information</h4>
|
||
|
|
<div id="player1-rendername">
|
||
|
|
<p><strong>Source</strong>: <span class="src"><a href="https://commondatastorage.googleapis.com/gtv-videos-bucket/CastVideos/mp4/BigBuckBunny.mp4" target="_blank">https://commondatastorage.googleapis.com/gtv-videos-bucket/CastVideos/mp4/BigBuckBunny.mp4</a></span></p>
|
||
|
|
<p><strong>Renderer</strong>: <span class="renderer">html5</span></p>
|
||
|
|
<p class="error"></p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<br>
|
||
|
|
<hr>
|
||
|
|
|
||
|
|
<div class="players" id="player2-container">
|
||
|
|
|
||
|
|
<h3>Audio Player</h3>
|
||
|
|
|
||
|
|
<p>By default, time handle element is hidden, but in this demo the following styles were added to display it just for audio:</p>
|
||
|
|
|
||
|
|
<pre><code>
|
||
|
|
#player2-container .mejs__time-buffering,
|
||
|
|
#player2-container .mejs__time-current,
|
||
|
|
#player2-container .mejs__time-handle,
|
||
|
|
#player2-container .mejs__time-loaded,
|
||
|
|
#player2-container .mejs__time-marker,
|
||
|
|
#player2-container .mejs__time-total,
|
||
|
|
#player2-container .mejs__time-hovered {
|
||
|
|
height: 2px;
|
||
|
|
}
|
||
|
|
|
||
|
|
#player2-container .mejs__time-total {
|
||
|
|
margin-top: 9px;
|
||
|
|
}
|
||
|
|
#player2-container .mejs__time-handle {
|
||
|
|
left: -5px;
|
||
|
|
width: 12px;
|
||
|
|
height: 12px;
|
||
|
|
border-radius: 50%;
|
||
|
|
background: #ffffff;
|
||
|
|
top: -5px;
|
||
|
|
cursor: pointer;
|
||
|
|
display: block;
|
||
|
|
position: absolute;
|
||
|
|
z-index: 2;
|
||
|
|
border: none;
|
||
|
|
}
|
||
|
|
#player2-container .mejs__time-handle-content {
|
||
|
|
top: 0;
|
||
|
|
left: 0;
|
||
|
|
width: 12px;
|
||
|
|
height: 12px;
|
||
|
|
}
|
||
|
|
</code></pre>
|
||
|
|
|
||
|
|
<div class="media-wrapper">
|
||
|
|
<audio id="player2" preload="none" controls style="max-width:100%;">
|
||
|
|
<source src="http://www.largesound.com/ashborytour/sound/AshboryBYU.mp3" type="audio/mp3">
|
||
|
|
</audio>
|
||
|
|
</div>
|
||
|
|
<br>
|
||
|
|
<div>
|
||
|
|
<label>Sources <select name="sources">
|
||
|
|
<option value="http://www.largesound.com/ashborytour/sound/AshboryBYU.mp3">MP3</option>
|
||
|
|
<option value="http://www.vorbis.com/music/Hydrate-Kenny_Beltrey.ogg">OGG</option>
|
||
|
|
<option value="http://db3.indexcom.com/bucket/ram/00/05/64k/05.m3u8">HLS</option>
|
||
|
|
<!--<option value="rtmp://s3b78u0kbtx79q.cloudfront.net/cfx/st/mp3:fake_empire-cbr">RTMP</option>-->
|
||
|
|
<!--<option value="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/282715465&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&visual=true">SoundCloud</option>-->
|
||
|
|
<option value="https://api.soundcloud.com/tracks/323195515/stream?client_id=95f22ed54a5c297b1c41f72d713623ef">SoundCloud</option>
|
||
|
|
</select>
|
||
|
|
</label>
|
||
|
|
</div>
|
||
|
|
<br>
|
||
|
|
<div class="player-info">
|
||
|
|
<h4>Player information</h4>
|
||
|
|
<div id="player2-rendername">
|
||
|
|
<p><strong>Source</strong>: <span class="src"><a href="http://www.largesound.com/ashborytour/sound/AshboryBYU.mp3" target="_blank">http://www.largesound.com/ashborytour/sound/AshboryBYU.mp3</a></span></p>
|
||
|
|
<p><strong>Renderer</strong>: <span class="renderer">html5</span></p>
|
||
|
|
<p class="error"></p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<script src="../build/mediaelement-and-player.js"></script>
|
||
|
|
<script src="../build/renderers/dailymotion.js"></script>
|
||
|
|
<script src="../build/renderers/facebook.js"></script>
|
||
|
|
<script src="../build/renderers/soundcloud.js"></script>
|
||
|
|
<script src="../build/renderers/twitch.js"></script>
|
||
|
|
<script src="../build/renderers/vimeo.js"></script>
|
||
|
|
<script src="../build/lang/cs.js"></script>
|
||
|
|
<script src="../build/lang/de.js"></script>
|
||
|
|
<script src="../build/lang/es.js"></script>
|
||
|
|
<script src="../build/lang/fa.js"></script>
|
||
|
|
<script src="../build/lang/fr.js"></script>
|
||
|
|
<script src="../build/lang/hr.js"></script>
|
||
|
|
<script src="../build/lang/hu.js"></script>
|
||
|
|
<script src="../build/lang/it.js"></script>
|
||
|
|
<script src="../build/lang/ja.js"></script>
|
||
|
|
<script src="../build/lang/ko.js"></script>
|
||
|
|
<script src="../build/lang/nl.js"></script>
|
||
|
|
<script src="../build/lang/pl.js"></script>
|
||
|
|
<script src="../build/lang/pt.js"></script>
|
||
|
|
<script src="../build/lang/ro.js"></script>
|
||
|
|
<script src="../build/lang/ru.js"></script>
|
||
|
|
<script src="../build/lang/sk.js"></script>
|
||
|
|
<script src="../build/lang/sv.js"></script>
|
||
|
|
<script src="../build/lang/uk.js"></script>
|
||
|
|
<script src="../build/lang/zh-cn.js"></script>
|
||
|
|
<script src="../build/lang/zh.js"></script>
|
||
|
|
<script src="demo.js"></script>
|
||
|
|
</body>
|
||
|
|
</html>
|