VideoJS Auto Pause

This MP4 video player uses the latest version of the VideoJS. The player has been adapted to be responsive if required. The default play button has been reduced in size and centered.
One essential element which is still missing from the VideoJS player API is the ability to set the initial volume. This feature has been added using some javascript along with a control for removing the fullscreen toggle button if required.

Autoplay On Mobile

Autoplay is now available for video on iOS V 10. There are however some conditions. The video must either have no audio track or the audio must be muted. The widget has a "muted" control for those who want to use autoplay on iOS devices.
Another interesting addition to the HTML5 video element is "playsinline". This allows video to play on iPhones without being forced into the fullscreen mode.

Styles

The player's container can be styled for background color and its opacity. The video can have a border if required.
The player is inserted in an HTML5 figure element to allow the addition of an optional title via the <figcaption> tag. A descriptive title is really essential for SEO.

Poster image

Where possible, video files should be prevented from loading along with the rest of the page content to help speed up page download time. This is achieved by setting preload to "none".
A poster image is inserted to show on page load. It should have the same aspect ratio as the video file and its width should be equal to the maximum width setting.
Preload settings are auto, metadata and none. Auto should only be used when there is no poster image and the video is set to autoplay.

Auto Pause

The widget has a built in auto pause function. This means that, when two or more videos are inserted on a page, a video which is playing will pause when another is selected to play.