Configuration
Those settings allow you to define the default behavior of the player, like Autoplay, Loop, etc...
The Player Skin Designer allows you to watch changes happen to the skin live as you edit the CSS, making it easier to create a custom look.
Check out this familiar looking example.
It’s probably easiest if you start by forking this unedited example.)
Documentation for skins is available at VideoJS Skins
CustomCSS field allow you to create your own skin directly from the VideoJS website.
Once customize, click on "Embed This Player" and copy the custom HTML style code section into the CustomCSS textarea.
Sample style to copy and paste:
<style type="text/css">
.vjs-default-skin { color: #b05757 }
.vjs-play-progress, .vjs-volume-level { background-color: #3881a9 }
.vjs-control-bar, .vjs-big-play-button { background: rgba(146,63,63,0.7) }
</style>
Please note that CustomCSS field can only apply to the default skin.
The original video size is keep as long as it is below the max_width parameter in the admin panel.
If the video width is higher, the height will be scale and the width equal the max_width parameter.
If video is smaller than max width, it will upscale the video size to max width.
The width equal the max_width parameter.
I develop some VideoJS plugin for my need. I integrate them into piwigo.
- videojs-rotatezoom: allow to rotate and zoom a video with the poster. It useful for video taken from mobile device.
- videojs-thumbnails: displays thumbnail images over the progress bar.
- videojs-watermark: displays watermark over the video.
Those only work using the HTML5 player and not when the player fallback to Flash.
More plugins are available at VideoJS Plugins
To use this plugin, you need to install rotateImage plugin (to set manual rotation), or synchronize the video.
It will rotate the video as per screenshot section.
Note that iOS device does have the rotation Atom, therefor have the correct orientation.
To use this plugin, you need to create one or multiple thumbnail every specified second.
It will displays the thumbnail in the progress bar as per screenshot section.
You can change the thumbnail layout by modifying the class '.vjs-thumbnail' in the file 'video-js/videojs.thumbnails.css' to your need.
For example:
border-style: solid;
border-width: 1px;
border-color: red;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
or:
border:5px solid red;
To use this plugin you need to activated watermark in the Piwigo configuration, 'Administration' -> 'Configuration' -> 'Options' -> 'Watermark'.
You can change the watermark layout by modifying the class '.vjs-watermark' in the file 'video-js/videojs.watermark.css' to your need.
It will displays the watermark over the video as per screenshot section.
