Embed Youtube Videos in DITA

Questions about XML that are not covered by the other forums should go here.
fabdf
Posts: 6

Embed Youtube Videos in DITA

Fri Apr 26, 2013 4:06 pm

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/USFQKvjZAFM?feature=player_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
Posts: 5213

Re: Embed Youtube Videos in DITA

Fri Apr 26, 2013 4:16 pm

Hi,

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

http://docs.oasis-open.org/dita/v1.2/os/spec/langref/object.html#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-insert-youtube-video.html

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

Regards,
Radu
Radu Coravu
<oXygen/> XML Editor
http://www.oxygenxml.com
fabdf
Posts: 6

Re: Embed Youtube Videos in DITA

Mon Apr 29, 2013 3:53 pm

Radu,

I followed your advice and got it to work.

Thanks for your help.
BobbyG66
Posts: 23

Re: Embed Youtube Videos in DITA

Thu Jun 26, 2014 10:59 pm

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
Posts: 5213

Re: Embed Youtube Videos in DITA

Fri Jun 27, 2014 8:56 am

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
Radu Coravu
<oXygen/> XML Editor
http://www.oxygenxml.com
BobbyG66
Posts: 23

Re: Embed Youtube Videos in DITA

Fri Jun 27, 2014 4:13 pm

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

Thanks
BG
Radu
Posts: 5213

Re: Embed Youtube Videos in DITA

Fri Jun 27, 2014 4:28 pm

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
Radu Coravu
<oXygen/> XML Editor
http://www.oxygenxml.com
BobbyG66
Posts: 23

Re: Embed Youtube Videos in DITA

Fri Jun 27, 2014 5:19 pm

Is there a different video format that works better with Oxygen and XHTML?
Radu
Posts: 5213

Re: Embed Youtube Videos in DITA

Mon Jun 30, 2014 9:31 am

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
Radu Coravu
<oXygen/> XML Editor
http://www.oxygenxml.com
BobbyG66
Posts: 23

Re: Embed Youtube Videos in DITA

Tue Jul 08, 2014 4:22 pm

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

Return to “General XML Questions”

Who is online

Users browsing this forum: No registered users and 2 guests