Videojs HTML5 Player For WordPress

Last updated on by admin

special SiteGround WordPress hostingspecial Bluehost WordPress hosting

Videojs plugin allows you to embed video files anywhere in your WordPress site using videojs HTML5 player. You can embed videos in a post, page or text widget using shortcodes. The videos can be played on a desktop, tablet or mobile device.

Videojs Plugin Summary

Plugin Name: Videojs HTML5 Player
Compatibility: WordPress 4.6
Version: 1.1.0
Description:
Embed video file beautifully in WordPress using Videojs HTML5 Player. Embed HTML5 compatible responsive video in your post/page with videojs.
Icon of Videojs HTML5 Player
Price: 0 USD
Availability: instock
Rating: 5.0 out of 5 votes

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

If you like Videojs please leave it a rating. A huge thanks in advance!
Users who like this plugin also like WP eStore plugin to sell videos in WordPress.
special SiteGround WordPress hostingspecial Bluehost WordPress hosting

82 thoughts on “Videojs HTML5 Player For WordPress”

    1. @Manu, The plugin supports MP4 video which can be played on mobile devices. flv or flash is not supported at the moment.

  1. Is there a way to make the player invisible so that you do not see the control bar and only see the video by itself?

    1. @Michael, I have just added this feature. Please update the plugin and use the controls parameter in the shortcode.

  2. I just decided to add the muted option myself. It was pretty easy, thumbs up for clean structure code. Please add this option so that I won’t lose it with the next update.

  3. Your plugin is great , but i really need it work with FLV files, please update and allow this format please please please

  4. Thanks for the plugin!
    I was just wondering if there a code that we can use to play the video using an external button, a video.js api?

  5. Hi,

    works fine for me – thx!

    One thing I´m missing is the ‘aspect-ratio’. Any chance to see this included soon?

    Here I´m playing the same video with the flowplayer and videojs player – prefering the videojs:

    http://www.mobile-addicted.com/kunden/demovideo-post-wm/

    Another ‘Killer-Feature’ and maybe something outstanding would be a chance to set a border image ontop and the placement position of the video inside. Think of an mobile phone is shown ontop of the video.

    Thx / Sascha

    1. @Sascha, videojs uses plain HTML5 to embed a video. So It may not be possible to force a ratio. However, the video will scale based on its original ratio.

      1. So it has to be 16:9 and other formats don´t fit – as You can see in my demolink!?

        The Video has a resolution of 400×630.

    1. @Joon, Please provide the following info so I can take a look,

      1) Link to the page in question.
      2) Shortcode that you are using to embed the video.

    1. @jennifer, It’s just not android. Autoplay feature is disabled on iOS devices as well. They designed it this way so a user doesn’t lose unnecessary bandwidth while browsing from a mobile device (the user will decide when they want to play a video).

  6. width of the embeded video is different in each browser. when using Chrome my video is small and even though I add width syntax my video still small, when using UCBrowser its using full available space so my video got proper size, when using Edge , its just half size.

    is it browser problem? or this plugin need update again?

    1. @Rendy, Please provide the following info so I can take a look,

      1) The exact shortcode that you are using
      2) A link to page with the video in it

  7. Support for video in multiple formats would be really useful (mp4, webm, ogg). If the url parameter accepts a list of (space spearated) urls it would stay backwards compatible.

    Mozilla Firefox does not play well with mp4 videos due to the fact it’s not a royalty free format.

  8. Hello naa986,

    big thank for releasing the update instantly.

    Consider also the following lines to process multiple links in the url parameter. It’s a bit more general and future proof and allows to provide a video also in OGG file format or any other one without introducing new parameters. Allows also any combination of formats (the current implementation always requires mp4 format besides eventual other ones). I think the space character is a good separator as spaces in urls must be written as %20.

    // src
    $links = explode(' ', $url);
    foreach ($links as $link) {
    $ext = pathinfo($link, PATHINFO_EXTENSION);
    $src .= ''
    }

    See also
    http://www.w3schools.com/html/html5_video.asp
    for the most common formats.

    Downside of this approach is the requirement that URLs must end with file extension to recognize video formats.

    Anyway, don’t forget to update module description, that not only mp4 format is supported.

  9. Is there a way to get this to embed within a template? I’ve tried (removed the markup as I didn’t know if it would post with it)

    video id="example_video_id_47692594" class="video-js vjs-default-skin vjs-big-play-centered" width="720" height="405" poster="url-to-video-poster.jpg" controls preload="none" data-setup='[]'
    source src="url to.mp4" type='video/mp4' />
    source src="url to .webm" type='video/webm; codecs="vp8, vorbis"'

    The video shows, which is great, but I can’t get the controls to be hidden until someone mouses over it and the big play button doesn’t show. It all works just fine if I add it the usual way within the page content, but not in the template. What am I missing?

  10. I have installed this plugin in my wordpress 4.4 version. But I dont see the settings for this player.
    Can anyone please guide me how to make it work.

  11. Having some issues. Video plays fine in chrome, it’s an h264 codec inside a .mov file. used to play well in firefox and now not so much.

    I also transcoded it to webm for a fallback and added it to the shortcode and it’s still not working.

    I can hit the video directly and it plays in firefox and chrome, but oddly via wordpress it doesn’t

    Here’s my shortcode.

    Showreel
    [videojs_video url="http://henriettameire.com/wp-content/uploads/2015/04/Henrietta-Meire-Showreel-2015.mov" webm="http://henriettameire.com/henrietta-meire-showreel-2015-2" width="960"]

    1. @Mike, MOV is not a HTML5 compatible video format. Try converting it to a H264 encoded MP4 video and see how it goes.

      You might also want to check your webm parameter in the shortcode (It’s missing the webm extension).

    1. @What version of IE is it? If you don’t specify a width it will automatically take the width of the container (see the example in the Usage section).

    1. @Pascal, Thanks. It’s just not IE, It’s happening in other browsers as well. I don’t know if it’s conflicting with another plugin. But you can easily find out by deactivating one plugin at a time.

  12. Thank you for the great plugin!
    Quick question. Is there an option to playback .m3u8 playlist?
    Check here: http://c4b.tv/show/test-1-2/

    1. @Rich, Is your theme responsive? What shortcode are you using? Please provide a link to the page in question so I can take a look.

  13. but is there a way to hide or remove the play button? (Mi piace la domanda di Dred)

    Anch’io chiedo cortesemente un codice css per rendere trasparente il play button.
    TROPPO GRANDE….COPRE L’INTERO VIDEO QUANDO E’ DI PICCOLE DIMENSIONI.

    GRAZIE

  14. I want to use this for a introduction, what do I do to Auto redirect after video ends?
    I want my logo video to come on as soon as your come to my site with full screen and no controls and then Auto redirect after video ends.
    Pretty much disappear and go to my front page, Is this the plug in for that ?
    my logo:
    https://drive.google.com/file/d/0BwHMyPxSSaZFVE5KVzhBeG1hcjg/view

  15. Excellent – seems to work beautifully. One request if I may: Any chance you can integrate this plugin which adds a stepping control. It’s really useful for ‘video catalogues’ in websites.
    http://erasche.github.io/videojs-framebyframe/

    Cheers and thanks/Mark

  16. Hello naa986,

    I used a program called Handbrake to compress a 62 MB video down to less than 8 MG as the Media files uploaded must be 8 MB or less. Now that the video is in my media library, how do I embed it into a page? I know you give the short code but don’t I need to give the location of the video in the short code?

    Sorry but this is all new to me and a foreign language right now.

      1. Worked like a charm. Is there a way for an image of the video to show rather than only the black screen and play button only?

        1. @Lorry

          Right at the top of this page, it states…

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

          in otherwords, you need a screen shot image or screen cap image from your video. Then you add, poster=”url-to-video-screenshot.jpg” to the code in order for it to show instead of the black screen.

  17. Hi there, thanks for the great plugin. Just a quick question: When I embed a video to a portfolio post, the page does no longer show the title above the video, as it would in a regular portfolio or blog post. Any solutions for this?

    1. @Dennid, It doesn’t really use any WordPress filter to customize the page title/content. Does the title appear if you don’t embed a video using the shortcode?

  18. Hi,
    I use videosjs since several weeks. It worked on all browsers (firefox, chrome, opera, safari, internet explorer, android smartphones). My videos are encoded .mp4 (h264).
    Since one or two weeks, my videos doesn’t works with internet explorer (v11). The error message is “The media could not be loaded, either because the server or network failed or because the format is not supported”. All other browsers works perfectly.
    The only change from my previous browsers tests, is an update of WordPress ( version 4.5 ).
    Can you help me ?
    Thank’s a lot.

  19. My video is on the first page of my website : http://www.commentdevenirvegetarien.fr/
    Thank’s a lot.
    Olivier.

    1. @Olivier, There is some kind of a conflict when it runs in IE. It happens with all IE versions. I tried updating the videojs library but that didn’t make any difference.

  20. Thank’s for your answer.
    So … what should I do ? Internet Explorer is a widely used web browser, although I prefer Firefox or Chrome. I expect you to do an update ? and when ? or should I change video player? (it’s important for me to keep my videos on my server).
    Thank’s a lot.
    Olivier.

  21. http://stream-12.vty.dailymotion.com/25/dc/1/50b7998806361d3ecc0138cc/5653105394a6f61397ac89a9/live.isml/events(live-1462500023)/live-audio%3D64000-video%3D681000.m3u8

    i want embed this code .
    Please help.

  22. Thanks a lot for such a wonderful plugin

    Could you please help me with the following issues am facing:

    1. Poster image is not visible when I use chrome browser
    2. Once the width of the video is set am not able to increase the size .
    3. Is there any option to make the controls visible only on hover over the video, otherwise controls are invisble.

    Thanks in advance
    Krishna

      1. The page is password protected . Could you please suggest a way I can share you the credentials to the page?

Leave a Reply