Skip to content

Commit 02e220d

Browse files
author
Philipp
committed
Initial commit
0 parents  commit 02e220d

26 files changed

+11368
-0
lines changed

‎.eslintrc.js

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
module.exports = {
2+
"extends": ["avidofood"],
3+
};

‎.gitattributes

+2
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
# Auto detect text files and perform LF normalization
2+
* text=auto

‎.gitignore

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
node_modules/

‎LICENSE

+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
MIT License
2+
3+
Copyright (c) 2019 Philipp Mochine
4+
5+
Permission is hereby granted, free of charge, to any person obtaining a copy
6+
of this software and associated documentation files (the "Software"), to deal
7+
in the Software without restriction, including without limitation the rights
8+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9+
copies of the Software, and to permit persons to whom the Software is
10+
furnished to do so, subject to the following conditions:
11+
12+
The above copyright notice and this permission notice shall be included in all
13+
copies or substantial portions of the Software.
14+
15+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21+
SOFTWARE.

‎README.md

+142
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,142 @@
1+
# Responive Video Background Player for Vue ⚡️
2+
3+
<a href="https://www.npmjs.com/package/vue-responsive-video-background-player">
4+
<img src="https://img.shields.io/npm/dt/vue-responsive-video-background-player.svg" alt="Downloads">
5+
</a>
6+
<a href="https://www.npmjs.com/package/vue-responsive-video-background-player">
7+
<img src="https://img.shields.io/npm/v/vue-responsive-video-background-player.svg" alt="Version">
8+
</a>
9+
<a href="https://www.npmjs.com/package/vue-responsive-video-background-player">
10+
<img src="https://img.shields.io/npm/l/vue-responsive-video-background-player.svg" alt="License">
11+
</a>
12+
13+
![Laravel Tongue](demo/public/images/roadster.png)
14+
15+
**If you are looking to play videos in the background, you have found the best Vue package for it 😜 (Currently no YouTube videos)**
16+
17+
>***Prerequisites**: Vue 2.x.x
18+
19+
## Installation in 2 Steps
20+
21+
### 1: Add with npm 💻
22+
```bash
23+
npm install vue-responsive-video-background-player
24+
```
25+
26+
### 2a: Install as a component
27+
28+
```javascript
29+
import VideoBackground from 'vue-responsive-video-background-player'
30+
31+
Vue.component('video-background', VideoBackground);
32+
```
33+
### 2b: Install as a plugin
34+
```javascript
35+
import { Plugin } from 'vue-responsive-video-background-player'
36+
37+
Vue.use(Plugin);
38+
```
39+
40+
## Usage - (or to make it runnable 🏃‍♂️)
41+
42+
43+
### Easiest version 🔍
44+
45+
```html
46+
<video-background
47+
src="<your-video-path>.mp4"
48+
style="max-height: 400px; height: 100vh;"
49+
>
50+
<h1 style="color: white;">Hello welcome!</h1>
51+
</video-background>
52+
```
53+
54+
### Advanced version 🌐
55+
56+
```html
57+
<video-background
58+
src="<your-default-video-path>.mp4"
59+
poster="/images/mainfoto.jpg"
60+
:sources="[
61+
{src: '<your-tablet-video-path>.mp4', res: 900, autoplay: true},
62+
{src: '<your-mobile-video-path>.mp4', res: 638, autoplay: true, poster: '<your-mobile-background-image-path>.png'}
63+
]"
64+
style="max-height: 400px; height: 100vh;"
65+
overlay="linear-gradient(45deg,#2a4ae430,#fb949e6b)"
66+
>
67+
<h1 style="color: white;">Hallo welcome!</h1>
68+
</video-background>
69+
```
70+
71+
## Props
72+
73+
This package is for responsive videos depicting different video resolution. Have you ever visited my favorite car company <a href="https://tesla.com">Tesla</a>? Have a look, they use a lot of video background videos and are using different resolutions for each device.
74+
75+
### Props values
76+
77+
- `src` (required: `true`)
78+
79+
This is your path to your video. You can just use this value for showing your video in every resolution.
80+
81+
- `poster` (default: `''`)
82+
83+
This is your first background image that is shown before the video is loaded.
84+
85+
- `sources` (default: `[]`)
86+
87+
This is the main reason for this package. I wanted to have the possibility to change the resolution of the video when the resize event is fired.
88+
89+
To make it work, sources is an array that contains objects. For example:
90+
91+
`[{src: '<your-mobile-video-path>.mp4', res: 638, autoplay: true, poster: '<your-mobile-background-image-path>.png'}]`
92+
93+
To make it work you need at least `src, res, autoplay`.
94+
95+
`poster` is optional.
96+
97+
`res` stand for resolution. This example means that between 0px and 638px of the window's width only the mobile video will be shown. After that your default `src`.
98+
99+
- `autoplay` (default: `true`)
100+
101+
The video is going to be played immediately when the video is ready. If you are setting it to false, you can start the video just by `this.$refs.videobackground.player.play()`. But remember to set `ref=videobackground` to the html tag `<video-background>`, so that it can work.
102+
103+
- `overlay` (default: `''`)
104+
If you love overlays, then copy the overlay from the advanced example.
105+
106+
- `muted` (default: `true`)
107+
108+
Warning. Videos are perhaps not played when unmuted.
109+
110+
- `loop` (default: `true`)
111+
112+
Loops through the video. You can catch the event `ended` to show only the poster.
113+
114+
- `preload` (default: `auto`)
115+
116+
https://www.w3schools.com/tags/att_video_preload.asp
117+
118+
- `objectFit` (default: `cover`)
119+
120+
So the video fits perfectly in the container
121+
122+
## Events
123+
124+
- `ready`: Video is loaded
125+
- `playing`: Video is playing
126+
- `error`: Video error
127+
- `loading`: Video is loading
128+
- `ended`: Video finished, only when `loop` is set to false
129+
130+
131+
## Security
132+
133+
If you discover any security related issues, please don't email me. I'm afraid 😱. [email protected]
134+
135+
## Credits
136+
137+
Now comes the best part! 😍
138+
This package is based on
139+
140+
- https://tesla.com
141+
142+
Oh come on. You read everything?? If you liked it so far, hit the ⭐️ button to give me a 🤩 face.

‎demo/public/images/[email protected]

57.2 KB
Loading

‎demo/public/images/roadster.png

749 KB
Loading

‎demo/public/js/app.js

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

‎demo/public/videos/accessories-hero-desktop.mp4

3.17 MB
Binary file not shown.

‎demo/public/videos/power-hero-mobile.mp4

2.19 MB
Binary file not shown.

‎demo/public/videos/roadster-loop-imperial.mp4

15 MB
Binary file not shown.

‎demo/resources/js/app.js

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
2+
import Vue from 'vue';
3+
import VideoBackground from '../../../src/index';
4+
5+
Vue.component('video-background', VideoBackground);
6+
7+
new Vue({ // eslint-disable-line no-new
8+
el: '#app',
9+
});

‎index.html

+69
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<meta http-equiv="X-UA-Compatible" content="ie=edge">
7+
<title>Vue Responsive Video Background Player</title>
8+
<link href="https://fonts.googleapis.com/css?family=Nunito:200,600" rel="stylesheet">
9+
10+
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
11+
12+
<style>
13+
html, body {
14+
background-color: #000;
15+
font-family: 'Nunito', sans-serif;
16+
}
17+
.video-container{
18+
max-height: 400px;
19+
height: 100vh;
20+
}
21+
</style>
22+
</head>
23+
<body>
24+
<div id="app">
25+
<video-background
26+
class="video-container"
27+
src="demo/public/videos/roadster-loop-imperial.mp4"
28+
overlay="linear-gradient(0deg, rgba(0, 0, 0, 0.88), rgba(251, 148, 158, 0.22), rgba(251, 148, 158, 0.42))"
29+
:sources="[
30+
{src: 'demo/public/videos/accessories-hero-desktop.mp4', res: 991, autoplay: true},
31+
{src: 'demo/public/videos/power-hero-mobile.mp4', res: 575, autoplay: true, poster: 'demo/public/images/[email protected]'}
32+
]"
33+
>
34+
<div class="d-flex justify-content-center align-items-center h-50 px-2">
35+
<h4 class="text-white text-center d-md-none" style="font-weight: 600;">Vue Responsive Background Player</h4>
36+
<h1 class="text-white d-none d-md-block" style="font-weight: 600; ">Vue Responsive Background Player</h1>
37+
</div>
38+
39+
</video-background>
40+
41+
<section class="container text-center mt-3">
42+
<h6 class="text-light">Vue.js component</h6>
43+
<a class="btn btn-danger" href="https://github.com/avidofood/vue-responsive-video-background-player" role="button">Source on GitHub</a>
44+
45+
<div class="social mt-4">
46+
<a href="https://twitter.com/share?ref_src=twsrc%5Etfw" class="twitter-share-button" data-show-count="false">Tweet</a>
47+
<a class="github-button" href="https://github.com/avidofood/vue-responsive-video-background-player" data-show-count="true" aria-label="Star avidofood/vue-responsive-video-background-player on GitHub">Star</a>
48+
</div>
49+
</section>
50+
51+
<section class="container mt-5">
52+
<div class="row">
53+
<div class="col-12 col-md-6">
54+
<h4 class="text-white d-md-none" style="font-weight: 600;">Designed for Vue</h4>
55+
<h2 class="text-white d-none d-md-block" style="font-weight: 600; ">Designed for Vue</h2>
56+
</div>
57+
<div class="col-12 col-md-6">
58+
<p class="text-white">You can even change the video resolution with different breakpoints. Try it out, resize your window!</p>
59+
</div>
60+
</div>
61+
62+
</section>
63+
</div>
64+
65+
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
66+
<script async defer src="https://buttons.github.io/buttons.js"></script>
67+
<script src="demo/public/js/app.js"></script>
68+
</body>
69+
</html>

‎mix-manifest.json

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"/demo/public/js/app.js": "/demo/public/js/app.js"
3+
}

0 commit comments

Comments
 (0)