Plone: How use the html5 video tag with content types?

Question

I have a zpt (zope page template), where I want to use a video tag, something like:

<video src="FILE_LOCATION" width="320" height="240" type='video/ogg; codecs="theora, vorbis"' controls></video>

where FILE_LOCATION would be a content type of plone. I can use either 3 ways to acces the file:

1) file.download_url #gives me: http://localhost:8000/a/acervo/testeflv2/at_download/file
2) file.absolute_url #gives me: http://localhost:8000/a/acervo/testeflv2
3) file.getFile() #gives me the file (like if I open the video file on a text editor)

obs: If I click the link returned from the first or the second choice on a browser, it opens the download window from the browser to download the file.

On the zpt, I can do something like this:

<video src="" id="video_play" width="320" height="240" type='video/ogg; codecs="theora, vorbis"' controls
       tal:attributes="src python:file.absolute_url()"></video>

where "python: file.absolut_url()" can be changed to that other options.

But any of that options are working. The page shows me a block where the video should be played, but no video is played.
How can I make this work?

Answer 1

You will probably need the download link - you want pure data, not a Plone default view.

i.e.

<video src="" id="video_play"    width="320" height="240"    type='video/ogg; codecs="theora,    vorbis"' controls tal:attributes="src    file/download_url"></video>

If that doesn't work:

• Does your browser support .ogg? (Try with both firefox and chrome)
• is it really ogg?
• what happens if you open the download url directly? Does the browser play anything?
• what does src point to after rendering the template (view-source or inspect element). Does the url look correct?

Answer 2

The main problem come from the 'Content-Disposition' header. Here an example with hardcoded ogg/theora format. Create a script 'inline_download' in your cutom skin with this code inside:

RESPONSE =  container.REQUEST.RESPONSE

filename = context.getFilename()
obj = context.getFile()
RESPONSE.setHeader('Content-Disposition', 'inline;filename="%s"' % filename)
RESPONSE.setHeader('Content-Type', 'video/ogg')

return obj

Now http://yourpath/video/inline_download should displayed correctly the video without extra html.

Finally add this code in your view:

<video height="240px" width="320px" type="video/ogg; codecs='theora, vorbis'"
       controls="controls" preloas="none"
       tal:attributes="src string:${here/absolute_url}/inline_download"/>