Hosting a Video on a WordPress Site which will be Compatible with iPad and iPhone Devices
A lot of people use Youtube to play videos, but every so often KMH Kreations encounters a client that wants to host and embed a video on their WordPress website, and not share the video on Youtube. There are many different video players out there that will play on most browsers, but use Flash as a player and therefore alienate iOS users from being able to see the video. With mobile phones growing in popularity as web devices, Flash players will not do.
Eventually HTML5 hopefully will replace Flash in everything including browser video playback, but for now, this tutorial will help WordPress website owners in the meantime.
Video Format
The best video format that has the most compatibility is the .mp4 video file. Using .H.264/AVC video, and .MPEG 2/4 AAC/LC audio, the .mp4 video will play in Google Chrome, Internet Explorer, Mozilla Firefox, Opera, and Apple’s Safari browser, which means the video will play on iOS devices like the iPad, iPhone, and iPod Touch.
The Plug-in
The best plug-in to use on your WordPress website is MediaElement.js – HTML5 Video & Audio Player which can be downloaded at http://wordpress.org/extend/plugins/media-element-html5-video-and-audio-player/.
According to the author
“This is a Video and audio plugin for WordPress built on the MediaElement.js HTML5 media player library. The plug-in Provides Flash or Silverlight fallback players for non-HTML5 browsers, and supports iPhone, iPad, and Android as well as MP4, OGG, WebM, WMV, MP3, WAV, WMA files.”
Keep in mind that Mac devices will not play Microsoft’s .wmv files without a plug-in. That is why .mp4 is a better and more compatible choice for the video format.
Download, install, and then activate the plug-in. Afterwards, go to the page/post and find the spot where you want to add the video.
The Code
The Breakdown
mp4=”http://yoursite.com/yourvideo.mp4” – The location of your video online.
poster=” http://yoursite.com / yourvideo.png” – This is the location of the default image shown before the user plays the video.
preload=”true” – Load the video the second the page loads.
autoplay=”true” – Starts the video immediately upon viewing the webpage. (Note: does not work on iPad & iPhone).
width=”640″ – The width of the video.
height=”264″ – The height of the video.
That’s it. The video should play on whatever browser/device you choose! At the current moment it is unfortunate that the video won’t autoplay on the iPad or iPhone, but they can tap the play button instead.
