Skip to content

Commit c0b334f

Browse files
redxtechredxtech
committedNov 3, 2020
add demo to github pages
·
v7.0.0
1 parent 1fc5d1b commit c0b334f

File tree

2 files changed

+163
-0
lines changed

2 files changed

+163
-0
lines changed
 

‎README.md

+4
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,10 @@ It uses [plyr](https://plyr.io) by [sampotts](https://github.com/sampotts) for t
99

1010
Supported player types: HTML5 video, HTML5 audio, YouTube, and Vimeo.
1111

12+
### Demo
13+
A demo of the components (equivalent to the html example include here) can be found at
14+
[redxtech.github.io/vue-plyr](https://redxtech.github.io/vue-plyr/).
15+
1216
## Installation
1317
```bash
1418
yarn add vue-plyr # or npm i vue-plyr

‎docs/index.html

+159
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,159 @@
1+
<!DOCTYPE html>
2+
<!--suppress HtmlUnknownTag,TypeScriptUMDGlobal,JSUnresolvedFunction -->
3+
<html>
4+
<head>
5+
<title>vue-plyr-html</title>
6+
<style>
7+
@import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro&display=swap');
8+
9+
.demo {
10+
font-family: 'Source Sans Pro', 'Helvetica Neue', Arial, sans-serif;
11+
-webkit-font-smoothing: antialiased;
12+
-moz-osx-font-smoothing: grayscale;
13+
color: #273849;
14+
margin: 0 auto;
15+
padding: 0 2rem;
16+
}
17+
18+
.components > div {
19+
margin: 2rem 0;
20+
}
21+
22+
h1 {
23+
font-size: 3rem;
24+
margin-bottom: 0;
25+
}
26+
27+
h3 {
28+
margin-top: 0;
29+
margin-bottom: 2rem;
30+
}
31+
</style>
32+
<link rel="stylesheet" href="https://unpkg.com/vue-plyr/dist/vue-plyr.css">
33+
</head>
34+
<body>
35+
<div id="app">
36+
<div class="demo">
37+
<h1>vue-plyr demo.</h1>
38+
<h3>
39+
sources can be found at
40+
<a href="https://github.com/redxtech/vue-plyr/tree/master/examples">
41+
github.com/redxtech/vue-plyr</a
42+
>.
43+
</h3>
44+
<div class="components">
45+
<div>
46+
<h2>video player</h2>
47+
<vue-plyr :options="options">
48+
<video
49+
controls
50+
crossorigin
51+
playsinline
52+
data-poster="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.jpg"
53+
>
54+
<source
55+
size="576"
56+
src="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-576p.mp4"
57+
type="video/mp4"
58+
/>
59+
<source
60+
size="720"
61+
src="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-720p.mp4"
62+
type="video/mp4"
63+
/>
64+
<source
65+
size="1080"
66+
src="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-1080p.mp4"
67+
type="video/mp4"
68+
/>
69+
<track
70+
default
71+
kind="captions"
72+
label="English captions"
73+
src="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.en.vtt"
74+
srclang="en"
75+
/>
76+
<track
77+
kind="captions"
78+
label="Légendes en français"
79+
src="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.fr.vtt"
80+
srclang="fr"
81+
/>
82+
<a
83+
download=""
84+
href="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-1080p.mp4"
85+
>
86+
Download
87+
</a>
88+
</video>
89+
</vue-plyr>
90+
</div>
91+
<div>
92+
<h2>audio player</h2>
93+
<vue-plyr>
94+
<audio controls crossorigin playsinline>
95+
<source
96+
src="https://cdn.plyr.io/static/demo/Kishi_Bashi_-_It_All_Began_With_a_Burst.mp3"
97+
type="audio/mp3"
98+
/>
99+
<source
100+
src="https://cdn.plyr.io/static/demo/Kishi_Bashi_-_It_All_Began_With_a_Burst.ogg"
101+
type="audio/ogg"
102+
/>
103+
</audio>
104+
</vue-plyr>
105+
</div>
106+
<div>
107+
<h2>youtube embed</h2>
108+
<vue-plyr>
109+
<div class="plyr__video-embed">
110+
<iframe
111+
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"
112+
allowfullscreen
113+
allowtransparency
114+
allow="autoplay"
115+
></iframe>
116+
</div>
117+
</vue-plyr>
118+
</div>
119+
<div>
120+
<h2>youtube (not progressive-enhancement)</h2>
121+
<vue-plyr>
122+
<div data-plyr-provider="youtube" data-plyr-embed-id="bTqVqk7FSmY"></div>
123+
</vue-plyr>
124+
</div>
125+
<div>
126+
<h2>vimeo embed</h2>
127+
<vue-plyr>
128+
<div class="plyr__video-embed">
129+
<iframe
130+
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"
131+
allowfullscreen
132+
allowtransparency
133+
allow="autoplay"
134+
></iframe>
135+
</div>
136+
</vue-plyr>
137+
</div>
138+
<div>
139+
<h2>vimeo (not progressive-enhancement)</h2>
140+
<vue-plyr>
141+
<div data-plyr-provider="vimeo" data-plyr-embed-id="143418951"></div>
142+
</vue-plyr>
143+
</div>
144+
</div>
145+
</div>
146+
</div>
147+
<script src="https://unpkg.com/vue@next"></script>
148+
<script src="https://unpkg.com/vue-plyr"></script>
149+
<script>
150+
Vue.createApp({
151+
data() {
152+
return {
153+
options: { quality: { default: '1080p' } }
154+
}
155+
}
156+
}).use(VuePlyr).mount('#app')
157+
</script>
158+
</body>
159+
</html>

0 commit comments

Comments
 (0)
Please sign in to comment.