add demo to github pages

redxtech · Nov 3, 2020 · c0b334f · c0b334f
1 parent 1fc5d1b
commit c0b334f
Show file tree

Hide file tree

Showing 2 changed files with 163 additions and 0 deletions.
diff --git a/README.md b/README.md
@@ -9,6 +9,10 @@ It uses [plyr](https://plyr.io) by [sampotts](https://github.com/sampotts) for t
 
 Supported player types: HTML5 video, HTML5 audio, YouTube, and Vimeo.
 
+### Demo
+A demo of the components (equivalent to the html example include here) can be found at
+[redxtech.github.io/vue-plyr](https://redxtech.github.io/vue-plyr/).
+
 ## Installation
 ```bash
 yarn add vue-plyr # or npm i vue-plyr

diff --git a/docs/index.html b/docs/index.html
@@ -0,0 +1,159 @@
+<!DOCTYPE html>
+<!--suppress HtmlUnknownTag,TypeScriptUMDGlobal,JSUnresolvedFunction -->
+<html>
+<head>
+  <title>vue-plyr-html</title>
+  <style>
+      @import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro&display=swap');
+
+      .demo {
+          font-family: 'Source Sans Pro', 'Helvetica Neue', Arial, sans-serif;
+          -webkit-font-smoothing: antialiased;
+          -moz-osx-font-smoothing: grayscale;
+          color: #273849;
+          margin: 0 auto;
+          padding: 0 2rem;
+      }
+
+      .components > div {
+          margin: 2rem 0;
+      }
+
+      h1 {
+          font-size: 3rem;
+          margin-bottom: 0;
+      }
+
+      h3 {
+          margin-top: 0;
+          margin-bottom: 2rem;
+      }
+  </style>
+  <link rel="stylesheet" href="https://unpkg.com/vue-plyr/dist/vue-plyr.css">
+</head>
+<body>
+<div id="app">
+  <div class="demo">
+    <h1>vue-plyr demo.</h1>
+    <h3>
+      sources can be found at
+      <a href="https://github.com/redxtech/vue-plyr/tree/master/examples">
+        github.com/redxtech/vue-plyr</a
+      >.
+    </h3>
+    <div class="components">
+      <div>
+        <h2>video player</h2>
+        <vue-plyr :options="options">
+          <video
+            controls
+            crossorigin
+            playsinline
+            data-poster="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.jpg"
+          >
+            <source
+              size="576"
+              src="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-576p.mp4"
+              type="video/mp4"
+            />
+            <source
+              size="720"
+              src="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-720p.mp4"
+              type="video/mp4"
+            />
+            <source
+              size="1080"
+              src="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-1080p.mp4"
+              type="video/mp4"
+            />
+            <track
+              default
+              kind="captions"
+              label="English captions"
+              src="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.en.vtt"
+              srclang="en"
+            />
+            <track
+              kind="captions"
+              label="Légendes en français"
+              src="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.fr.vtt"
+              srclang="fr"
+            />
+            <a
+              download=""
+              href="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-1080p.mp4"
+            >
+              Download
+            </a>
+          </video>
+        </vue-plyr>
+      </div>
+      <div>
+        <h2>audio player</h2>
+        <vue-plyr>
+          <audio controls crossorigin playsinline>
+            <source
+              src="https://cdn.plyr.io/static/demo/Kishi_Bashi_-_It_All_Began_With_a_Burst.mp3"
+              type="audio/mp3"
+            />
+            <source
+              src="https://cdn.plyr.io/static/demo/Kishi_Bashi_-_It_All_Began_With_a_Burst.ogg"
+              type="audio/ogg"
+            />
+          </audio>
+        </vue-plyr>
+      </div>
+      <div>
+        <h2>youtube embed</h2>
+        <vue-plyr>
+          <div class="plyr__video-embed">
+            <iframe
+              src="https://www.youtube.com/embed/bTqVqk7FSmY?amp;iv_load_policy=3&amp;modestbranding=1&amp;playsinline=1&amp;showinfo=0&amp;rel=0&amp;enablejsapi=1"
+              allowfullscreen
+              allowtransparency
+              allow="autoplay"
+            ></iframe>
+          </div>
+        </vue-plyr>
+      </div>
+      <div>
+        <h2>youtube (not progressive-enhancement)</h2>
+        <vue-plyr>
+          <div data-plyr-provider="youtube" data-plyr-embed-id="bTqVqk7FSmY"></div>
+        </vue-plyr>
+      </div>
+      <div>
+        <h2>vimeo embed</h2>
+        <vue-plyr>
+          <div class="plyr__video-embed">
+            <iframe
+              src="https://player.vimeo.com/video/143418951?loop=false&amp;byline=false&amp;portrait=false&amp;title=false&amp;speed=true&amp;transparent=0&amp;gesture=media"
+              allowfullscreen
+              allowtransparency
+              allow="autoplay"
+            ></iframe>
+          </div>
+        </vue-plyr>
+      </div>
+      <div>
+        <h2>vimeo (not progressive-enhancement)</h2>
+        <vue-plyr>
+          <div data-plyr-provider="vimeo" data-plyr-embed-id="143418951"></div>
+        </vue-plyr>
+      </div>
+    </div>
+  </div>
+</div>
+<script src="https://unpkg.com/vue@next"></script>
+<script src="https://unpkg.com/vue-plyr"></script>
+<script>
+  Vue.createApp({
+    data() {
+      return {
+        options: { quality: { default: '1080p' } }
+      }
+    }
+  }).use(VuePlyr).mount('#app')
+</script>
+</body>
+</html>