diff options
Diffstat (limited to 'docs/index.html')
| -rw-r--r-- | docs/index.html | 39 |
1 files changed, 24 insertions, 15 deletions
diff --git a/docs/index.html b/docs/index.html index d6171a78..a7535f3f 100644 --- a/docs/index.html +++ b/docs/index.html @@ -16,16 +16,18 @@ <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></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> - <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> + <a href="https://github.com/selz/plyr" target="_blank" class="btn btn-primary" data-shr-network="github"> + <svg class="icon"><use xlink:href="#icon-github"/></svg>Get it on GitHub + </a> </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 js-popup" data-window-height="250" data-window-width="500">Tweet</a> - <span class="btn-count js-tweet-count">…</span> + <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" data-shr-network="twitter"> + <svg class="icon"><use xlink:href="#icon-twitter"/></svg>Tweet + </a> </li> </ul> </nav> @@ -42,7 +44,7 @@ <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 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"> @@ -66,11 +68,11 @@ <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"> + <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="//cdn.selz.com/plyr/1.0/logistics-96-sample.mp3">Download</a> + <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> @@ -81,28 +83,35 @@ <!-- Load SVG defs --> <!-- You should bundle all SVG/Icons into one file using a build tool such as gulp and svg store --> <script> - (function(d, u){ + function loadSprite(d, u) { var a = new XMLHttpRequest(), - b = d.body; + b = document.body; - // Check for CORS support - // If you're loading from same domain, you can remove the if statement + // If proper CORS supported if("withCredentials" in a) { a.open("GET", u, true); a.send(); a.onload = function(){ - var c = d.createElement("div"); + var c = document.createElement("div"); c.setAttribute("hidden", ""); c.innerHTML = a.responseText; b.insertBefore(c, b.childNodes[0]); } } - })(document, "https://cdn.plyr.io/1.3.5/sprite.svg"); + } + // Load the plyr sprite + loadSprite(document, "../dist/sprite.svg"); + + // This is for the docs only + loadSprite(document, "dist/sprite.svg"); </script> <!-- Plyr core script --> <script src="https://cdn.plyr.io/1.3.5/plyr.js"></script> + <!-- Shr core script --> + <script src="https://cdn.shr.one/0.1.7/shr.js"></script> + <!-- Docs script --> <script src="https://cdn.plyr.io/1.3.5/docs.js"></script> </body> |