vue-playlist

Simple vue component that takes an array of videos as a prop and stitches them together/plays seamlessly in a custom video player

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
vue-playlist
2611.1.64 years ago4 years agoMinified + gzip package size for vue-playlist in KB

Readme

vue-playlist
Simple vue component that takes an array of videos as a prop and stitches them together/plays seamlessly in a custom video player
This is currently the only working solution to seamlessly play multiple videos (stitch into one video) in a row with a single working seek bar and controls made with vanilla JS.
Player view

Description

This simple and lightweight Vue.js component allows you to stitch multiple videos together into a one single video with interactive custom controls. It seamlessly plays videos from a given (dynamic) array and creates a single seekbar making it seem to appear as a single video.

Setup/Installation Requirements

To install, from your project directory run ```bash $ npm install vue-playlist --save ```
Import the component in your main.js file ```js import VuePlaylist from 'vue-playlist'; ``` Define an array of video files with this structure ```js playlist:
{bucketRef: 'YOUR_VIDEO_URL'},
{bucketRef: 'YOUR_VIDEO_URL'}
            ]
``` Now you can use it anywhere by simply referencing vue-playlist and passing the array of videos ```js ```
(!) Make sure you have Font Awesome Icons installed/included in your application for the play/pause button to display properly. You can also overright the button text/icon with simple css styles.

Styling

For your convenience and the light weight vue-playlist doesn't come with any css styles. You will need to style the player and the controls to your preference.
To change the width of the player, apply styling to the element with the class .player ```css .player {
width: 700px;
} ```
Here is a simple stylesheet for you to play around with: ```css .player {
max-width: 770px;
} button#playPauseBtn {
padding: 0;
margin-right: 10px;
color: rgba(255,255,255,0.85);
border-radius: 0;
background-color: rgba(0,0,0,0);
}
progress {
position: absolute;
z-index: 2000;
bottom: 0;
width: 99.96%;
background-color: rgba(0,0,0,0.7);
left: 0;
}
input
type=range.slider {
width: 90%;
margin: 10px 0;
background-color: rgba(0,0,0,0.1);
border-radius: 0;
} inputtype=range.slider:focus {
outline: none;
} inputtype=range.slider::-webkit-slider-runnable-track {
width: 100%;
height: 10px;
cursor: pointer;
/* box-shadow: 0px 0px 0.3px #000000, 0px 0px 0px #0d0d0d; */
background: #484d4d;
border-radius: 2.5px;
border: 0px solid #010101;
} inputtype=range.slider::-webkit-slider-thumb {
box-shadow: 0px 0px 1px #730000, 0px 0px 0px #8d0000;
border: 0px solid rgba(108, 202, 149, 0.48);
height: 28px;
width: 13px;
border-radius: 7px;
background: rgba(208, 0, 1, 0.93);
cursor: pointer;
-webkit-appearance: none;
margin-top: -3px;
} inputtype=range.slider:focus::-webkit-slider-runnable-track {
background: #abb1b1;
} inputtype=range.slider::-moz-range-track {
width: 100%;
height: 10px;
cursor: pointer;
background: #484d4d;
border: 0;
} inputtype=range.slider::-moz-range-thumb {
box-shadow: 0px 0px 1px #730000, 0px 0px 0px #8d0000;
border: 0px solid rgba(108, 202, 149, 0.48);
height: 28px;
width: 13px;
border-radius: 7px;
background: rgba(208, 0, 1, 0.93);
cursor: pointer;
} inputtype=range.slider::-ms-track {
width: 100%;
height: 10px;
cursor: pointer;
background: transparent;
border-color: transparent;
color: transparent;
} inputtype=range.slider::-ms-fill-lower {
background: #000000;
border: 0px solid #010101;
border-radius: 5px;
box-shadow: 0px 0px 0.3px #000000, 0px 0px 0px #0d0d0d;
} inputtype=range.slider::-ms-fill-upper {
background: #484d4d;
border: 0px solid #010101;
border-radius: 5px;
box-shadow: 0px 0px 0.3px #000000, 0px 0px 0px #0d0d0d;
} inputtype=range.slider::-ms-thumb {
box-shadow: 0px 0px 1px #730000, 0px 0px 0px #8d0000;
border: 0px solid rgba(108, 202, 149, 0.48);
height: 28px;
width: 13px;
border-radius: 7px;
background: rgba(208, 0, 1, 0.93);
cursor: pointer;
height: 10px;
} inputtype=range.slider:focus::-ms-fill-lower {
background: #484d4d;
} inputtype=range.slider:focus::-ms-fill-upper {
background: #abb1b1;
}
video-players {
position: relative;
height: 390px;
width: 90%;
margin: 0 auto;
} ```

Author

Misha Petrov @ http://fictiontribe.com
Email: uxmishka@gmail.com
Web: https://misha-petrov.com/
GitHub: https://github.com/mishapetrov