How to add captions or subtitles to videos

[kj_rk]

Hi All,

I am able to embed a video in my HTML5 output, but I also want to add subtitles/captions to my video.
I found that the `<track>` HTML5 tag can be used to include a text file with subtitles. But, I am not able to figure out as to how I can insert the `<track>` tag in my HTML output. I tried using the `param` tag, but that add <track> as an attribute of the <video> element itself.

image.png

All help is appreciated. Trying to make the video accessible for everyone.

Thanks!

[Radu]

Hi,

I'm afraid that for now we do not have a solution for this using DITA elements. We have an internal issue registered for this and I added your details to it, we'll update this forum thread if a fix becomes available.

As a workaround you can embed pure HTML content directly inside DITA topics:
https://www.oxygenxml.com/doc/versions/ ... -html.html

Regards,
Radu

[kj_rk]

Thanks Radu!

That was a helpful workaround, but when I try it with the following code, it does not render anything in the HTML file.
Can you please tell me if anything is missing or what is wrong here?
What kind of transform should I use? I tried DITA HTML5.

Code: Select all

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE concept PUBLIC "-//OASIS//DTD DITA Concept//EN" "concept.dtd">
<concept id="test_video">
    <title>Test video</title>
    <shortdesc></shortdesc>
    <conbody>
        <foreign outputclass="html-embed"><![CDATA[
                <video width="299" height="168" controls>
                   <source src="../../../Desktop/first_version.mp4" type="video/mp4">
                   <track kind="captions" src="../../../Desktop/test.vtt" srclang="en" label="English">
                 </video>
                ]]></foreign>
    </conbody>
</concept>

[Radu]

Hi,

If the generated HTML document in the output file looks correct, probably the problem is that your movie and subtitle files are not automatically copied to the output file.
You should place the movie and subtitle files inside the project folder in a subfolder somewhere, then add in the DITA Map references to both of them like:

Code: Select all

<topicref href="movies/first_version.mp4" processing-role="resource-only"/>
<topicref href="movies/test.vtt" processing-role="resource-only"/>

This should make the publishing engine automatically copy them to the output folder.
Then double check they are present in the output folder in the corresponding subfolder and take care to properly refer to them from the HTML fragment.

Regards,
Radu

[kj_rk]

Hi Radu,

The HTML file that is generated is empty. In other words, nothing gets generated in the HTML file.

[Radu]

Hi,

One more thing, as the Oxygen docs says, the embedded HTML fragment needs to be well-formed HTML, so something like:

Code: Select all

<video width="299" height="168" controls="">
    <source src="../../../Desktop/first_version.mp4" type="video/mp4"/>
    <track kind="captions" src="../../../Desktop/test.vtt" srclang="en" label="English"/>
</video>

Regards,
Radu

[kj_rk]

Thanks for that input, Radu! I was able to get it to work after adding the closing slashes, although the pure HTML would have worked just fine without those.

Having the support to add captions directly using DITA (instead of embedding HTML) would be a great feature.

Thanks for your time!