• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers

Follow on to closed captions in event video post

Community Beginner ,
Jun 01, 2021 Jun 01, 2021

Copy link to clipboard

Copied

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

Views

76

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

correct answers 1 Correct answer

Community Expert , Jun 01, 2021 Jun 01, 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.

 

 

Likes

Translate

Translate
Community Expert ,
Jun 01, 2021 Jun 01, 2021

Copy link to clipboard

Copied

LATEST

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.

 

 

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines