WordPress HowTo

How-to guide for WordPress

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

Videojs HTML5 Player For WordPress

Video.js plugin allows you to add a video file anywhere within WordPress using the Video.js 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.

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

Table of Contents

  • Installation
    • Option 2
    • Option 3
  • Video.js Player Setup
  • Video Demo
  • Video Shortcode Options
    • WebM
    • Ogv
    • Width
    • Controls
    • Preload
    • Autoplay
    • Poster
    • Loop
    • Muted
  • Video.js HTTP Streaming
  • Video.js Player Add-ons
    • Disable Right Click
  • Priority Support

Videojs HTML5 Player Info

Plugin Name: Videojs HTML5 Player
Version: 1.1.7
File Format: application/zip
Requires: WordPress 6.0
Rating: 4.6 based on 16 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)

Video.js Player Setup

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

[videojs_video url="https://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="https://example.com/wp-content/uploads/video/vid.mp4" webm="https://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="https://example.com/wp-content/uploads/video/vid.mp4" webm="https://example.com/wp-content/uploads/video/vid.webm" ogv="https://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="https://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="https://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="https://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="https://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="https://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="https://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="https://example.com/wp-content/uploads/video/vid.mp4" muted="true"]

Video.js HTTP Streaming

The plugin supports the m3u8 file format that can be used for HTTP Streaming. It allows you to play HLS, DASH, and other HTTP streaming protocols with Video.js, even where they are not natively supported.

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

Video.js Player Add-ons

Video.js HTML5 Player plugin comes with add-ons that you can use to enhance its functionality on your website.

Disable Right Click

This add-on allows you to disable right click on the Video.js player.

disable right click on the video.js player
Videojs Disable Right Click
Videojs Disable Right Click
Disable right click on the Video.js player.
Price: $39.99
Price: $29.99

Priority Support

If you are having an issue with the plugin, our support team can help investigate it by taking a closer look at your site.

Videojs Plugin Technical Support
Videojs Plugin Technical Support
Our technical support team will troubleshoot Videojs plugin related issues on your website.
Price: $29.99
Price: $39.99

Related

Written by Noor Alam · Categorized: plugin, wordpress

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
      • Ryan Beardall says

        I also would love to see subtitles / closed captioning support added.

        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
      • jorge says

        Autoplay policy in Chrome and Safari says that to allow autoplay videos they must be muted. So try to muted=”true” and it is gonna work.

        Reply
  5. Jorge says

    Is it possible to embed a different video depending if the browser is Chrome or Safari? F.Ex: If I open Chrome I want it open the most light video in format .wepm, but if I open it on Safari, as log as it doesn’t play .webm, I want it opens a .mp4 version, what do you think?
    Ty

    Reply
    • Noor Alam says

      @Jorge, You can provide a webm file in addition to mp4. Please check the documentation for more information.

      Reply
  6. Muhammad ibrar ashfaq says

    Hi.
    is it possible to hide path of video?
    When we right click on player it show “copy video address”.
    I want to hide Right click options.

    Reply
    • Noor Alam says

      @Muhammad, That’s not possible. But you can install a plugin that will disable right click.

      Reply
  7. Rob says

    Hi,

    Will this plugin support an m3u8 plyalist?

    Many thanks.

    Reply
    • Noor Alam says

      @Rob, It’s not supported at the moment.

      Reply
  8. Max says

    Wonderful plugin!
    Though setting the ‘width’ to a custom value gives the video white borders, and in some cases those borders are huge, so changing them to transparent in CSS isn’t enough to fix it.
    How do I prevent these borders from showing up?

    Thanks!

    Reply
  9. Maksym says

    Player works perfectly – but not in Ajax. When loading it in ajax loop (for infinite scroll), shortcode processes incorrectly, giving zero size object like

    Is it possible to load it via ajax?

    Reply
  10. Lori Tanner says

    How do you remove black bars on video, please!

    Reply
  11. Jorge says

    Is it possible to start the play with couple seconds of delay?

    I have autoplay for 2 videos attached together and I don’t want they go sync

    Thank you

    Reply
    • Noor Alam says

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

      Reply
      • Jorge says

        Thank you. Don’t worry. I can try to do the 2 videos with different lenght to make them out of sync after the first play.

        Anyways, congratulations for the plugin. Is really usefull

        Reply
  12. Sonja Wecker says

    We preferred the placement of the play button at the top left. Is there a way we can put it back up there?

    Reply
    • Noor Alam says

      @Sonja, Video.js updated the player. If you like the older player you may need to revert to an older version of the plugin: https://wordpress.org/plugins/videojs-html5-player/advanced/

      Reply
      • Sonja Wecker says

        Thank you very much!

        It would be great if someone can determine the placement of the play button in the shortcode itself, whether it should be cented, top left or bottom left. So that the player always stays up to date.

        Reply
      • Sonja Wecker says

        I tried version 1.1.2. so the video player button is now on the top left. However, the player icon is not displayed, only the button is grayed out.

        Reply
  13. Bartitone says

    How to change or remove the Picture-In-Picture icon that is set to Pinterest Icon right now?

    Reply
  14. David says

    Hi there!

    I’m having problems with the responsiveness of the player. When I add width=”480″ the height stays the same. Here’s the url: https://sanopharm.com/sivas-polsdiagnostiek-terugkijken-test

    Many thanks!
    David

    Reply
  15. antonio says

    buonasera se qualcuno mi aiuta sarei felice. Vorrei inserire un feed rss di notizie video tramite feedzy .. le news che ho sulla mia pagina non incorpora il video … questo plugin mi potrebbe aiutare a riconoscere il video delle news in maniera automatica e se si come si dovrebbe settare ? grazie a chi mi risponde spero di essere stato chiaro 🙂

    Reply
  16. henry says

    bug report:

    if poster pic url include [ or ], videojs will not working

    Reply
    • Noor Alam says

      @henry, Are you saying the video does not play if you specify a poster image?

      Reply
  17. Andy says

    I get this error when adding poster picture: The media could not be loaded, either because the server or network failed or because the format is not supported. Cheers

    Reply
    • Andy says

      I fixed it my error. LOL, great plugin BTW….

      Reply
  18. Quynh says

    can you add this?

    var myPlayer = videojs('{$esc_attr($player)}').ready(function () {
    // ready
    var filename = $('#fileInput').get(0).files[0].name;
    var fileUrl = URL.createObjectURL($('#fileInput').get(0).files[0]);
    var fileType = $('#fileInput').get(0).files[0].type;
    console.log(filename);
    this.src({ type: fileType, src: fileUrl });
    this.load();
    this.play();
    });

    Reply
    • Noor Alam says

      @Quynh, Can you please tell us why you want to add this?

      Reply
  19. Quynh says

    It will hide source video url.

    Reply
  20. Jorge says

    (1) Could I add a link if I clich the video?
    (2) It is possible to add corner radius to each video?

    Thank you

    Reply
    • Noor Alam says

      @Jorge, Are you saying the video will act as a normal link?

      Reply
      • Jorge says

        (1) Yes, I wanted to do it “linkable”. But I solved it by adding a [videojs_video] and it works perfectly.
        I can add extra classes as well in the label and they apply directly to the whole video block.

        The only think is about the corner radious:

        (2) I can add corner radius by adding it directly in the file video-js.min.css with the plugin editor, but as long as I want to use different border radius depending on the video location in my website, is there another way to do this?

        Thank you

        Reply
« Older Comments

Leave a Reply Cancel reply

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

Search WP HowTo

Recent Posts

  • Custom Donations for WordPress PayPal Donate Buttons
  • Gmail SMTP Plugin Cc Configuration
  • How to Add a Reply-To Address in the Gmail SMTP WordPress Plugin
  • What Does a Security Challenge Mean on PayPal?
  • WP PayPal Button Integration with Contact Form 7
  • Can People See Your Address on PayPal?
  • Mailchimp Integration for WP PayPal Plugin
  • How to Show a Text Box at WP PayPal Checkout to Collect Custom Data from Buyers
  • How to Add a Recurring Price Field to a PayPal Subscription Button
  • How to Add a Quantity Field to a PayPal Button

Featured Add-ons

Buy Now Custom Amount for PayPal

Buy Now Discount for PayPal

Contact Form 7 Integration for PayPal

Custom Input for PayPal

Mailchimp Integration for PayPal

Product Variations for PayPal

Variable Quantity for PayPal

Variable Subscription for PayPal

Custom Donations for PayPal

Reply-To for Gmail SMTP

Cc for Gmail SMTP

Disable Right Click on Video.js

Copyright © 2023 · WordPress HowTo

We use cookies on our website to give you the most relevant experience by remembering your preferences and repeat visits. By clicking “Accept”, you consent to the use of ALL the cookies.
Do not sell my personal information.
Cookie SettingsAcceptRead 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