diff options
Diffstat (limited to 'docs/index.html')
| -rw-r--r-- | docs/index.html | 77 |
1 files changed, 39 insertions, 38 deletions
diff --git a/docs/index.html b/docs/index.html index 88d3c44b..cd4248a0 100644 --- a/docs/index.html +++ b/docs/index.html @@ -16,7 +16,7 @@ <body> <header> <h1>Plyr</h1> - <p>A simple HTML5 media player with custom controls and WebVTT captions by <a href="https://twitter.com/sam_potts" target="_blank">@sam_potts</a> from <a href="https://twitter.com/selz" target="_blank">@selz</a></p> + <p>A simple, accessible HTML5 media player by <a href="https://twitter.com/sam_potts" target="_blank">@sam_potts</a> from <a href="https://twitter.com/selz" target="_blank">@selz</a></p> <nav> <ul> <li> @@ -36,48 +36,44 @@ <main role="main" id="main"> <nav class="btn-bar nav-panel"> <ul> - <li><a href="#video" class="btn active btn-small">Video</a></li> - <li><a href="#youtube" class="btn btn-small">YouTube</a></li> - <li><a href="#audio" class="btn btn-small">Audio</a></li> + <li> + <button type="button" class="btn active" data-source="video">Video</button> + </li> + <li> + <button type="button" class="btn" data-source="audio">Audio</button> + </li> + <li> + <button type="button" class="btn btn-youtube" data-source="youtube"><svg class="icon"><use xlink:href="#icon-youtube"/></svg>YouTube</button> + </li> + <li> + <button type="button" class="btn btn-vimeo" data-source="vimeo"><svg class="icon"><use xlink:href="#icon-vimeo"/></svg>Vimeo</button> + </li> </ul> </nav> - <div class="panels"> - <section class="panel example-video active" id="video"> - <div class="player"> - <video poster="poster.jpg" controls crossorigin> - <!-- Video files --> - <source src="https://cdn.selz.com/plyr/1.0/movie.mp4" type="video/mp4"> - <source src="https://cdn.selz.com/plyr/1.0/movie.webm" type="video/webm"> + <section> + <div class="plyr"> + <video poster="https://cdn.selz.com/plyr/1.0/poster.jpg" controls crossorigin> + <!-- Video files --> + <source src="https://cdn.selz.com/plyr/1.0/movie.mp4" type="video/mp4"> + <source src="https://cdn.selz.com/plyr/1.0/movie.webm" type="video/webm"> - <!-- Text track file --> - <track kind="captions" label="English" srclang="en" src="https://cdn.selz.com/plyr/1.0/example_captions_en.vtt" default> + + <!-- Text track file --> + <track kind="captions" label="English" srclang="en" src="https://cdn.selz.com/plyr/1.0/example_captions_en.vtt" default> - <!-- Fallback for browsers that don't support the <video> element --> - <a href="https://cdn.selz.com/plyr/1.0/movie.mp4">Download</a> - </video> - </div> - <small>Big Buck Bunny. More info can be found at <a href="https://peach.blender.org" target="_blank">peach.blender.org</a>.</small> - </section> - <section class="panel example-video" id="youtube"> - <div class="player"> - <div data-video-id="Au87oAJ2jeE" data-type="youtube"></div> - </div> - <small>Envato's "Made By" interview of <a href="https://www.youtube.com/watch?v=Au87oAJ2jeE" target="_blank">Dan Cederholm</a> from <a href="https://dribbble.com" target="_blank">Dribbble</a>.</small> - </section> - <section class="panel example-audio" id="audio"> - <div class="player"> - <audio controls> - <!-- Audio files --> - <source src="//cdn.selz.com/plyr/1.0/logistics-96-sample.mp3" type="audio/mp3"> - <source src="//cdn.selz.com/plyr/1.0/logistics-96-sample.ogg" type="audio/ogg"> + + <!-- Fallback for browsers that don't support the <video> element --> + <a href="https://cdn.selz.com/plyr/1.0/movie.mp4">Download</a> + </video> + </div> - <!-- Fallback for browsers that don't support the <audio> element --> - <a href="//cdn.selz.com/plyr/1.0/logistics-96-sample.mp3">Download</a> - </audio> - </div> - <small>"96" by Logistics, which can be purchased from <a href="https://www.hospitalrecords.com/shop/artist/logistics" target="_blank">Hospital Records</a>.</small> - </section> - </div> + <ul> + <li class="cite cite-video"><small><a href="https://www.bigbuckbunny.org" target="_blank">Big Buck Bunny</a> © Copyright 2008, Blender Foundation</small></li> + <li class="cite cite-audio"><small><a href="https://www.hospitalrecords.com/shop/artist/logistics" target="_blank">96 by Logistics</a> © Copyright, Hospital Records</small></li> + <li class="cite cite-youtube"><small><a href="https://www.youtube.com/watch?v=Au87oAJ2jeE" target="_blank">Envato's "Made By" interview of Dan Cederholm</a> on <span class="color-youtube"><svg class="icon"><use xlink:href="#icon-youtube"/></svg>YouTube</span></small> + <li class="cite cite-vimeo"><small><a href="https://vimeo.com/87701971" target="_blank">Yosemite HD II</a> on <span class="color-vimeo"><svg class="icon"><use xlink:href="#icon-vimeo"/></svg>Vimeo</span></small> + </ul> + </section> </main> <!-- Load SVG defs --> @@ -116,6 +112,11 @@ } }); })(); + // Load the plyr sprite + loadSprite(document, "../dist/sprite.svg"); + + // This is for the docs only + loadSprite(document, "dist/sprite.svg"); </script> <!-- Plyr core script --> |