This site has been archived and you can no longer log in or post new messages. For up-to-date community resources please visit ezplatform.com

eZ Community » Forums » Setup & design » How to use the new HTML5 Video datatype?
expandshrink

How to use the new HTML5 Video datatype?

How to use the new HTML5 Video datatype?

Saturday 16 October 2010 2:51:35 pm - 6 replies

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? blunk.gif Emoticon

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)

Saturday 16 October 2010 5:50:39 pm

I think there are several issues here. You changed an existing class, that class has several templates overrides attached to it, so that won't work without changing the templates as well.

Create a new class instead, and select html 5 video as type on ezmedia datatype.
Then upload a video that works in the browser you want to test in.

Basically this is just low level support, we have not implemented any kind of browser detection to serve the format your browser support, such a functionality is left for implementors to do for now, in next version we'll have something for it in webin/flow*.

see: http://en.wikipedia.org/wiki/HTML5_video#Browser_support

* Probably as a template implementation with webM + h264 attributes and some kind of JS to select correct one or serve h264 using flash if html5 is not supported.

Modified on Saturday 16 October 2010 5:51:21 pm by André R

Saturday 16 October 2010 8:44:09 pm

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? blunk.gif Emoticon

Modified on Saturday 16 October 2010 10:20:09 pm by Marco Zinn

Saturday 16 October 2010 11:37:07 pm

Photoshop and Powerpoint??

Kidding! have a nice weekend happy.gif Emoticon

Modified on Saturday 16 October 2010 11:37:23 pm by André R

Tuesday 19 October 2010 11: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

Thursday 21 October 2010 8:36:53 pm

Hi Baard,

thanks for your reply and explanation.

Greetings from Germany!

Tuesday 15 March 2011 8: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

expandshrink

You must be logged in to post messages in this topic!

36 542 Users on board!

Forums menu

Proudly Developed with from