Closed captions or transcript for audio and video files

Re: Closed captions or transcript for audio and video files

by Michael Milette -
Number of replies: 3
Picture of Core developers Picture of Documentation writers Picture of Particularly helpful Moodlers Picture of Plugin developers Picture of Testers Picture of Translators

Hi Narayanan,

When it comes to the audio files, there is an HTML5 <audio> tag which creates a player on your page without the need for a plugin. You don't need closed captioning for audio, just a transcript. Example:

<audio controls title="Ride of the Valkyries">     <source src="http://www.archive.org/download/RideOfTheValkyries/ride_of_the_valkyries_2.mp3" type="audio/mp3" />     <source src="http://www.archive.org/download/RideOfTheValkyries/ride_of_the_valkyries_2.ogg" type="audio/ogg" /></audio> <details>     <summary>Looking for a Job - Transcript</summary>     <p>Hi, my name is Eric, and I&#39;m am here to help you learn how to find a job.</p>     ... </details>


When it comes to videos, you can also do this right in HTML5:

<video poster="your-video-poster.jpg" controls tabindex="0" title="Your Video">
    <source  src="your-video.mp4" type='video/mp4' />
    <source  src="your-video.webm" type='video/webm' />
    <track src="#inline-captions" label="English Captions" kind="subtitles" srclang="en-us" default />
</video>
<track src="#inline-captions" kind="captions" data-type="text/html" />
</video>
<details id="inline-captions">
   <summary>Looking for a Job - HTML5 Transcript/Captions</summary>
    <p><strong>(Animated pen draws a red line that leads into the text Looking for A Job)</strong></p>
    <p><strong>(Cut to a medium shot of the Host. LINE DRAWING GRAPHIC: Stick person appears and waves.)</strong></p>
    <p><span data-begin="2.50s" data-dur="3.84s">Hi, my name is Eric, and I&#39;m will be teaching you this section of the course.</span></p>
    ...
</details>


You would normally need to upload your transcript as an TTML or WebVTT file and then insert the URL to the file in the <track> tag. This is a real pain in Moodle but it will work.

There is an alternative. As seen above, it is possible to embed your transcript right in your Moodle page... if you use Moodle WxT. As seen above, Moodle WxT supports embedding your transcript right in your Moodle page which is very convenient. Moodle WxT even automatically falls back to a Flash player for older browsers that don't support the HTML5 audio and video tags. Moodle WxT's theme is more WCAG 2.0 level AA compliant than most Moodle Themes that are available today. I only say "most" because I haven't tested them all. To learn more about Moodle WxT, contact Instrux Media.

Hope this helps.

Best regards,

     Michael

Average of ratings: Useful (1)
In reply to Michael Milette

Re: Closed captions or transcript for audio and video files

by Jon Fila -

I'd like to get this to work but I am not able to. Every time I click update from the HTML version of my page it adds a closing tag </track>. I do not think that is supposed to be there in order for the player to work. I'm a site admin and have enabled trusted content. Is there anything else I should be trying.

When I view the page in Chrome I can briefly see the CC label but it soon disappears and is not available after the page loads.


In reply to Jon Fila

Re: Closed captions or transcript for audio and video files

by Jon Fila -

Okay, through some configuration of tweaks I was finally able to get this to work. It may have had something to do with the formatting of my VTT file but I can't be sure since I tried so many things. The upside, this works and works well for almost all the browsers I've tested it on. It's keyboard accessible and works on an iPad. The downside is that it does not work in FireFox. Still trying to decide if that's a deal breaker for me or not.

In reply to Jon Fila

Re: Closed captions or transcript for audio and video files

by Bradley Botkin -

Could you post your solution? I've been trying to embed HTML <video>, etc. directly into Moodle pages and activities without any luck displaying the captions. I know the VTT file is correct and I'm quite familiar with the closed caption <track> aspects of closed captioning in HTML5.  Moodle isn't making this easy.

Thanks,

--Brad