How to Embed HTML5 Video in WordPress?

Posted in Tutorials

So you want to add a video to your WordPress page?  The easiest way is to upload the video to YouTube or Vimeo copy their embed share code and paste it into your post or page.  This is often a good idea as YouTube and Vimeo are design to host and stream videos well (and quite possibly better than what can be achieved in a shared web hosting environment).

However, what if you want to host the video on your own webhost and stream it from there and not use and third-party video hosting.  This is fine if your video is small.  IN this case you can use the Video.js HTML5 Video Player for WordPress plugin or the HTML5 Video WordPress plugin.

We prefer to use the HTML5 Video for WordPress plugin.  So if you want to use that, jump down to the section “Adding Video using HTML5 Video WordPress Plugin”

But for educational purposes, we’ll start with Video.js…

1.  Install the Video.js wordpress plugin

2. Upload the mp4, ogv, and webm format of the video into the WordPress Media Library.  You can use free and open source Miro Video Converter to obtain these formats.

3.  While editing the page in the “Visual” tab of the WordPress editor, click on the “Insert HTML5 Video” icon …

4. You will now need to enter the values for MP4 Source, WebM Source, OGG Source (this is the ogv format), the Width, the Height.  The rest are optional, or you can leave as default.  We like to set preload to true and autoplay to false.

The path locations of the video can be determined by going into the Media library and edit the media.  In the “Edit Media” screen, you can get the full URL path to the video as well as its dimensions.

5.  Depending on your situation, you may want to include the poster image, in which case create the image the same size as the video and upload to Media Library and include its path in the Video.js HTML video fields.

6.  After submitting all the information, video.js plugin will produce a WordPress shortcode into your page or post.

7. Save the page/post.  And test your video on Chrome, Firefox, and Internet Explorer (the three most popular browsers) as well as on mobile.   Does it work on all that you tested?  If yes, you are lucky.  If not, here are a few things you might want to try.

8.  You might need to add the following types to your .htaccess file …

Why HTML5 Video Not Playing in Chrome

9.  Still not working in Chrome?  It might be that Chrome is not able to properly read the MP4 file.   If you inspect the source code that is produced …

you see that the video tag contain the src attribute referencing the mp4 file.  And you see the first source element also referencing the MP4 file.  These are probably needed to have Internet Explorer be able to play the video.  But unfortunately, doesn’t work for Chrome.

This code is generated by the Video.js plugin so we can not easily change them.  But we can write jQuery code to remove the source element containing the type=”video/mp4″ attribute, and remove the “src” attribute from the video tag.  We can put this jQuery code in the footer.php as shown …

The window.chrome detects if the browser is chrome.   We apply this jQuery only when it is Chrome.

Adding Video using HTML5 Video WordPress Plugin

If you want to use the HTML5 Video plugin instead of the Video.js plugin, the process is very similar.

1.  Install the HTML5 Video WordPress plugin.

2. Upload MP4 file and Webm file to media library using Miro Video Converter as necessary.

3.  Edit post and click on “Embed Video from Video Library” icon (the red triangle arrow) …

4.  As you can see the settings are similar, except it has a droplist of the possible video files pulled from the media library instead of needing you manually copy and pasting the video path URL…

5. It appear that the code generated by this plugin doesn’t include the ogv format.  So you just need to supply the MP4 and the WebM format.

6. Choose poster image if needed.

7. Put in your video width and height (which can be obtained by the “Edit Media” screen of the Media Library”).

8. We also like to checkmark “Preload Video”.

9.  Click the “Create Shortcodes” button.

10.  The page output when inspected in the browser looks like …

11.  Again Chrome does not play because it is having trouble with the MP4 referenced in the src attribute of the video element.  This is needed by Internet Explorer however.

12.  So using jQuery, we remove the src attribute from the video element only when chrome is detected…

Now it should work in Chrome, Firefox, IE, and Opera (at least as tested at the time of this writing January 2014).

 

 

 

---