Edit online

How to Add 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

Edit the DITA topic and insert a reference to the video through one of the following methods:
- Use the Insert Media Object toolbar action.
- Drag (or copy) the video file from your system explorer or the Project view and drop (or paste) it into your document.
- Manually add 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>
```
Apply a DITA to WebHelp transformation 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

Edit the DITA topic and insert a reference to the audio clip through one of the following methods:
- Use the Insert Media Object toolbar action.
- Drag (or copy) the audio file from your system explorer or the Project view and drop (or paste) it into your document.
- Manually add 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 video using a parameter like this:
```
<object outputclass="audio">
  <param name="src" value="audio/MyClip.mp3"/>
</object>
```
Apply a DITA to WebHelp transformation 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

Edit the DITA topic and insert a reference to the embedded object by using the Insert Media Object toolbar action or 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>
```
If you want the video to be allowed to play in full screen mode once the document is converted to XHTML output, also add an allowfullscreen parameter and set its value to true:
```
<object outputclass="iframe" data="https://www.youtube.com/embed/m_vv2s5Trn4"/>
  <param name="allowfullscreen" value="true"/>
</object>
```
Tip: If you copy the embed code from the source and paste it into the Insert Media dialog box (see the specific instructions: here), the allowfullscreen parameter will automatically be added and all you have to do is set the value to true.
Apply a DITA to WebHelp transformation 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>

Resources

For more information, see the following video demonstration: