<!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="https://cdnjs.cloudflare.com/ajax/libs/mediaelement/4.2.5/mediaelementplayer.css">
<link rel="stylesheet" href="../dist/jump-forward/jump-forward.css">
<link rel="stylesheet" href="../dist/skip-back/skip-back.css">
<link rel="stylesheet" href="../dist/speed/speed.css">
<link rel="stylesheet" href="../dist/chromecast/chromecast.css">
<link rel="stylesheet" href="../dist/context-menu/context-menu.css">
<link rel="stylesheet" href="../dist/playlist/playlist.css">
<style>
#container {
padding: 0 20px 50px;
}
pre {
white-space: pre-wrap;
tab-size: 2;
background: black;
color: white;
}
pre[data-lang]::before {
content: attr(data-lang);
display: block;
background-color: #FFA500;
background-image: -webkit-linear-gradient(top, #FFA500, #D67E21);
background-image: linear-gradient(to bottom, #FFA500, #D67E21);
padding: 10px;
}
code {
font-family: "Courier New", Courier, monospace;
padding: 10px 20px;
display: inline-block;
}
</style>
</head>
<body>
<div id="container">
<section>
<h1>MediaElement.js - Plugins</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>
<p>This demo shows how to setup (and for some, configure) plugins to expand the player.</p>
</section>
<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%;" controls preload="none"
data-cast-title="Big Buck Bunny"
data-cast-description="Big Buck Bunny is now even more a world standard for video standards"
poster="http://mediaelementjs.com/images/big_buck_bunny.jpg">
<source src="https://commondatastorage.googleapis.com/gtv-videos-bucket/CastVideos/mp4/BigBuckBunny.mp4" data-playlist-thumbnail="http://mediaelementjs.com/images/big_buck_bunny.jpg"
title="Big Buck Bunny" data-playlist-description="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vestibulum justo arcu. Vestibulum commodo lacus bibendum sollicitudin commodo." type="video/mp4">
<source src="http://www.streambox.fr/playlists/test_001/stream.m3u8" title="Hls.js Demo" data-playlist-description="Curabitur et malesuada arcu. Praesent hendrerit, quam vel pellentesque aliquam, metus felis mattis velit, quis varius metus diam vitae diam. Integer ante massa, tempor in accumsan eu, sodales in lectus." type="application/x-mpegURL">
<source src="http://la2.indexcom.com/me/flv/guqin.flv" title="Guqin - Ghost" type="video/flv">
</video>
</div>
<h3>Audio Player</h3>
<div class="media-wrapper">
<audio id="player2" preload="none" controls style="max-width:100%;"
data-cast-title="Jazz Example"
data-cast-description="This is a description for audio only"
data-cast-poster="http://mediaelementjs.com/images/big_buck_bunny.jpg">
<source src="http://www.largesound.com/ashborytour/sound/AshboryBYU.mp3" type="audio/mp3" title="Jazz Example" data-playlist-thumbnail="http://mediaelementjs.com/images/big_buck_bunny.jpg" data-playlist-description="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vestibulum justo arcu. Vestibulum commodo lacus bibendum sollicitudin commodo.">
<source src="https://api.soundcloud.com/tracks/323195515/stream?client_id=95f22ed54a5c297b1c41f72d713623ef" type="audio/mp3" title="Soundcloud rocks!" data-playlist-description="Curabitur et malesuada arcu. Praesent hendrerit, quam vel pellentesque aliquam, metus felis mattis velit, quis varius metus diam vitae diam. Integer ante massa, tempor in accumsan eu, sodales in lectus.">
<source src="rtmp://s3b78u0kbtx79q.cloudfront.net/cfx/st/mp3:fake_empire-cbr" type="rtmp/video" title="Playing RTMP audio...">
</audio>
</div>
<h4>Code snippet</h4>
<pre data-lang="Javascript"><code></code></pre>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mediaelement/4.2.5/mediaelement-and-player.js"></script>
<script src="../dist/jump-forward/jump-forward.js"></script>
<script src="../dist/skip-back/skip-back.js"></script>
<script src="../dist/speed/speed.js"></script>
<script src="../dist/chromecast/chromecast.js"></script>
<script src="../dist/context-menu/context-menu.js"></script>
<script src="../dist/playlist/playlist.js"></script>
<script id="mejs-code">
var mediaElements = document.querySelectorAll('video, audio');
for (var i = 0, total = mediaElements.length; i < total; i++) {
var features = ['prevtrack', 'playpause', 'nexttrack', 'current', 'progress', 'duration', 'speed', 'skipback', 'jumpforward',
'markers', 'volume', 'playlist', 'loop', 'shuffle', 'contextmenu'];
// To demonstrate the use of Chromecast with audio
if (mediaElements[i].tagName === 'AUDIO') {
features.push('chromecast');
}
new MediaElementPlayer(mediaElements[i], {
// This is needed to make Jump Forward to work correctly
pluginPath: 'https://cdnjs.cloudflare.com/ajax/libs/mediaelement/4.2.5/',
shimScriptAccess: 'always',
autoRewind: false,
features: features,
currentMessage: 'Now playing:'
});
}
</script>
<script>
document.body.querySelector('code').innerText = document.getElementById('mejs-code').innerText;
</script>
</body>
</html>