Skip to content

Commit

Permalink
update html example
Browse files Browse the repository at this point in the history
  • Loading branch information
@redxtech
redxtech committed Nov 3, 2020
1 parent c972d7c commit a80bb30
Show file tree
Hide file tree
Showing 2 changed files with 140 additions and 114 deletions.
241 changes: 134 additions & 107 deletions examples/html/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,129 +4,156 @@
<head>
<title>vue-plyr-html</title>
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
@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;
text-align: center;
color: #2c3e50;
color: #273849;
margin: 0 auto;
padding: 0 2rem;
}

.components > div {
margin: 2rem 0;
}

h1 {
margin: 3rem;
font-size: 3rem;
margin-bottom: 0;
}

h3 {
margin-top: 0;
margin-bottom: 2rem;
}
</style>
<link rel="stylesheet" href="./node_modules/vue-plyr/dist/vue-plyr.css">
</head>
<body>
<div id="app">
<h1>Video Player</h1>
<vue-plyr>
<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>

<h1>Audio Player</h1>
<vue-plyr>
<audio
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>

<h1>YouTube</h1>
<vue-plyr>
<div class="plyr__video-embed">
<iframe
allow="autoplay"
allowfullscreen
allowtransparency
src="https://www.youtube.com/embed/bTqVqk7FSmY?iv_load_policy=3&modestbranding=1&playsinline=1&showinfo=0&rel=0&enablejsapi=1"
></iframe>
</div>
</vue-plyr>

<h1>Vimeo</h1>
<vue-plyr>
<div class="plyr__video-embed">
<iframe
allow="autoplay"
allowfullscreen
allowtransparency
src="https://player.vimeo.com/video/76979871?loop=false&byline=false&portrait=false&title=false&speed=true&transparent=0&gesture=media"
></iframe>
<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>
</vue-plyr>

<h1>YouTube (Not Progressive Enhancement)</h1>
<vue-plyr>
<div
data-plyr-embed-id="bTqVqk7FSmY"
data-plyr-provider="youtube"
></div>
</vue-plyr>

<h1>Vimeo (Not Progressive Enhancement)</h1>
<vue-plyr>
<div
data-plyr-embed-id="76979871"
data-plyr-provider="vimeo"
></div>
</vue-plyr>
</div>
</div>
<script src="https://unpkg.com/vue@next"></script>
<script src="./node_modules/vue-plyr/dist/vue-plyr.min.js"></script>
<script>
Vue.createApp({}).use(VuePlyr, { plyr: { quality: { default: '1080p' }}}).mount('#app')
Vue.createApp({
data() {
return {
options: { quality: { default: '1080p' } }
}
}
}).use(VuePlyr).mount('#app')
</script>
</body>
</html>
13 changes: 6 additions & 7 deletions examples/html/yarn.lock
View file
Original file line number Diff line number Diff line change
Expand Up @@ -368,16 +368,15 @@ [email protected]:
resolved "https://registry.yarnpkg.com/path-to-regexp/-/path-to-regexp-2.2.1.tgz#90b617025a16381a879bc82a38d4e8bdeb2bcf45"
integrity sha512-gu9bD6Ta5bwGrrU8muHzVOBFFREpp2iRkVfhBJahwJ6p6Xw20SjT0MxLnwkjOibQmGSYhiUnf2FLe7k+jcFmGQ==

plyr@^3.6.2:
"plyr@github:sampotts/plyr#develop":
version "3.6.2"
resolved "https://registry.yarnpkg.com/plyr/-/plyr-3.6.2.tgz#5a55b608acd161262de1cc75ca843aa64355a051"
integrity sha512-CjAhRDtzyGqMRte9Phj4FsZFegS9VxW60boOhQsAnZHuiFG3yVBRcodWsGZ79GuXHHelc4DxMHO+z0QggY+9qQ==
resolved "https://codeload.github.com/sampotts/plyr/tar.gz/5c02205a4f9955f1b8d44f6cc3f9f40f2cc96572"
dependencies:
core-js "^3.6.5"
custom-event-polyfill "^1.0.7"
loadjs "^4.2.0"
rangetouch "^2.0.1"
url-polyfill "^1.1.8"
url-polyfill "^1.1.11"

pseudomap@^1.0.2:
version "1.0.2"
Expand Down Expand Up @@ -539,7 +538,7 @@ uri-js@^4.2.2:
dependencies:
punycode "^2.1.0"

url-polyfill@^1.1.8:
url-polyfill@^1.1.11:
version "1.1.12"
resolved "https://registry.yarnpkg.com/url-polyfill/-/url-polyfill-1.1.12.tgz#6cdaa17f6b022841b3aec0bf8dbd87ac0cd33331"
integrity sha512-mYFmBHCapZjtcNHW0MDq9967t+z4Dmg5CJ0KqysK3+ZbyoNOWQHksGCTWwDhxGXllkWlOc10Xfko6v4a3ucM6A==
Expand All @@ -550,9 +549,9 @@ vary@~1.1.2:
integrity sha1-IpnwLG3tMNSllhsLn3RSShj2NPw=

"vue-plyr@file:../..":
version "7.0.0"
version "7.0.0-beta.1"
dependencies:
plyr "^3.6.2"
plyr "github:sampotts/plyr#develop"
vue "^2.6.12"

vue@^2.6.12:
Expand Down

0 comments on commit a80bb30

Please sign in to comment.