Videojs HTML5 Player For WordPress

Last updated on by admin

Videojs plugin allows you to add a video file anywhere within WordPress using the Videojs HTML5 player. You can embed a video into a post, page or text widget using a shortcode. The player is fully responsive and your videos will be playable on a desktop, tablet or mobile device.

Videojs is an advanced player framework that supports embedding a video with HTML5 video tags. Currently, the Videojs project is largely sponsored by Brightcove and this plugin makes this amazing player available for use in WordPress.

Videojs HTML5 Player Info

Plugin Name: Videojs HTML5 Player
Version: 1.1.1
File Format: application/zip
Requires: WordPress 4.8
Rating: 4.9 based on 8 votes
See All Ratings/Submit Your Rating Here
Price: 0 USD

Installation

  • Login to your WordPress admin dashboard
  • Go to Plugins->Add New
  • Enter Videojs HTML5 Player in the search box
  • Once you find the plugin hit the install button

Option 2

  • Download the zip version of the plugin
  • Go to Plugins->Add New and switch to the Upload tab
  • Select the zip file on your computer
  • Upload and install it

Option 3

  • Download the zip file and extract it
  • Connect to your website via FTP (you can use a software like Filezilla to transfer files to your server) and browse to the “/wp-content/plugins” folder
  • Select the folder containing the plugin files on your computer and upload it
  • Once all the files have been uploaded to your web server you can activate the plugin from the Plugins menu (WordPress admin dashboard)

Usage

In order to embed a video insert the following shortcode into a post/page.


[videojs_video url="http://example.com/wp-content/uploads/video/vid.mp4"]

You need to specify the location of a MP4 video file in the url parameter (H.264 encoded). This parameter is mandatory in order to embed a video using this plugin.

Video Demo

screenshot showing a demo of videojs html5 player for wordpress

Video Shortcode Options

Videojs plugin accepts a wide range of shortcode parameters that you can use to customize the video playback and controls.

WebM

“webm” parameter allows you to specify the location of a webm video file. For example:


[videojs_video url="http://example.com/wp-content/uploads/video/vid.mp4" webm="http://example.com/wp-content/uploads/video/vid.webm"]

Ogv

“ogv” parameter allows you to specify the location of a ogv video file. For example:


[videojs_video url="http://example.com/wp-content/uploads/video/vid.mp4" webm="http://example.com/wp-content/uploads/video/vid.webm" ogv="http://example.com/wp-content/uploads/video/vid.ogv"]

Width

“width” parameter allows you to set the width of the video. For example:


[videojs_video url="http://example.com/wp-content/uploads/video/vid.mp4" width="480"]

Controls

“controls” parameter allows you to show/hide video controls. By default video controls will be displayed. If set to “false” controls will be disabled. For example:


[videojs_video url="http://example.com/wp-content/uploads/video/vid.mp4" controls="false"]

Preload

“preload” parameter allows you to specify if and how a video should be loaded when the page loads.

  • “auto” – the video should be loaded entirely when the page loads (default)
  • “metadata” – only metadata should be loaded when the page loads
  • “none” – the video should not be loaded when the page loads

For example:


[videojs_video url="http://example.com/wp-content/uploads/video/vid.mp4" preload="metadata"]

Autoplay

“autoplay” parameter allows you to automatically play the video when the page is rendered. For example:


[videojs_video url="http://example.com/wp-content/uploads/video/vid.mp4" autoplay="true"]

Poster

“poster” parameter allows you to set a poster image for the video. For example:


[videojs_video url="http://example.com/wp-content/uploads/video/vid.mp4" poster="http://example.com/wp-content/uploads/poster.jpg"]

Loop

“loop” parameter allows for the looping of the video file (The video will start over again, every time it is finished). For example:


[videojs_video url="http://example.com/wp-content/uploads/video/vid.mp4" loop="true"]

Muted

“muted” parameter allows you to mute the audio output of the video. For example:


[videojs_video url="http://example.com/wp-content/uploads/video/vid.mp4" muted="true"]

If you like Videojs please leave it a rating. A huge thanks in advance!
Users who like this plugin also like WP eStore for selling videos in WordPress.
GET a Special 60% OFF WordPress Hosting Here

110 thoughts on “Videojs HTML5 Player For WordPress”

  1. How do I add the close-button.js to this so I can close a video when it’s done or when the viewer is done watching it.

    Idea is to have the page return to it’s original state upon user’s action.

    thesurrenderfilm.com

    1. @Triblu, In order to keep the video responsive, the height of the video automatically scales based on the width.

  2. This is perfect! I have been trying to hide controls with plug ins and code for 2 days and nothing else worked! Thank you…
    Just wondering if you know how to change the page height so that the video sits right under the header like the video widget does? I couldn’t hide the controls via the video widget so have resorted to posting it in a page but it sits with a white gap under the header that I want to eliminate if possible. Any help appreciated.

  3. Hey, thanks for making this plugin. Would it be possible to add links with different resolutions so the user can switch between sd and hd?

    Also is there a way of putting the play button in the middle? it appears on the top left which is kind of awkward.

    1. @Dave, Unfortunately, it’s not possible to switch between SD and HD at the moment.

      This is how the play button was designed with the player. I’m not really the author of the videojs library. I’m just a developer who integrated into WordPress.

  4. hi i installed videojs-html5 player in my wordpress homepage.
    and when i play self hosted video , the screen plays too small size ..
    how can i increase the size of the video in html5 player ?

Leave a Reply

Your email address will not be published. Required fields are marked *