Embed Youtube Videos in DITA

[fabdf]

Hi,

I'm using the <object> element in the task <example> to embed a Youtube video in my html output. This is the code I used:

<example><object width="385" height="480">
<param name="movie"
value="http://www.youtube.com/embed/USFQKvjZAF ... detailpage"/>
<param name="allowFullScreen" value="true"/>
<param name="allowscriptaccess" value="always"/>
</object></example>

When I generate the output, it does not work. Is there something that I'm doing wrong? Also, do I need to modify something in any of the xsl files?

Thank you.

[Radu]

Hi,

The DITA <object> element maps to the HTML <object> element:

http://docs.oasis-open.org/dita/v1.2/os ... tml#object

So you could take a look at the generated HTML file and first try to modify it directly so that it starts working in the browser. Then you can also modify the DITA content accordingly.

I google around and the last example on this page:

http://www.w3.org/QA/2008/09/howto-inse ... video.html

seemed to work well when published from my DITA content to XHTML.

Regards,
Radu

[fabdf]

Radu,

I followed your advice and got it to work.

Thanks for your help.

[BobbyG66]

I am trying to embed an .mp4 video.
I cannot get the controls to work. As you can see I have tried different parameters.
Has anyone been able to do this?

Here is my current code:

Code: Select all

    <object width="568" height="320" class="- topic/object ">

      <param name="movie" value="http://LINKTOVIDEOFILE.mp4" type="video/mp4" class="- topic/param "/>

      <param name="allowscriptaccess" value="always" class="- topic/param "/>

      <param name="allowFullScreen" value="true" class="- topic/param "/>

      <param name="control" value="true" class="- topic/param "/>

      <param name="ShowDisplay" value="true" class="- topic/param "/> 

      <param name="autoplay" value="false" class="- topic/param "/>

    </object>

Thanks
BG

[Radu]

Hi,

I think that the object @data attribute should point to the movie, something like:

Code: Select all

      <object width="568" height="320" data="http://LINKTOVIDEOFILE.mp4">

        <param name="allowscriptaccess" value="always" />

        <param name="allowFullScreen" value="true" />

        <param name="control" value="true" />

        <param name="ShowDisplay" value="true" />

        <param name="autoplay" value="false" />

      </object>

You can see how this translates in the published XHTML content to the XHTML object element.

Regards,
Radu

[BobbyG66]

Thanks Radu, but still not getting the controls to work.
Are the "video" tags not supported yet?

Thanks
BG

[Radu]

Hi,

I agree, using <object> in XHTML to link to a video is a pain.
Probably in Oxygen 16.1 we'll add some WebHelp customizations so that when a DITA <object> element has an outputclass="video" to publish it to an XHTML <video> element.

In the meantime this XSLT stylesheet:

OXYGEN_INSTALL_DIR\frameworks\dita\DITA-OT\plugins\org.dita.xhtml\xsl\xslhtml\dita2htmlImpl.xsl

has an XSLT template which converts DITA <object> to XHTML <object>:

<xsl:template match="*[contains(@class, ' topic/object ')]" name="topic.object">

which you could maybe change to generate a <video> element instead.

By the way, from what I tested Firefox does not seem to properly support embedding mp4 videos in the web page (either as object or as video).

Regards,
Radu

[BobbyG66]

Is there a different video format that works better with Oxygen and XHTML?

[Radu]

Hi,

The questions is not what works better with Oxygen but what works better in a web browser.
You should create a small XHTML document (in Oxygen for example) with a reference to various video formats and see how those references are rendered in various Web browsers.
I think most references to videos are still flash-based.
The "webm" is a format which also should be compatible cross-browser:

http://www.webmproject.org/users/

Once you find a movie format which works properly cross-browser when referenced from the XHTML page, you can change the XSLT stylesheet dita2htmlImpl.xsl I mentioned earlier to generate that particular XHTML movie reference when it encounters a DITA object element.

Regards,
Radu

[BobbyG66]

Radu,

thanks for your suggestions but I was not able to understand or make them work.
I did get a workound with the following code:

Code: Select all

    <object width="568" height="320" class="- topic/object ">

      <param name="movie" value="http://LINKTOVIDEOFILE.mp4" type="video/mp4" class="- topic/param "/>

      <param name="autoplay" value="false" class="- topic/param "/>

      <param valuetype="data" value="0.70" name="scale" class="- topic/param "/>

    </object>

By adding the following line:

Code: Select all

<param valuetype="data" value="0.70" name="scale" class="- topic/param "/>

This gave me the full video image to scale and the controls.
It does seem to be adding some padding to the outer container, but it works for now.

Thanks
BG