Interactive transcripts show the captions for a video or audio in a scrollable area beside or under the player. The user can navigate the video by clicking a caption, and the current caption is highlighted as the media plays through.


Interactive Video

Interactive video player



Interactive Audio

Interactive transcript audio


The subtitle/captions/text are encoded in a specially formatted text file (.vtt). Modern HTML5 media players are able to work with VTT files to produce subtitles. In the interactive transcript the VTT file is used to create a sort of super subtitle feature. 


The method of making video transcripts is the same for audio transcripts. You will need:

  • An mp3 audio or mp4 video file
  • A VTT subtitle file
  • The Video JS Audio transcript template (for audio)
    OR
  • The Video JS Video transcript template (for video)

Did you say "template?"


Poodll has a special template system for working with players and widgets in Moodle. Templates are predefined packages of HTML, CSS and javascript that produce things like tab sets, audio players and lightboxes. Read more about them here. Anyway we have some special ones to make these interactive transcripts.

By default they won't be visible on your Moodle/Poodll installation. But its easy to create them from presets.


Create from "presets?"

From the templates menu at : Site admin -> Plugins -> Filters -> Poodll -> Templates

Choose an empty template and choose a preset from the dropdown at the top of the page.



Once you have done that, the fields in the page will be filled in for you. Just scroll to the bottom and save. You will want to make 3 different templates from presets:

  • Interactive transcript video
  • Interactive transcript audio

If you run out of blank settings pages see here.


Start handling file extensions

Poodll templates can act on  links in the html area if they are set up to handle that file extension. So if Poodll is handling mp4 or mp3 links, then it will apply a template to the link. These templates are called player templates.  In this exercise it makes sense to upload an mp4(or mp3) file. So we will use player templates. 


We will tell Moodle to :

- send mp3 links to the Interactive transcript audio template

- send mp4 links to the Interactive transcript video template


Since most audio and video on your site won't have interactive transcripts, in this case we will apply the templates activity by activity.  But it is possible to do the same thing course or site wide.


Apply templates to extensions

Each activity in Moodle has its own filters page. Its a really cool feature that almost no plugins use. But believe us, its useful. Poodll has a special "per-activity" settings page for file extension to template matching. From the activity's settings menu choose Filters.


And then the Poodll filter settings




Here match:

  • mp4 --> Interactive transcript video
  • mp3 --> Interactive transcript audio



Preparing a video/audio file and a subtitle file

You can do this using Cloud Poodll for Atto which will automatically subtitle your file (Spanish or English only). Later the subtitles can be edited using Poodll's Atto Subtitle plugin. Or if you already have your own subtitle file you can do it manually.


Using Cloud Poodll for Atto

The easiest way to do this is to use the Cloud Poodll for Atto plugin and either record, or upload a video/audio into Moodle.

Recording Audio with Cloud Poodll for Atto

Uploading Audio with Cloud Poodll for Atto


NB. BEFORE you record or upload, check "Request subtitles" on the options tab and uncheck "Insert media player"


Manually adding a subtitle file


Upload your video/audio file, or add a link to it in the HTML area. If you are uploading, be sure to embed the link to the files, not to embed a player. 


Uploading a media file

Linking to a media file


Finally append the url of the VTT file to the end of the url for the video. So the url will look like this. Note the ?data-subtitles=[url of subtitle file]

<a href="https://blah.blah.blah.com/somefile.mp4?data-subtitles=https://path.to.somehere.com/somesubtitles.vtt">somefile</a>


You need to do this in the link popup dialog from the Atto editor, or in the source view of the HTML Area.

Editing link parameters in Atto link dialog
Editing link parameters in HTML source view

 

NB. It really is easier to use Cloud Poodll for Atto. We will improve this soon.


Finally

Save the activity and everything when ok .... you should have interactive transcripts.