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.

Installation

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

The plugin can also be downloaded from here: https://wordpress.org/plugins/videojs-html5-player/. For a manual installation go to Plugins > Add New Plugin > Upload Plugin and select the zip file that you downloaded.

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.

License: Unlimited Websites

Note:
* Do not purchase before setting up the core plugin first. The add-on is not at fault if the core plugin does not work on your website.
* Do not purchase if you are not sure about a feature, contact us instead.
* Do not purchase to ask for more features or make the product work in a certain way.

Price: $39.99

Themes

Themes add-on allows you to customize the Video.js player with pre-built themes.

239 thoughts on “Videojs HTML5 Player For WordPress”

  1. 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
  2. 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
  3. 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
  4. 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
  5. 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
  6. 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
  7. 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
  8. 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
  9. 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
  10. 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
  11. 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
      • (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

Leave a Comment