diff options
Diffstat (limited to 'docs/index.html')
| -rw-r--r-- | docs/index.html | 87 |
1 files changed, 47 insertions, 40 deletions
diff --git a/docs/index.html b/docs/index.html index 10566df5..77502f35 100644 --- a/docs/index.html +++ b/docs/index.html @@ -19,56 +19,63 @@ <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></p> <ul class="actions"> <li> - <a href="https://github.com/selz/plyr" target="_blank" class="btn btn-download">Download on GitHub</a> + <a href="https://github.com/selz/plyr" target="_blank" class="btn btn-primary">Download on GitHub</a> <span class="btn-count js-stargazers-count">…</span> </li> <li> - <a href="https://twitter.com/intent/tweet?text=A+simple+HTML5+media+player+with+custom+controls+and+WebVTT+captions.&url=http%3A%2F%2Fplyr.io&via=Sam_Potts" target="_blank" class="btn btn-twitter js-popup" data-window-height="250" data-window-width="500">Tweet</a> + <a href="https://twitter.com/intent/tweet?text=A+simple+HTML5+media+player+with+custom+controls+and+WebVTT+captions.&url=http%3A%2F%2Fplyr.io&via=Sam_Potts" target="_blank" class="btn js-popup" data-window-height="250" data-window-width="500">Tweet</a> <span class="btn-count js-tweet-count">…</span> </li> </ul> </header> - <main> - <section class="example-video"> - <div class="player"> - <video poster="https://cdn.plyr.io/static/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/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="example-audio"> - <div class="player"> - <audio controls> - <!-- Audio files --> - <source src="https://cdn.selz.com/plyr/1.0/logistics-96-sample.mp3" type="audio/mp3"> - <source src="https://cdn.selz.com/plyr/1.0/logistics-96-sample.ogg" type="audio/ogg"> - - <!-- Fallback for browsers that don't support the <audio> element --> - <a href="https://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> + <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> + </ul> + </nav> + <div class="panels"> + <section class="panel example-video active" id="video"> + <div class="player"> + <video poster="https://cdn.plyr.io/static/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/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 <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> </main> - <footer> - <p>Used by …</p> - <a href="https://selz.com" target="_blank" class="logo"> - <img src="https://d33i624pw6jj68.cloudfront.net/static/img/logos/selz.svg" alt="Selz"> - </a> - </footer> - <!-- Load SVG defs --> <!-- You should bundle all SVG/Icons into one file using a build tool such as gulp and svg store --> <script> |