| 1 | <!DOCTYPE html>
|
|---|
| 2 | <!--
|
|---|
| 3 | // Sample Media Player using HTML5's Media API
|
|---|
| 4 | //
|
|---|
| 5 | // Ian Devlin (c) 2012
|
|---|
| 6 | // http://iandevlin.com
|
|---|
| 7 | // http://twitter.com/iandevlin
|
|---|
| 8 | //
|
|---|
| 9 | // This was written as part of an article for the February 2013 edition of .net magazine (http://netmagazine.com/)
|
|---|
| 10 | -->
|
|---|
| 11 | <html lang='en'>
|
|---|
| 12 | <head>
|
|---|
| 13 | <meta charset='utf-8' />
|
|---|
| 14 | <title>Sample Media Player using HTML5's Media API</title>
|
|---|
| 15 | <link href='media-player.css' rel='stylesheet' />
|
|---|
| 16 | <script src='media-player.js'></script>
|
|---|
| 17 | </head>
|
|---|
| 18 | <body>
|
|---|
| 19 | <h1>Sample Media Player using HTML5's Media API</h1>
|
|---|
| 20 | <div id='media-player'>
|
|---|
| 21 | <video id='media-video' controls>
|
|---|
| 22 | <source src='parrots.mp4' type='video/mp4'>
|
|---|
| 23 | <source src='parrots.webm' type='video/webm'>
|
|---|
| 24 | </video>
|
|---|
| 25 | <div id='media-controls'>
|
|---|
| 26 | <progress id='progress-bar' min='0' max='100' value='0'>0% played</progress>
|
|---|
| 27 | <button id='replay-button' class='replay' title='replay' onclick='replayMedia();'>Replay</button>
|
|---|
| 28 | <button id='play-pause-button' class='play' title='play' onclick='togglePlayPause();'>Play</button>
|
|---|
| 29 | <button id='stop-button' class='stop' title='stop' onclick='stopPlayer();'>Stop</button>
|
|---|
| 30 | <button id='volume-inc-button' class='volume-plus' title='increase volume' onclick='changeVolume("+");'>Increase volume</button>
|
|---|
| 31 | <button id='volume-dec-button' class='volume-minus' title='decrease volume' onclick='changeVolume("-");'>Decrease volume</button>
|
|---|
| 32 | <button id='mute-button' class='mute' title='mute' onclick='toggleMute("true");'>Mute</button>
|
|---|
| 33 | </div>
|
|---|
| 34 | <div id='media-play-list'>
|
|---|
| 35 | <h2>Play list</h2>
|
|---|
| 36 | <ul id='play-list'>
|
|---|
| 37 | <li><span class='play-item' onclick='loadVideo("parrots.webm", "parrots.mp4");'>Parrots</span></li>
|
|---|
| 38 | <li><span class='play-item' onclick='loadVideo("paddle-wheel.webm", "paddle-wheel.mp4");'>Paddle Steamer Wheel</span></li>
|
|---|
| 39 | <li><span class='play-item' onclick='loadVideo("grass.webm", "grass.mp4");'>Grass</span></li>
|
|---|
| 40 | </ul>
|
|---|
| 41 | </div>
|
|---|
| 42 | </div>
|
|---|
| 43 | </body>
|
|---|
| 44 | </html> |
|---|
