I’m wanting to try and create an easy to use step by step guide for WordPress users to get HTML5 video up and running on their websites. I covered this subject previously without providing a guide on how to get the job done.
The process only requires two pieces of software and access to your WordPress administration page. Unfortunately my choice of encoding software doesn’t have a version available for Microsoft Windows. If you run Linux – Arista Transcoder makes converting your video to .WEBM ( HTML5 video codec ) easy. For Microsoft operating systems – XMedia Recode will get the job done.
Other than encoding software you will need FTP ( File Transfer Protocol ) software. I use FileZilla. You can upload your video content to your server within the WordPress administration page – but I find it easier to use FTP software.
The last step to getting HTML5 video running is to install a WordPress plugin that enables your website to run that content. This involves searching the WordPress Plugin page, downloading your chosen plugin, installing the plugin and then enabling it within your WordPress administrator page.
To run HTML5 video you will need to convert your content to .WEBM. This can be easily done using XMedia Recode. After installing this software open it up. In the top left corner you will see Open File option. Select this and find the video you want to convert. Once the video is loaded into the software look below at the Format tab. Make sure under Profile it says Custom. Below that is another format tab – select WebM from drop down menu. Under Video Codec make sure this has VP8 selected. Under audio make sure Vorbis is selected.
At the very bottom select the location where you would like to save your converted video. Be sure to remember this location. At the top you will see Add Job option – select this. Then to the right of that option select Encode and watch video encoding start. Depending on your computer hardware & video size this process can go quickly or take some time.
After you have encoded the video you will need to upload it to your WordPress server using FTP software. You will need the proper credentials from your web hosting provider to complete this process. Upload the video(s) to your WordPress upload folder. The path to this folder normally looks like /wordpress/wp-content/uploads/ within your FTP software.
Once you have the video uploaded – copy the URL for the content. Make sure you strip out your FTP credentials from the URL. Then it’s as easy as posting this code into your article – put a [ in front of it and ] after code to get it to work. Once this code is posted within the article your video should easily play.
video ogg=”Your Video URL / Link here” preload=”auto” width=”900″ height=”600″
Or now you can use
videojs webm=”Your Video URL / Link here”
Make sure to set width height other settings the way you want them within Video.js Settings.
Copy the URL you copied from the FTP process WITHOUT your credentials into that code. In your article you should then see a video player box.
I use the VideoJS – HTML5 Video Player for WordPress plugin to enable this functionality. I’ve provided a link to that solution below.
Once you have installed this plugin go into your Video.js Settings within the your WordPress administrator page. Make sure that Use CDN hosted version is check marked.
You might also want to consider installing a WordPress cache plugin. This will help to improve the overall performance of your website and should provide a smoother viewing experience for readers.
I use W3 Total Cache for my WordPress installs. There are other options to choose from – this is just my preference. I’ve also provided a link to that plugin below.
From a few quick test I think the encoding quality is lower when using XMedia Recode versus Arista Transcoder. But XMedia Recode was the only software for Microsoft Windows that I could find that would get the job done easily. VLC media player does offer .WEBM encoding but I’ve had issues in the past with that functionality working properly.
Some less technical users might find these instructions or the process frustrating. I’ve tried to simplify the process as much as I know how. I’ve tried to be as detailed as possible and not skip steps so readers can accomplish the task. After you’ve done this process a few times it becomes second nature.
Here are a couple of articles showing HTML5 video in use.