aboutsummaryrefslogtreecommitdiffstats
path: root/demo/index.html
diff options
context:
space:
mode:
Diffstat (limited to 'demo/index.html')
-rw-r--r--demo/index.html203
1 files changed, 107 insertions, 96 deletions
diff --git a/demo/index.html b/demo/index.html
index 5dd88d5e..7af0e372 100644
--- a/demo/index.html
+++ b/demo/index.html
@@ -1,113 +1,124 @@
<!doctype html>
<html lang="en">
- <head>
- <meta charset="utf-8" />
- <title>Plyr - A simple HTML5 media player</title>
- <meta name="description" content="A simple HTML5 media player with custom controls and WebVTT captions.">
- <meta name="author" content="Sam Potts">
- <meta name="viewport" content="width=device-width, initial-scale=1">
- <!-- Styles -->
- <link rel="stylesheet" href="../dist/plyr.css">
+<head>
+ <meta charset="utf-8" />
+ <title>Plyr - A simple HTML5 media player</title>
+ <meta name="description" content="A simple HTML5 media player with custom controls and WebVTT captions.">
+ <meta name="author" content="Sam Potts">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
- <!-- Docs styles -->
- <link rel="stylesheet" href="dist/demo.css">
- </head>
- <body>
- <header>
- <h1>Plyr</h1>
- <p>A simple, accessible HTML5 media player by <a href="https://twitter.com/sam_potts" target="_blank">@sam_potts</a></p>
- <nav>
- <ul>
- <li>
- <a href="https://github.com/sampotts/plyr" target="_blank" class="btn btn--large btn--primary" data-shr-network="github">
- <svg class="icon"><use xlink:href="#icon-github"/></svg>Download 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 btn--large btn--twitter" data-shr-network="twitter">
- <svg class="icon"><use xlink:href="#icon-twitter"/></svg>Tweet
- </a>
- </li>
- </ul>
- </nav>
- </header>
+ <!-- Styles -->
+ <link rel="stylesheet" href="../dist/plyr.css">
- <main role="main" id="main">
- <nav class="btn__bar">
- <ul>
- <li class="active">
- <button type="button" class="btn" 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>
+ <!-- Docs styles -->
+ <link rel="stylesheet" href="dist/demo.css">
+</head>
- <video controls crossorigin playsinline poster="https://cdn.selz.com/plyr/1.5/View_From_A_Blue_Moon_Trailer-HD.jpg" id="player">
- <!-- Video files -->
- <source src="https://cdn.selz.com/plyr/1.5/View_From_A_Blue_Moon_Trailer-HD.mp4" type="video/mp4">
-
- <!-- Text track file -->
- <track kind="captions" label="English" srclang="en" src="webvtt/View_From_A_Blue_Moon_Trailer-HD.en.vtt" default>
- <track kind="captions" label="Français" srclang="fr" src="webvtt/View_From_A_Blue_Moon_Trailer-HD.fr.vtt">
-
- <!-- Fallback for browsers that don't support the <video> element -->
- <a href="https://cdn.selz.com/plyr/1.5/View_From_A_Blue_Moon_Trailer-HD.mp4" download>Download</a>
- </video>
+<body>
+ <header>
+ <h1>Plyr</h1>
+ <p>A simple, accessible HTML5 media player by <a href="https://twitter.com/sam_potts" target="_blank">@sam_potts</a></p>
+ <nav>
+ <ul>
+ <li>
+ <a href="https://github.com/sampotts/plyr" target="_blank" class="btn btn--large btn--primary" data-shr-network="github">
+ <svg class="icon"><use xlink:href="#icon-github"/></svg>Download 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 btn--large btn--twitter" data-shr-network="twitter">
+ <svg class="icon"><use xlink:href="#icon-twitter"/></svg>Tweet
+ </a>
+ </li>
+ </ul>
+ </nav>
+ </header>
+ <main role="main" id="main">
+ <nav class="btn__bar">
<ul>
- <li class="plyr__cite plyr__cite--video" hidden>
- <small>
- <a href="http://viewfromabluemoon.com/" target="_blank">View From A Blue Moon</a> &copy; Brainfarm
- </small>
+ <li class="active">
+ <button type="button" class="btn" data-source="video">Video</button>
</li>
- <li class="plyr__cite plyr__cite--audio" hidden>
- <small>
- <a href="http://www.kishibashi.com/" target="_blank">Kishi Bashi &ndash; &ldquo;It All Began With A Burst&rdquo;</a> &copy; Kishi Bashi
- </small>
+ <li>
+ <button type="button" class="btn" data-source="audio">Audio</button>
</li>
- <li class="plyr__cite plyr__cite--youtube" hidden>
- <small>
- <a href="https://www.youtube.com/watch?v=bTqVqk7FSmY" target="_blank">View From A Blue Moon</a> on
- <span class="color--youtube">
- <svg class="icon">
- <use xlink:href="#icon-youtube"/>
- </svg> YouTube
- </span>
- </small>
+ <li>
+ <button type="button" class="btn btn--youtube" data-source="youtube"><svg class="icon"><use xlink:href="#icon-youtube"/></svg>YouTube</button>
</li>
- <li class="plyr__cite plyr__cite--vimeo" hidden>
- <small>
- <a href="https://vimeo.com/ondemand/viewfromabluemoon4k" target="_blank">View From A Blue Moon</a> on
- <span class="color--vimeo">
- <svg class="icon">
- <use xlink:href="#icon-vimeo"/>
- </svg> Vimeo
- </span>
- </small>
+ <li>
+ <button type="button" class="btn btn--vimeo" data-source="vimeo"><svg class="icon"><use xlink:href="#icon-vimeo"/></svg>Vimeo</button>
</li>
</ul>
- </main>
+ </nav>
+
+ <video controls crossorigin playsinline muted autoplay loop poster="https://cdn.selz.com/plyr/1.5/View_From_A_Blue_Moon_Trailer-HD.jpg" id="player">
+ <!-- Video files -->
+ <source src="https://cdn.selz.com/plyr/1.5/View_From_A_Blue_Moon_Trailer-HD.mp4" type="video/mp4">
+
+ <!-- Text track file -->
+ <track kind="captions" label="English" srclang="en" src="webvtt/View_From_A_Blue_Moon_Trailer-HD.en.vtt" default>
+ <track kind="captions" label="Français" srclang="fr" src="webvtt/View_From_A_Blue_Moon_Trailer-HD.fr.vtt">
+
+ <!-- Fallback for browsers that don't support the <video> element -->
+ <a href="https://cdn.selz.com/plyr/1.5/View_From_A_Blue_Moon_Trailer-HD.mp4" download>Download</a>
+ </video>
+
+ <ul>
+ <li class="plyr__cite plyr__cite--video" hidden>
+ <small>
+ <a href="http://viewfromabluemoon.com/" target="_blank">View From A Blue Moon</a> &copy; Brainfarm
+ </small>
+ </li>
+ <li class="plyr__cite plyr__cite--audio" hidden>
+ <small>
+ <a href="http://www.kishibashi.com/" target="_blank">Kishi Bashi &ndash; &ldquo;It All Began With A Burst&rdquo;</a> &copy; Kishi Bashi
+ </small>
+ </li>
+ <li class="plyr__cite plyr__cite--youtube" hidden>
+ <small>
+ <a href="https://www.youtube.com/watch?v=bTqVqk7FSmY" target="_blank">View From A Blue Moon</a> on
+ <span class="color--youtube">
+ <svg class="icon">
+ <use xlink:href="#icon-youtube"/>
+ </svg> YouTube
+ </span>
+ </small>
+ </li>
+ <li class="plyr__cite plyr__cite--vimeo" hidden>
+ <small>
+ <a href="https://vimeo.com/ondemand/viewfromabluemoon4k" target="_blank">View From A Blue Moon</a> on
+ <span class="color--vimeo">
+ <svg class="icon">
+ <use xlink:href="#icon-vimeo"/>
+ </svg> Vimeo
+ </span>
+ </small>
+ </li>
+ </ul>
+ </main>
+
+ <!-- Plyr core script -->
+ <script src="../src/js/plyr.js"></script>
- <!-- Plyr core script -->
- <script src="../src/js/plyr.js"></script>
+ <!-- Docs script -->
+ <script src="dist/demo.js"></script>
- <!-- Docs script -->
- <script src="dist/demo.js"></script>
+ <!-- Rangetouch to fix <input type="range"> on touch devices (see https://rangetouch.com) -->
+ <script src="https://cdn.rangetouch.com/1.0.1/rangetouch.js" async></script>
- <!-- Rangetouch to fix <input type="range"> on touch devices (see https://rangetouch.com) -->
- <script src="https://cdn.rangetouch.com/1.0.1/rangetouch.js" async></script>
+ <!-- Sharing libary (https://shr.one) -->
+ <script src="https://cdn.shr.one/1.0.1/shr.js"></script>
+ <script>
+ if (window.shr) {
+ window.shr.setup({
+ count: {
+ classname: 'btn__count'
+ }
+ });
+ }
+ </script>
+</body>
- <!-- Sharing libary (https://shr.one) -->
- <script src="https://cdn.shr.one/1.0.1/shr.js"></script>
- <script>if(window.shr) { window.shr.setup({ count: { classname: 'btn__count' } }); }</script>
- </body>
-</html>
+</html> \ No newline at end of file