Buzz: Questions & Answers

Implementing Subtitles into my coded HTML Assessment

Follow
Answered
Sam Martinez

Hey Team, I am encountering an issue as my videos do not have a ".vtt" file for them. I have a student that is hard of hearing and so this is imperative that I get it up and running. I am trying to tag it to the HTML file and I also have uploaded it into my file directory in the same exact folder location as my ".html" file is housed. I have tried referencing it as a local "3.04.vtt" and tried as a URL of the location, and it was able to produce the subtitles on the "preview" of my HTML file in the resources, but when I implement this into an Assessment type "HTML" it does not show the captions.

Am I missing something? Thanks, Sam

"    <div class="video-container">
      <video id="video1" controls preload="metadata">
        <source src="CORRECT VIDEO URL" type="video/mp4">
        <track src="3.04.vtt" kind="subtitles" srclang="en" label="English" default>
        Your browser does not support the video tag.
      </video>
      <a:question />"

Comments (5)

Sort by
Brian Williams
  • Agilix team member

Hey Sam,

Would using a video editor be a workable solution for this? For example, I did a quick search and found some tools that can embed captions directly into a video: HandBrake, Shotcut, and FFmpeg (command line). This approach would ensure the captions are visible in any context within Buzz, including Assessments, without relying on a separate .vtt file.

 

 

0 Comment actions Permalink
Sam Martinez

Hey Brian,

Yea, I looked at those programs, but I was not able to use them on my school issued device.  I can see about asking my administration about it.

I was able to do this with different task items, but not "assessment" which I thought was weird.

Sam

0 Comment actions Permalink
Sam Martinez

Just confirmed, it only does not work when in an "Assessment" Html, and it works when in "Assignment" type as a HTML course resource.

 

Why ?

Sam

0 Comment actions Permalink
Brian Williams
  • Agilix team member

Hi Sam! 

We don't render some objects defined in assessment templates and so in such cases the author may need to specify a  [~] character within the path so the content will display correctly. 

I assume the video is hosted on a third party site and the track file is hosted on Buzz? If so, you may try to declare a [~] in the URL path. If you have stored the file in your root directory, then you may try the format as seen in the code below. If the file exists in a subfolder, then you will need to declare the subfolders down to the location of the track file: [~]/folder1/folder2/folder3/3.04.vtt

 

<div class="video-container">
  <video id="video1" controls preload="metadata">
    <source src="CORRECT VIDEO URL" type="video/mp4">
    <track src="[~]/3.04.vtt" kind="subtitles" srclang="en" label="English" default>
    Your browser does not support the video tag.
  </video>
  <a:question />

1 Comment actions Permalink
Sam Martinez

Actually, my videos are all housed within the resources as well.  So my link for my video is not provided because I wanted the code structure to show and not the HTML.

I like having the ability to keep the student within the Buzz Program without needing to outsource.  Also, I have the ability to code the video to prevent skipping forward, and things of that nature.

"    <div class="video-container">
      <video id="video1" controls preload="metadata">
        <source src="[~]/IM1A%20Instructional%20Videos/Unit%203/3.04%20-%20Graphing%20from%20a%20Table%20of%20Values.mp4" type="video/mp4">
        <track src="[~]/IM1A%20Instructional%20Videos/Unit%203/Weekly%20Notes%20html/3.04.vtt" kind="subtitles" srclang="en" label="English" default>
        Your browser does not support the video tag.
      </video>
      <a:question />
    </div>"

0 Comment actions Permalink
Please sign in to leave a comment.