• Skip to main content
  • Skip to primary sidebar

WordPress HowTo

WPHowto is the place to download free WordPress plugins and free WordPress themes. WPHowto focuses on free how-to tutorials for WordPress, popular WordPress plugin/theme reviews, best cheap WordPress hosting reviews and tutorials on WooCommerce.

  • Home
  • Plugins
    • Themes
  • Hosting
  • Contact
    • Privacy Policy
  • About

Videojs HTML5 Player For WordPress

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.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.

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"]
Disclosure: This page may contain affiliate links. If you follow one of those affiliate links and purchase something it will provide me with a little bit of a commission. This costs you nothing extra but helps maintain my site, free plugins, and themes. So I thank you for your support.

Share this:

  • Twitter
  • Facebook
  • Pinterest

Related

Written by Noor Alam · Categorized: plugin, wordpress

Reader Interactions

Comments

  1. StyledThemes says

    is it possible to mark chapters on the timeline of the video somehow?
    I saw that this is available in the paid version of the brighcove player but is it also possible in videojs?

    Reply
    • Noor Alam says

      @StyledThemes, Unfortunately it’s not possible at the moment.

      Reply
  2. Ranga Tamil says

    Would you consider upgrading the VideoJS code in your plugin? Ver. 5.5 is quite old, 7.8.4 would be good choice at the moment.

    Reply
    • Noor Alam says

      @Ranga, I do have a plan to update it soon.

      Reply
  3. bazza says

    Hello, is it possible to put subtitles (caption) and change the resolution?

    Reply
    • Noor Alam says

      @bazza, Unfortunately that’s not possible at the moment.

      Reply
  4. Muhammad UZAIR says

    autoplay not working i am frustrated i try many times kindly fix this issue

    Reply
    • Noor Alam says

      @Muhammad, Autoplay is no longer a guaranteed feature. It depends on whether or not your browser will allow it.

      Reply
« Older Comments

Leave a Reply to StyledThemes Cancel reply

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

Primary Sidebar

Search WP HowTo

Recent Posts

  • How To Disable Sticky Header in a Genesis Child Theme
  • How to Center a Tweet in WordPress
  • How to Add a Free SSL Certificate to Your WordPress Site
  • 34 Best Black Friday & Cyber Monday Discounts for WordPress (2019)
  • Introducing to WordPress Login & Admin Area on Bluehost

Top Posts & Pages

  • Gmail SMTP Plugin for WordPress
    Gmail SMTP Plugin for WordPress
  • How to Embed a Video in WordPress
    How to Embed a Video in WordPress
  • SMTP Mailer Plugin For WordPress
    SMTP Mailer Plugin For WordPress
  • WordPress PayPal Plugin
    WordPress PayPal Plugin
  • How to Remove/Hide Image From WooCommerce Product Page
    How to Remove/Hide Image From WooCommerce Product Page
  • Videojs HTML5 Player For WordPress
    Videojs HTML5 Player For WordPress
  • 6 Free WordPress PayPal Subscription Plugins for Accepting Recurring Payments
    6 Free WordPress PayPal Subscription Plugins for Accepting Recurring Payments
  • How To Disable Sticky Header in a Genesis Child Theme
    How To Disable Sticky Header in a Genesis Child Theme
  • Best Cheap WordPress Hosting (2020)
    Best Cheap WordPress Hosting (2020)
  • How to Create a PayPal Subscription Button in WordPress
    How to Create a PayPal Subscription Button in WordPress

Copyright © 2021 · WordPress HowTo

This website uses cookies to improve your experience. By continuing, you agree to their use.Got it! Learn More
Privacy & Cookies Policy

Privacy Overview

This website uses cookies to improve your experience while you navigate through the website. Out of these cookies, the cookies that are categorized as necessary are stored on your browser as they are essential for the working of basic functionalities of the website. We also use third-party cookies that help us analyze and understand how you use this website. These cookies will be stored in your browser only with your consent. You also have the option to opt-out of these cookies. But opting out of some of these cookies may have an effect on your browsing experience.
Necessary
Always Enabled

Necessary cookies are absolutely essential for the website to function properly. This category only includes cookies that ensures basic functionalities and security features of the website. These cookies do not store any personal information.

Non-necessary

Any cookies that may not be particularly necessary for the website to function and is used specifically to collect user personal data via analytics, ads, other embedded contents are termed as non-necessary cookies. It is mandatory to procure user consent prior to running these cookies on your website.

SAVE & ACCEPT