Serving iPad Capable Video from eZ Publish

Some setup required

The literal tag icon in eZ online editor

The literal tag in the eZ Online Editor (ezoe) in default install has a class of "none" and that is the only choice.

To embed content such as youtubes, "html" must be an option for this literal tag.

There are security implications that should be understood before enabling this option. Basically anyone allowed access to the online editor, can potentially insert some nasties into the site content.

Only consider enabling the html literal tag if access to the online editor is restricted to trusted parties. Adding the html option is as simple as editing /settings/override/content.ini.append to add these lines;

[literal]

AvailableClasses[]

AvailableClasses[]=html 

No need to clear cache or any of that kind of stuff. The html option is immediately available. After the edit, simply click the "insert literal text" icon as shown above and html should appear as an option.

Serving Video Content from local Web Server

Double dashes are used to denote the standard "less than" html opening tags in the text below. Where the -- is found, replace with < when actually coding.

Outside of the eZ Publish framework, a simple html5 --video> tag allows serving content to html5 capable browsers. Generally .h264 video file types wrapped in this video tag play well with the Safari browser on the iPad.

Serving Video Content Inside eZ Publish

The literal tag combined with a video tag, is simple, and it works for providing content to the Safari browser on a computer.

Video tag within literal tag works for Computers

But that same content item wrapped in the same way, fails when accessed from an iPad!

Video tag within literal tag fails on the iPad

What is a Web developer to do?

The Object Tag Fix

The fix for the iPad, which also works on html5 capable computer Web browsers, is wrapping the movie with object and embed tags. Forget the video tag for now.

Psuedocode for using the object and embed tags within an eZ literal tag:

object width="425" height="344" 

param name="movie" value="chocracer" /param 

embed src="http://mbp.local/chocracer.mp4" 

/embed

/object

Computer Browser that supports HTML5 - Object tag works

Video in Object tag from Computer Browser

iPad Safari browser object tag works

Video in Object tag viewed on iPad

Standardization is a good thing. But when Stevo says flash crashes his iPad and eats its battery, workarounds are in order.

F3 race car video from University of Warwick -- http://www2.warwick.ac.uk/newsandevents/podcasts/engineering-technology/60-building-chocolate-powered

File Types

Tested and proven to work are:

• .mp4
• .m4v
• .mov

Some popular formats tested that do not play on the iPad even within these tags include:

• .avi
• .flv - duh
• .mpg
• .ogv

More

The iPad does not currently fully implement the html5 Canvas tag. Load the link below in a newer webkit (Safari or Chrome) browser for a cool rotating 3D image.

http://www.craftymind.com/factory/html5video/CanvasVideo3D.html

Then load it on the iPad and notice only the rotating bar on the bottom is visible.

Corrected: At WWDC a fairly major revision to the iPad OS is reported for late June. Hopefully more html5 goodness comes with that.

Correction: The ios revision only happened for the iPhone, the iPad is now scheduled for later this year.