How to use the new HTML5 Video datatype?

Saturday 16 October 2010 5:51:35 am

The press release etc. of ez4.4 show off the new HTML5 video datatype.

Somehow, i cannot get this working.

I did a fresh install of ez 4.4 (community edition) and use firefox 3.6 and Safari in Win7.

I have converted some short videos to MPEG4 using "handbrake". That produced a file with an m4v extension. As that did not work, i renamed it to .mp4

Then, i modified the "media file" attribute in the "video/flash player" class to use the "HTML5 video" player type.

On my (german) admin site, that class defintion now shows "media player type: EMPTY". I assume, that may be a missing translation of "HTML5 video" to german.

Now, when i upload a MP4 video into a new"video/flash player" content object, the binary file is recognized as MIME-Type "video/mp4".

On the admin site (object preview tab), i can see a video-HTML-tag in the html source. Nice. But it does not display anything (just some white space) in Firefox. In Safari, it displays a static image from the video, but no video controls or so.

But on the front side, ez still generated a the ezPublish flash player (which works fine), but it does not create any VIDEO-HTML-Tag. I cleared caches, of course.

So, how did Bard make the MP4 demo work in the webinar some days ago? ;)

Do i need specific Server settings? Are the current ezflow output templates fit for the new datatype?? Why does my firefox not show the video?

(I can access the MP4 video file in through the web browser at e.g. .../ezflow_site_admin/content/download/108/573/Samsung_LED-1.mp4 . It loads and displays fine in a quicktime player within firefox)

Marco
http://www.hyperroad-design.com

Saturday 16 October 2010 11:44:09 am

Hi André,

thanks for your reply on Saturday.

I copied the video/flash player class to a new "html5 video" class and set the player to "HTML5 video". That got me rid of the override template in ezflow and now shows nice video-html-tags in ezflow.

In firefox, i can now play an ogg video, but i manually have to display the video controls or start the video in the context menu. In Safari, the .ogg video does not display (not supported by Safari, i think). An MP4 Video show a very large static picture, but i cannot play the video (nothing usefull in the context menu either).
Edit: One should mark the checkbox for "Controller" in the content object. This will reveal the video controller and i can now play the .ogg video in Firefox an the mp4 video in Safari (still way too large)

Both cases, the new content objects are not shown in my parent gallery at all (the child nodes are not displayed, while the old "flash/video" objects are shown with a neat "play me" icon)

I'm still wondering, how Bard and Roland did the demo in the webinar...

He showed off, that the new HTML5 videos automatically are shown in a parent gallery with nice thumbnail images. And, they did run perfectly fine with safari.I think, he "uploaded" the .mp4 files using WebDAV (or multiupload).

I thought, that my mp4 file is broken, but it runs great in both Firefox and Safari, when i open the file through its direct URI.

Bard, what's the trick involved? ;)

Marco
http://www.hyperroad-design.com

Tuesday 19 October 2010 2:21:35 am

The video tutorial and the webinar was done with some small changes. I created a new class: HTML5 video. Added title + media file. In the media file I selected HTML5 video in the class setup.

The template that shows the video is actually the standard template, no modifications done. I then also created a galleryline template so that the video shows up in the gallery. The thumbnail is "generated" automatically by the browser when using the video tag - no magic. I also connected the uploadsetting so that mp4 files automatically are stored as the new HTML5 class when being uploaded.

Then you get what I show here:

http://ez.no/Demos-videos/HTML-5-Video-with-eZ-Publish

-bård

Documentation: http://ez.no/doc

Tuesday 15 March 2011 12:11:33 am

Hi Baard,

I came across your post here about uploading MP4 files as HTML5 video with the multiupload tool.

I changed my ezmultiupload.ini and added under 'filetype' the exension '*.mp4' and after the upload progress bar is done nothing happens. I changed the template already to display HTML5 video which works.

How do you connect the uploadsettings so that mp4 files are stored as new HTML5 video as you mentioned in your previous post? What are the changes I have to make in the ezmultiupload.ini file?

Thank you.

Uli