Page 1 of 1

Embed Youtube Videos in DITA

Posted: Fri Apr 26, 2013 4:06 pm
by 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.

Re: Embed Youtube Videos in DITA

Posted: Fri Apr 26, 2013 4:16 pm
by 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

Re: Embed Youtube Videos in DITA

Posted: Mon Apr 29, 2013 3:53 pm
by fabdf
Radu,

I followed your advice and got it to work.

Thanks for your help.

Re: Embed Youtube Videos in DITA

Posted: Thu Jun 26, 2014 10:59 pm
by 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

Re: Embed Youtube Videos in DITA

Posted: Fri Jun 27, 2014 8:56 am
by 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

Re: Embed Youtube Videos in DITA

Posted: Fri Jun 27, 2014 4:13 pm
by BobbyG66
Thanks Radu, but still not getting the controls to work.
Are the "video" tags not supported yet?

Thanks
BG

Re: Embed Youtube Videos in DITA

Posted: Fri Jun 27, 2014 4:28 pm
by 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

Re: Embed Youtube Videos in DITA

Posted: Fri Jun 27, 2014 5:19 pm
by BobbyG66
Is there a different video format that works better with Oxygen and XHTML?

Re: Embed Youtube Videos in DITA

Posted: Mon Jun 30, 2014 9:31 am
by 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

Re: Embed Youtube Videos in DITA

Posted: Tue Jul 08, 2014 4:22 pm
by 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