QR code for this page

Powered by Titania Delivery

Adding Video and Audio Objects in DITA WebHelp Output

You can insert references to video and audio media resources (such as videos, audio clips, or embedded HTML frames) in your DITA topics and then publish them to WebHelp output. The media objects can be played directly in all HTML5-based outputs, including WebHelp systems.

To add media objects in the WebHelp output generated from DITA documents, follow the procedures below.

Adding Videos to DITA WebHelp Output

  1. Edit the DITA topic and insert a reference to the video by manually adding an object element, as in one of the following examples:
    <object outputclass="video" type="video/mp4" data="MyVideo.mp4"/>

    or, instead of the data attribute, you can specify the video using a parameter like this:

    <object outputclass="video">
  <param name="src" value="videos/MyVideo.mp4"/>
</object>

  2. Apply a DITA to WebHelp transformation scenario to obtain the output.

    Result: The transformation converts the object element to an HTML5 video element.

    <video controls="controls"><source type="video/mp4" src="MyVideo.mp4"></source>
</video>

Adding Audio Clips to DITA WebHelp Output

  1. Edit the DITA topic and insert a reference to the audio clip by manually adding an object element, as in one of the following examples:
    <object outputclass="audio" type="audio/mpeg" data="MyClip.mp3"/>

    or, instead of the data attribute, you can specify the audio clip using a parameter like this:

    <object outputclass="audio">
  <param name="src" value="audio/MyClip.mp3"/>
</object>

  2. Apply a DITA to WebHelp transformation scenario to obtain the output.

    Result: The transformation converts the object element to an HTML5 audio element.

    <audio controls="controls"><source type="audio/mpeg" src="MyClip.mp3"></source>
</audio>

Adding Embedded HTML Frames (such as YouTube videos) to DITA WebHelp Output

  1. Edit the DITA topic and insert a reference to the embedded object by manually adding an object element, as in one of the following examples:
    <object outputclass="iframe" data="https://www.youtube.com/embed/m_vv2s5Trn4"/>

    or, instead of the data attribute, you can specify the object using a parameter like this:

    <object outputclass="iframe">
  <param name="src" value="http://www.youtube.com/embed/m_vv2s5Trn4"/>
</object>

  2. Apply a DITA to WebHelp transformation scenario to obtain the output.

    Result: The transformation converts the object element to an HTML5 iframe element.

    <iframe controls="controls" src="https://www.youtube.com/embed/m_vv2s5Trn4">
</iframe>

Parent topic: Customizing the WebHelp Responsive Output

Was this helpful?