video_player_vue
Description
Component for Vue:
Video Player with castom control panel and playlist.
Save progress of watching a video, volum and video playback speed in localStore
Project setup
npm install video_player_vue
Usage
<VideoPlayer :arr_videos="arr_videos"/>
import VideoPlayer from 'video_player_vue'
// require style
import 'video_player_vue/dist/video_player_vue.css'
export default {
components: {
VideoPlayer
},
data: () => ({
arr_videos:[
{
id:1,
name:'video1',
src:'./vid1.mp4',
time:294
},
{
id:2,
name:'video2',
src:'./vid2.mp4',
time:341
}
]
}),
}
add Bootstrap css in index.html
<!-- require bootstrap style -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
API
video_player_vue
props
arr_videos
[ Array, default: [] ] (optional)
:array of videos it should be Object (required)
id
Number (required, unique) : to correctly maintain the progress of watching a video
name
String (required) : will be displayed in the playlist
src
String (required) : path or API link on video
time
Number (required) : video time, in seconds
from
Number (optional, default: 0 or variable from localStore) : time from which to start the video, in seconds
poster
String, default:'' (optional) : url to picture
width
Number, default: 60% from screen.width if(screen.width<600) screen.width (optional) : the width of the video player and playlist
color
String, default:'rgb(252, 231, 41)' (optional) : color of control buttons
list_height
Number, default:100% (optional) : height of playlist
list_color
String, default:'#a0a0a0' (optional) : playlist unit color
list_select_color
String, default:'#5755ff' (optional) : selected playlist unit color
list_text_color
String, default:'#ffffffe6' (optional) : playlist text color