Skip to content

Commit 30a52a6

Browse files
algoz098algoz098
committed
Examples with gh-pages
1 parent 2428d9c commit 30a52a6

11 files changed

+305
-48
lines changed

‎README.md

+2
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,8 @@ This is a html5 video component made in VueJS with to quickly add videos with pl
2222
- 100% vue
2323
- no third parties js libs
2424

25+
### Examples
26+
https://algoz098.github.io/vue-player/
2527

2628
## Usage & Guide
2729

‎deployGhPages.js

-5
Original file line numberDiff line numberDiff line change
@@ -7,8 +7,6 @@ function execute (command) {
77
exec(command,
88
function (error, stdout, stderr) {
99
if (error) {
10-
console.log("error1", error)
11-
console.log("stderr", stderr)
1210
reject(stderr)
1311
}
1412

@@ -19,9 +17,6 @@ function execute (command) {
1917
}
2018

2119
async function start () {
22-
// console.log('commitMessage', commitMessage)
23-
// return
24-
2520
try {
2621
console.log('Building...')
2722
await execute('npm run build')

‎package-lock.json

+7-1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

+3-2
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,8 @@
55
"scripts": {
66
"serve": "vue-cli-service serve",
77
"build": "vue-cli-service build",
8-
"lint": "vue-cli-service lint",
9-
"deploy:gh-pages": "node deployGhPages.js",
8+
"lint": "vue-cli-service lint",
9+
"deploy:gh-pages": "node deployGhPages.js",
1010
"docs:generate": "vuedoc.md.cmd ./src/components/player.vue --output PLAYER.md",
1111
"test:unit": "vue-cli-service test:unit"
1212
},
@@ -25,6 +25,7 @@
2525
"babel-core": "7.0.0-bridge.0",
2626
"babel-eslint": "^10.0.1",
2727
"babel-jest": "^23.6.0",
28+
"bulma": "^0.7.5",
2829
"eslint": "^5.16.0",
2930
"eslint-plugin-vue": "^5.0.0",
3031
"iphone-inline-video": "^2.2.2",

‎src/App.vue

+75-40
Original file line numberDiff line numberDiff line change
@@ -1,48 +1,53 @@
11
<template>
2-
<div id="app">
3-
<vue-player
4-
src="http://techslides.com/demos/sample-videos/small.mp4"
5-
videoPlaceholderSrc="http://techslides.com/demos/sample-videos/small.mp4"
6-
poster="https://via.placeholder.com/150"
7-
title="this is a title"
8-
playsinline
9-
preview-on-mouse
10-
v-model="playing"
11-
>
12-
</vue-player>
13-
14-
<ul>
15-
<li>
16-
src-index: {{srcIndex}}
17-
</li>
18-
19-
<li @click="playing = !playing">
20-
playing: {{playing}}
21-
</li>
22-
23-
<li @click="controls = !controls">
24-
controls: {{controls}}
25-
</li>
26-
27-
<li @click="fullscreen = !fullscreen">
28-
fullscreen: {{fullscreen}}
29-
</li>
30-
31-
<li>
32-
volume: <input type="range" min="0" max="1" step="0.01" :value="volume" @input="setVolume" /> {{volume}}
33-
</li>
34-
</ul>
35-
</div>
2+
<div id="app">
3+
<div class="columns is-centered">
4+
<div class="column is-half">
5+
<intro />
6+
7+
<div class="container">
8+
<h2 class="title ">Instalation</h2>
9+
10+
<p class="subtitle">
11+
Click <a href="https://github.com/algoz098/vue-player#usage--guide">here</a>
12+
</p>
13+
</div>
14+
15+
<basic-player />
16+
17+
<minimum-player />
18+
19+
<preview-player />
20+
21+
<poster-player />
22+
23+
<div class="container">
24+
<h2 class="title ">More</h2>
25+
26+
<p class="subtitle">
27+
For more details, events, and props see <a href="https://github.com/algoz098/vue-player/blob/master/PLAYER.md">this</a>
28+
</p>
29+
</div>
30+
</div>
31+
</div>
32+
</div>
3633
</template>
3734

3835
<script>
39-
import vuePlayer from './components/player.vue'
36+
import intro from './showcase/intro.vue'
37+
import basicPlayer from './showcase/basicPlayer.vue'
38+
import minimumPlayer from './showcase/minimumPlayer.vue'
39+
import previewPlayer from './showcase/previewPlayer.vue'
40+
import posterPlayer from './showcase/posterPlayer.vue'
4041
4142
export default {
4243
name: 'app',
4344
4445
components: {
45-
vuePlayer
46+
intro,
47+
basicPlayer,
48+
minimumPlayer,
49+
previewPlayer,
50+
posterPlayer
4651
},
4752
4853
data () {
@@ -64,12 +69,42 @@ export default {
6469
</script>
6570

6671
<style>
72+
@import url('https://fonts.googleapis.com/css?family=Montserrat&display=swap');
6773
body {
68-
margin: 10px;
69-
max-width: 50vw;
74+
margin-top: 0;
75+
margin-left: 17vw;
76+
margin-right: 17vw;
77+
font-family: 'Montserrat', sans-serif;
78+
}
79+
80+
.title {
81+
margin-bottom: 5px;
82+
font-size: 2.5rem;
83+
}
84+
85+
.subtitle {
86+
margin-top: 0;
87+
font-size: 1.5rem;
88+
max-width: 900px;
89+
}
90+
91+
.flex {
92+
display: flex;
93+
}
94+
95+
.flex > div:not(:last-child) {
96+
padding-right: 10px;
97+
padding-left: 0px;
98+
}
99+
100+
.flex > div:not(:first-child) {
101+
padding-right: 0px;
102+
padding-left: 10px;
70103
}
71104
72-
#app {
73-
margin: 0;
105+
.highlight {
106+
background-color: rgb(209, 209, 209);
107+
padding: 5px 10px;
108+
border-radius: 5px;
74109
}
75110
</style>

‎src/components/player.vue

+1
Original file line numberDiff line numberDiff line change
@@ -637,6 +637,7 @@ export default {
637637
letter-spacing: 1px;
638638
position: absolute;
639639
top: 0;
640+
color: white;
640641
background-image: linear-gradient(rgba(0, 0, 0, 0.300), rgba(0, 0, 0, 0));
641642
}
642643

‎src/showcase/basicPlayer.vue

+58
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
<template>
2+
<section class="section">
3+
<div class="container">
4+
<h2 class="title ">Basic setup</h2>
5+
6+
<p class="subtitle">
7+
With a `poster` image showing and alterates to a video teaser (video-placeholder-src) when the mouse is over and a little title
8+
</p>
9+
</div>
10+
11+
<div class="flex">
12+
<div>
13+
<h3 class="subtitle">Example</h3>
14+
15+
<vue-player
16+
src="http://techslides.com/demos/sample-videos/small.mp4"
17+
video-placeholder-src="http://techslides.com/demos/sample-videos/small.mp4"
18+
poster="https://imgplaceholder.com/420x320?text=put+the+mouse+on+me"
19+
title="I'm a title for this video"
20+
playsinline
21+
preview-on-mouse
22+
>
23+
</vue-player>
24+
</div>
25+
26+
<div>
27+
<h3 class="subtitle">Code</h3>
28+
29+
<div class="highlight">
30+
<pre><code class="language-html" data-lang="html" >{{html}}</code></pre>
31+
</div>
32+
</div>
33+
</div>
34+
</section>
35+
</template>
36+
37+
<script>
38+
import vuePlayer from '../components/player.vue'
39+
40+
export default {
41+
components: {
42+
vuePlayer,
43+
},
44+
45+
data () {
46+
return {
47+
html: `<vue-player
48+
src="http://techslides.com/demos/sample-videos/small.mp4"
49+
video-placeholder-src="http://techslides.com/demos/sample-videos/small.mp4"
50+
poster="https://imgplaceholder.com/420x320?text=Put+the+mouse+on+me"
51+
title="I'm a title for this video"
52+
playsinline
53+
preview-on-mouse
54+
></vue-player>`
55+
}
56+
}
57+
}
58+
</script>

‎src/showcase/intro.vue

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
<template>
2+
<section class="section ">
3+
<h1 class="title">
4+
Vue-player
5+
</h1>
6+
7+
<p class="subtitle">
8+
This is a html5 video component made in VueJS with to quickly add videos with placeholders and intros.
9+
</p>
10+
</section>
11+
</template>

‎src/showcase/minimumPlayer.vue

+48
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
<template>
2+
<section class="section">
3+
<div class="container">
4+
<h2 class="title ">Minimum setup</h2>
5+
6+
<p class="subtitle">
7+
The minimum you need to use it
8+
</p>
9+
</div>
10+
11+
<div class="flex">
12+
<div>
13+
<h3 class="subtitle">Example</h3>
14+
15+
<vue-player
16+
src="http://techslides.com/demos/sample-videos/small.mp4"
17+
>
18+
</vue-player>
19+
</div>
20+
21+
<div>
22+
<h3 class="subtitle">Code</h3>
23+
24+
<div class="highlight">
25+
<pre><code class="language-html" data-lang="html" >{{html}}</code></pre>
26+
</div>
27+
</div>
28+
</div>
29+
</section>
30+
</template>
31+
32+
<script>
33+
import vuePlayer from '../components/player.vue'
34+
35+
export default {
36+
components: {
37+
vuePlayer,
38+
},
39+
40+
data () {
41+
return {
42+
html: `<vue-player
43+
src="http://techslides.com/demos/sample-videos/small.mp4"
44+
></vue-player>`
45+
}
46+
}
47+
}
48+
</script>

‎src/showcase/posterPlayer.vue

+50
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
<template>
2+
<section class="section">
3+
<div class="container">
4+
<h2 class="title ">Poster video setup</h2>
5+
6+
<p class="subtitle">
7+
This will show a image util the player starts
8+
</p>
9+
</div>
10+
11+
<div class="flex">
12+
<div>
13+
<h3 class="subtitle">Example</h3>
14+
15+
<vue-player
16+
src="http://techslides.com/demos/sample-videos/small.mp4"
17+
poster="https://imgplaceholder.com/420x320?text=Im+just+a+image"
18+
>
19+
</vue-player>
20+
</div>
21+
22+
<div>
23+
<h3 class="subtitle">Code</h3>
24+
25+
<div class="highlight">
26+
<pre><code class="language-html" data-lang="html" >{{html}}</code></pre>
27+
</div>
28+
</div>
29+
</div>
30+
</section>
31+
</template>
32+
33+
<script>
34+
import vuePlayer from '../components/player.vue'
35+
36+
export default {
37+
components: {
38+
vuePlayer,
39+
},
40+
41+
data () {
42+
return {
43+
html: `<vue-player
44+
src="http://techslides.com/demos/sample-videos/small.mp4"
45+
poster="https://imgplaceholder.com/420x320?text=Put+the+mouse+on+me"
46+
></vue-player>`
47+
}
48+
}
49+
}
50+
</script>

0 commit comments

Comments
 (0)