Jun 292012
 
Article WordPress

In this post we will show how to add video or audio content to a generic web page, and more specifically to a wordpress blog post.
We will try to explain the concepts involved and the considerations that should be taken into account in performing this task.

Case 1. Adding a Youtube video to a wordpress blog.

Imagine you just found a video in youtube that you would like to embed in one of your posts. The url shown in the address bar of the browser is:

To embed this video, just copy this url, and paste it  as a line of the post (there is no need even to set it up as a link):

Worpress recognizes automatically the url, and generates the HTML code required to display the video inside our post, scaling it as needed to fit the width of our page:

If we prefer to have a bit more control, we can use the ’embed’ shortcode to specify the maximum width and height at which the video will be scaled:

[embed width=”300″ height=”200″]…[/embed]

In our sample case, if we examine the html source of the page generated by wordpress, we see that the video is put inside an iframe of size (267, 200). In this case, the size limit is imposed by the maximum height of 200 pixel we have specified:

Case 2. Include a video locally stored in our wordpress server

The first case we have just explained is the simplest one, but is has the drawback that it depends on data stored in a youtube server, and these data could be removed or become unavailable out of our control.

It could also be the case that we have multimedia content not uploaded to youtube, and we want to serve it directly from our server.

In this case we can make use of a plugin. There are many plugins available for this. In this post we will comment the  “JW Player for WordPress”

Once the plugin is installed, we insert the video in the blog using the following shortcode:

[jwplayer file=http://blog.openalfa.com/myvideo.flv] (video in flash format)

and get the following result:

[jwplayer file=http://blog.openalfa.com/myvideo.flv image=http://blog.openalfa.com/wp-content/uploads/2012/06/video-chino-preview.png]

We can also specify a video in mp4 format:
[jwplayer file=http://blog.openalfa.com/oceans-clip.mp4]

[jwplayer file=http://blog.openalfa.com/oceans-clip.mp4 image=http://blog.openalfa.com/wp-content/uploads/2012/06/video-chino-preview.png]

Inserting HTML5 video

We have just seen how JW Player can be used to insert an mp4 video to be used by browsers with support for HTML5.

But currently the HTML5 support in the main browsers (IE9, Firefox, Chrome, Safari, etc.) varies a lot (see http://en.wikipedia.org/wiki/Open_videohttp://www.w3schools.com/html5/html5_video.asp).

Specifically, it is not enough that the video uses mp4 format. We must make sure that the video and audio codecs inside the file are supported by the browser. The following table shows the support to the different video codecs (ogg, h.264 y webm) offered by the main browsers in 2012

 

Browser Video format
Ogg Theora H.264 WebM / VP8
Firefox Supported will be suspported Supported
Chrome Supported Could be retired Supported
Opera Supported Not Supported Supported
IE 7/8 <video> tag not supported <video> tag not supported <video> tag not supported
IE 9 Not Supported Supported Supported
(installing the webm codec for IE9)
Safari Not Supported Supported Not Supported

 

To solve this issue, in html5 it is possible to specify several files in different formats inside a single <video> tag. The browser will use the first format it supports. But with the jwplayer shortcode it is not possible to specify several html5 files.

Instead of using a plugin, we can directly include in the wordpress post (or in any other web page, be it a wordpress post or not) the html5 <video> tag, as in the following example:

The problem of this method is that older browsers that lack support for HTML5 cannot play the video. The solution is to use again a plugin such as  “VideoJS player for WordPress”, and assign a css class to the <video> tag. This plugin loads a javascript library that checks if the browser has support for html5. If it does not, the plugin loads a flash player that understands the mp4 format.

Install the plugin, and add to the <video> tag the attributes id=”testvideo” class=”video-js vjs-default-skin”:

With this, we get the following result:

How to convert a video to a format supported in HTML5

We have just seen that to ensure the compatibility with all browsers we need to convert the original format into the mp4, webm y ogg supported in HTML5.

There are many video editors, either open source or commercial, available to perform this operation. In this post we have used  “Any Video Converter”.

This free tool is very simple to use, and the three html5 video formats we need can be directly chosen from the output format dropdown:

Any Video Converter para generar videos HTML5

 Posted by at 4:50 pm

  2 Responses to “How to insert a video in a wordpress blog post”

  1. HI,
    Thanks for this help.
    I’m trying to embedd video into wp page/post using JW Player for WordPress for video on my host server as you described above, and that works. However I want to dynamically change the source in the player when a link is clicked below the player. I have asked the question in the JW Player support but no answer.

    I came across this javascript/css/html and it doesn’t work
    http: / / jsfiddle. net/swinginsam/NWbUG/ (remove spaces)

    It loads the player and the image but the video doesn’t load when link clicked.

    Any help is appreciated.

    • Hi,

      the example you mention from jsfiddle.net is not using JW Player, but videoJS (see videojs.com).

      You should install the “videoJS for WordPress” plugin in your server for it to work.

      Hope this helps.

 Leave a Reply

(required)

(required)