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
  • Enter “Videojs HTML5 Player naa986” 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.

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.
* Do not try to scam us, we take it seriously. We are contributing to the WordPress community with free plugins and themes. If you cannot appreciate this our product is not the right choice for you.
* There is no refund/cancellation as it is a digital product.

Price: $39.99

Themes

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

236 thoughts on “Videojs HTML5 Player For WordPress”

  1. Hello, how add video from my ftp server? no www, bur ftp. create gallery or how?

    Reply
  2. Can you use this to live stream?

    Reply
    • @Emmex, Unfortunately that’s not possible at the moment.

      Reply
  3. The plugin works great, thanks!

    One question: can I add a mute/unmute button to the player?

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

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

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

    Reply
    • @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.

      Reply
    • i can’t make the video play on start, seems autoplay doesn’t work. Any suggestions?
      Thanks

      Reply
      • @mike, Which shortcode are you using? Please provide a link to the page in question so I can take a look.

        Reply
  6. why not offer hls / m3u8 ?

    Reply
  7. Hi
    I have a problem.
    how can I remove the empty space below the video?
    I’ve tried to insert [/videojr_video] code, but there is still a empty space.
    I need your help..

    Reply
  8. haii, i have a questions. Help me please.
    how to make button play centered as code vjs-big-play-centered?
    and then how to add track/subtitle in my video?.

    thanks

    Reply
    • @Ghisa, It’s not possible because that’s how the videojs player was designed.

      Reply
      • https://github.com/videojs/video.js/issues/2599

        Reply
        • @Jade, I have just released an update. The play button is now centered by default.

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

  9. I’m new to inserting short-code.

    I placed this code [videojs_video url="https://www.youtube.com/watch?v=dWKcZmpiM8w"] in the HTML of a post where I want it to show, but it doesn’t seem to understand the code.

    What am I doing wrong?

    Reply
    • @Steve, This plugin can only embed a MP4 video file.

      Reply
  10. I have been using this plugin for quite some time and I have to say that I do love it. However, I can not get it to work on mobile. I just get a “Media can not be loaded” error. Is there a way to make it work on mobile?

    Reply
    • @Lindsay, Is your video properly encoded (H264 MP4)?

      Reply
        • @Lindsay, Just a file with an MP4 extension is not enough. You need to make sure that it’s compatible with web/mobile devices. You can even use a free encoder like handbrake to do this. Please install handbrake, open the video in it and run an H264 encoding (with the “Web Optimized” option enabled).

          Reply
  11. The player allows anyone to download the video. For self hosted video, I want to keep the content private and not allow download? How do you prevent downloading? If I want a standard video player, I would use Youtube.

    Thanks

    Reply
    • @Tucker, Unfortunately, that’s not possible at the moment.

      Reply
  12. Hello,
    is there a way that the video always takes the full height of any screen? Especially on vertical screens the video is still being shown horizontaly. Thanks! Best, Pierre

    Reply
  13. Hi, when i try to insert my video into the post i get the message “You need to specify the src of the video file”

    Can you please help me out?

    Reply
    • @Justin, What shortcode are you using? Did you copy and paste it as plain text?

      Reply
  14. Hi,

    Recently I made a blog post and uploaded several short mp4 clips using this wordpress player. I set the settings to autoplay and loop.

    This worked fine for a sometime while I checked the page preview as I was making the page. But when I published the autoplay wouldn’t work. I had to click play myself and it would loop about 2 times and them stop. No matter what I try the autoplay and loop doesn’t happen automatically!

    I have loads of videos I want to upload for different pages to play this way, as a better quality alternative to a GIF.

    Do you know why this might be happening?

    Reply
    • @Cheryl, Are you browsing in Google Chrome? Please provide a link to the page in question so I can take a look.

      Reply
  15. I have 2 videos ( one for mobile version, and one for desktop )

    But plugin change timestamp always only on 1. video on page and for other one it does not work. How can I add some ID or something to separate thoice 2 videos and make plugin work on both videos.

    Many thanks,
    Nikola

    Reply
  16. The CSS file is empty??? I guess you just drop the video in using shortcodes and hope for the best. Who cares that it looks sh** with borders only on two sides, no way to make background white, nor adjust the height . Not very good at all

    Reply
  17. I can hear the audio, but there is no video that I can see. What could be the problem?

    Reply
    • @Kim, This might be an encoding issue. You can encode your video (H.264 MP4) with a free encoder like handbrake and see how it goes.

      Reply
  18. Video Poster is not showing in mobile devices

    Reply
  19. Can we set a default fixed width? Like 720 px?

    Where is settings located?

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

    Thanks
    Roni

    Reply
    • @Roni, Do you mean height? The height is adjusted automatically based on the width.

      Reply
  20. Hi,

    I’m start using your video player and like it. I try to find any information about setting video width for 720px by default. So my users will have the same 720px video width across my site without setting on the shortcode like below every time they upload video. Also it can be maintain the same width for any video uploaded on my site.

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

    I expect it can be done my some code on function.php?

    Thank you

    Charles T.

    Reply

Leave a Comment