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.


Get 50% OFF WordPress hosting through this special link here (offer expires on January 31)

Videojs HTML5 Player Info

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

Requirements

  1. A self-hosted WordPress site running on a WordPress optimized environment like SiteGround.

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"]

Users who like this plugin also like WooCommerce Memberships to create a video membership site (+ sell video content).
Get 50% OFF WordPress hosting through this special link here (offer expires on January 31)

125 thoughts on “Videojs HTML5 Player For WordPress”

  1. how to add that shortcode at wordpress single.php ?

    code starts with
    ID, ‘video_url’, true); if(!empty($video_url))

    [videojs_video url=”http://…”]

    regards Paul

      1. code is
        ID, ‘video_url’, true);

        where to add that do_shortcode function?

        that’s the demo code from your link
        echo do_shortcode('[my_gallery id="163" size="small"]', true);

        but I dont see any ‘echo’ at single.php

        echo do_shortcode('[videojs_video url=”http://…”]', true);

        I want to use Videojs HTML5 Player instead of player from embed imported videos.

  2. Very handy plugin. Thank you. It does not autoplay on android smartphones. Is there a shortcode addition or workaround you are aware of?

    1. @Scott, Autoplay will not work on mobile devices. It’s something the manufacturers disabled to prevent unwanted bandwidth loss. A video will only play when a user initiates it.

Leave a Reply

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