How to add video to a WordPress blog

Adding a video to a WordPress blog is slightly different than adding a video to a normal webpage. The reason being WordPress is a script that runs on your web server with a database in background. Here I will point out the three methods of adding videos to a WordPress blog, followed by simple pros and cons of every method.

Through third party video sharing websites:

You can easily upload  your video to a video sharing website like Youtube or Vimeo and have your video shown on your WordPress blog. Every video sharing website provides you with a embed code to add the video to your website or blog. You have to paste this embed code in the HTML view of your WordPress editor when you are creating or editing a post.

Pros:

  1. Easy to implement.
  2. Secure. Is not vulnerable to WordPress hacking attacks as it does not use any php scripts.

Cons:

  1. Chance of loosing traffic since the video player will have a direct link back to the video sharing website. Chances are you could end up loosing your traffic instead of gaining.
  2. You will be governed by the terms and conditions of the video sharing website and if not respected properly your videos may get banned and removed.
  3. Will not come with all features that you may need. For example, showing your own custom image or graphics after the video ends.

add-video-to-wordpress-01

In WordPress

add-video-to-wordpress-02

Published video on blog

Conclusion: If you are sure that your videos will not violate any terms of the sharing website and that you would not be hurt for a percentage of traffic loss, go for this method.

By installing a WordPress plugin

A plugin is a like a extention of the core WordPress script and is essentially written in the programming language php. You can install plugins for WordPress (perhaps you already know this) for a thousand of reasons including adding a video to your blog. Buy or install a free plugin, enter the values in the plugin and your videos will be published on your blog. No copying or pasting of code needed and the process is seamless.

Pros:

  1. You host the videos so you have full control over them.
  2. A good plugin will upload the video file(s) for you.

Cons:

  1. A poorly coded plugin is a doorway for hackers to sneak in to your blog and hack, alter  your website. Good webhosts these days, are getting restrictive on several plugins or more specifically on which plugins to install and allow.
  2. A plugin might fail when WordPress undergoes a version change. Specifically if the plugin is also not updated by it’s author.
  3. Can be tricky to install and get going.
  4. May not come with all features that you may need. For example, showing an image after the video ends.

Conclusion: Use this option if you are confident of the plugin and it comes with good reviews.

By using a self hosted video solution

The most effective way to add a video to your blog is using a self hosted video solution that does not require a plugin to operate. How? In WordPress, you can easily embed a piece of code in the HTML view of your edit window when you are creating a new post for your blog. A self hosted video solution will provide you the html code for the video player which you can just paste where you want the video to appear. Additionally, you can upload the video files either to your own domain or to a separate domain or a cloud space like Amazon S3. The flexibility of this method is, the video player can have a host of features of like intro and outro images, redirect URLs, video-on click function. etc.

Pros:

  1.  Easy to setup.
  2. You host the videos so you have full control over them.
  3. Secure. Is not vulnerable to WordPress hacking attacks as it does not use any php scripts.
  4. You can get features like showing an image before the video plays, after the video ends, video on-click functions etc.

Cons:

  1. Manual upload of video files needed.

Chosing the video formats for web streaming

With the advent of smart phones and devices, it is estimated nearly 40% of your traffic access your website from a smart device like ipad or iphone or ipod or an android phone. Encoding rightly and for the right devices is a key for a successful video on a website that can cater to any device the page is accessed or requested from.

Every video file format contains two main tracks. A video track and an audio track. When a video is encoded or converted from one format to another, a software library called a codec transforms both the video and audio tracks to a new format based on some encoding settings. The codec is a part of the actual encoding software (think of the codec as an engine) and the encoding software as the car.

Previously when the entire traffic came from computers or laptops and there were no smart devices around, the universal video format for web was FLV. FLV files were generated through either of the two video codecs. Sorenson H.263 or On2 Vp6. The audio track in a FLV file was primarily a Mp3 track.

After 2009, Flash player started supporting the Mp4 video format including the variations (f4v, m4v). A  Mp4 video file consists of the video codec H.264 and the Audio codec AAC. The quality to file size ratio is better than a FLV if encoded rightly and this format is also supported today by a hosts of devices like ipads, iphones, ipods, Android phones and tablets.

However, not all Mp4 files play on the iOS devices, as iOS is very strict on the file format and more specifically how the file was encoded. We have experienced users who had tons of mp4 files but none streamed on any iOS devices till they used another encoder to re-encode again. We have also experienced many Mp4 files that never streamed over web as their file information was placed in the end of the file by the encoding software!

That being said, a rightly encoded Mp4 video file is what you need and your web videos will be viewable across:

  • Computers. (Flash video player)
  • Laptops. (Flash video player)
  • iOS devices ipads, iphones, ipods. (HTML5 native video player)
  • Android phones. (HTML5 native video player)
  • Android tablets. (HTML5 native video player)

Though some Android devices support Flash, it is still recommended to chose HTML5 as Flash takes a considerable amount of resources for web streaming on these little devices. Additionally you can provide a download to the Mp4 file for those devices that do not support web streaming.

There is another important point to note though. What if, the user’s PC has Flash support, turned off or disabled? Essentially a fallback is needed for such a situation and for a successful fallback, you need another video format to cover the entire range of browsers. See the table below.

Browser Primary
(Flash player)
Secondary
(HTML5 Fallback)
Firefox 20 FLV, Mp4 WebM
Chrome 26 FLV, Mp4 MP4, WebM
Safari 6 FLV, Mp4 MP4
Internet Explorer 9 FLV, Mp4 MP4
Internet Explorer 10 FLV, Mp4 MP4
Opera 11.5 FLV, Mp4 WebM

Evidently, you see, the video format WebM comes into the scene. WebM is a file format being sponsored by Google and contains of a Vp8 video codec and a Vorbis audio codec. File sizes will be 20% to 30% higher than the same quality Mp4 file.

Thus, to cover the entire range of PC browsers with Flash disabled or turned off (which is a very small percentage) you need to have two video file formats.

Mp4 and WebM.

So to summarize,

  • For Pcs and Laptops with Flash turned on – Mp4 plays via the flash video player.
  • For iOS devices – Mp4 plays via the native video player.
  • For Android devices – Mp4 plays via the device native video player.
  • For Pcs and Laptops with Flash disabled – Mp4 for IE9, 10, Chrome plays via HTMl5 player.
  • For Pcs and Laptops with Flash disabled – WebM for Firefox and Opera.

Ideally your setup should be a Flash primary video player with a Html5 fallback support if your majority viewers access your website from a computer or a laptop. You can also chose the other way that is a primary HTML5 video player with a Flash fallback if your majority viewers access your website from a smart device. So this entirely depends on your traffic and what the majority use to access your videos. You can also chose to put a device detection and serve the video accordingly. However that part is beyond the scope of this article.

Happy streaming.

Live streaming video explained

The Basics

Live streaming is not an out-of-the-box solution. It requires to be setup and then tweaked for optimization. A whole lot of people who purchase our software, often ask us “How do I stream live with your software?”. This article is for them to provide a proper understanding of how live streaming works.

Getting Started (What You Need)

Here is a checklist of what you need, before you stream live, the Flash way!

1. A video source, example a web camera or an IP Camera or a normal video camera. In all cases, the camera should come with it’s own software. Install this software on your PC and then attach your camera to your PC or laptop. You would be able to view the live video on your PC. This is the first step. If you cannot view the video on your PC, your camera has not been setup properly. So the first thing you need is a video source and it’s corresponding software.

2. The next step is to send this live video feed to a server which will relay the same feed on internet. For this step, you would need a live encoder. The live encoder, while being installed on your PC will accept the feed from your camera and then send this feed to the broadcast/media server (described below). The Adobe Live Encoder is a free live encoder and can be downloaded from here.

Live streaming video explained

Live streaming video

3. The server that accepts the feed from the live encoder and then relays or broadcasts the feed is known as a “Streaming Server” or a “Media Server”. It is different from a normal web server that hosts your websites. The Streaming Servers are equipped with a special software that are capable accepting the feed from the encoder and then broadcasting it as a audio-video live stream using real time message protocol. (RTMP). For this step, you have to decide between a few options. You can install a server side media streaming software like Flash Media Server or Wowza or Red5 on a dedicated web server or you can hire a service that provides you an account to use these through their servers. The later is suggested for small scale live streaming, since FMS and Wowza is costly (> $2400). Red5 is free, but, has issues. It is also very resource hungry. That is, you need good processors and large RAMs on your server to run Red5 smoothly.You can also choose Amazon EC2, that provides a “Pay as you use” feature. We can guide or help you to choose a media server or media server service that we feel appropriate for you after listening to your live streaming needs.

4. Finally to display this live stream on your website, you would need a video player that is capable of playing this live stream. This video player will be embedded on your HTML webpage and should be uploaded with your webpage on your normal web server or web host. To setup this player manually, can be a difficult task and that’s EasyFLV comes handy. All you have to do is provide the inputs on the software, and it will generate the live video player with the corresponding code for you. Upload the video player with your HTML and you are done.