Skip to main content
stevej89009549
stevej89009549
Inspiring
June 1, 2021
Answered

Follow on to closed captions in event video post

  • June 1, 2021
  • 1 reply
  • 226 views

TLCMediaDesign kindly replied to my previous post on controlling closed captions in event videos:

 

"The only way I know of doing this is to create the video in an html page and use a .vtt file for the captions, when the browser sees the vtt include, it will also include a CC button."

 

Sorry, I need a little more help with this. I assumed that it would be obvious which file to modify in the published Captivate HTML5 project to add the HTML <track> tag to include the closed captions, something like:

 

<video width="320" height="240" controls>
  <source src="Vi2.mp4" type="video/mp4">
  <track src="Vi2.vtt" kind="subtitles" srclang="en" label="English">
</video>

 

I can only find reference to the video in the CPM.js file. Please can you provide more guidance how to create the video in an html page and use a .vtt file for the captions. NB I have created the .vtt file in YouTube.

 

Thanks

    This topic has been closed for replies.
    Correct answer TLCMediaDesign

    create and html page with the VTT file and the video file all in the same location:

     

    <!doctype html>
    <html>
    <head>
    <meta charset= "utf-8">
    <title>Video</title>
    </head>

    <body style="margin:0 0 0 0">
    <video controls autoplay src="Vi2.mp4" width="320" height="240">
    <track src="Vi2.vtt" kind="subtitles" srclang="en" label="English">
    </video>
    </body>
    </html>

     

    Then zip all three files and insert into Captivate as an html5 animation. Set the size in Captivate the same size as the video.

     

     

    1 reply

    TLCMediaDesign
    TLCMediaDesignCorrect answer
    Inspiring
    June 1, 2021

    create and html page with the VTT file and the video file all in the same location:

     

    <!doctype html>
    <html>
    <head>
    <meta charset= "utf-8">
    <title>Video</title>
    </head>

    <body style="margin:0 0 0 0">
    <video controls autoplay src="Vi2.mp4" width="320" height="240">
    <track src="Vi2.vtt" kind="subtitles" srclang="en" label="English">
    </video>
    </body>
    </html>

     

    Then zip all three files and insert into Captivate as an html5 animation. Set the size in Captivate the same size as the video.

     

     

    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices