A video player plugin for desktops/mobiles/tablets
npm install vplayerA library to provide an easy-to-implement but customizable video player on desktops with support for fullscreen on tablets/phones.
The library comes as an npm package:
npm install vplayer --save
Include the script on your page (adjusting the link path as necessary)
Include the vplayer stylesheet (again, exact path may vary)
#### One video on a page
Include the following html on your page
`
If you want to have multiple vplayer activation links on a page, you just need to add another anchor tag with the class vplayer-popup`
`
Open the video
You then need to initialize vplayer on page load using the following
VPlayer.setup() VPlayer.setup(false)
or
The parameter to the setup method is whether there are multiple videos
#### Multiple videos on a page
In your tags put the link of the video which that link should open in the data-video-link attributePlay video
You then need to initialize vplayer on page load using the following
VPlayer.setup(true)
There are some methods which can customize VPlayer
`
// how long for the modal to take to increase
.setTransitionTime(time_in_milliseconds)
// the initial width and height of the modal
.setInitialSize(initial_width, initial_height) // (px, px)
// how much side padding so that the VPlayer doesn't sit right on the edge of the screen
.setPadding(horizontal_padding, vertical_padding) // (px, px)
// Methods can also be chained like so
VPlayer.setup().setTransitionTime(800).setInitialSize(200, 150).setPadding(30, 40);
``
See issues, general feature improvements also welcome!
MIT