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