Adding subtitles to a video using PoodLL, is very easy once you have the templates all set up. PoodLL’s template system for players, gives you a lot of flexibility to customize how video is presented on your site. Lets have a look at what we need. (Note that this tutorial and sample files all work with the VideoEasy filter also.)
- A video file (e.g zombie_problems.mp4)
- A subtitle file of the same name, in .vtt format (e.g zombie_problems.vtt)
- The PoodLL/VideoEasy “Flowpayer Subtitle” template
- The PoodLL/VideoEasy “Remove Link” template
To make it easy for you to get started those template bundles and a sample video and subtitle file can be downloaded here. [download] Or you can use git to get them (https://github.com/justinhunt/zombie_subtitle_demo)
- Create a “Flowplayer Subtitle” template using the Flowplayer Subtitle bundle
- Create a “Remove Links” template using the “Remove Links” bundle
- Add a video file and subtitle file to some activity in Moodle
- Tell the activity to use “Flowplayer Subtitle” and “Remove Links” templates
The solution we are seeking is to embed both the video and the subtitle file into the activity’s html area. This keeps both items in the same place, and is a simple workflow that is easy to form a process around.
Create a “Flowplayer Subtitle” template
You probably only want subtitles for certain videos on your site, ie videos with subtitle files. So in this tutorial we will use a completely separate template. But it would be possible to make it the site default, or to add the functionality to the default player to do subtitles but ignore them if no subtitle file is found (currently the player doesn’t take this too well…).
See this page for details on how to create a template from a bundle. Then use the “Flowplayer Subtitle” bundle to create the template.
Create a “Remove Links” template
The link to the video file will be swapped out with a player. But if we embed a subtitle file, then the link in the html area to that file, will still be visible after the video and subtitles have been loaded and displayed. The “Remove Links” template simply removes the link to the subtitle file with the .vtt extension from the html output. We are unlikely to ever need to show a link to the vtt file to the end user, so we register the “Remove Links” template as the site default for the .vtt .
Add the video and subtitle file
We will create a page resource activity. Though we could just as easily use a forum or other activity type. The video is added in the usual way, by uploading a .mp4 file using the “moodle media” icon on the Atto editor and the upload repository. The subtitle file however will be rejected by the “moodle media” Atto plugin because the file extension(.vtt) is not for video. In this case we still use the upload repository, but we access it via the “link” icon which is not so fussy.
<iframe src="https://www.youtube.com/embed/mACfI8W57nc?feature=oembed" width="500" height="375" frameborder="0" allowfullscreen="allowfullscreen" data-mce-fragment="1"></iframe>
Set the PoodLL filter settings for the activity.
Since the default player for the site is probably not “Flowplayer Subtitle,” we tell this particular activity to use the new player. And leave the rest of the site as it is. After that the subtitles should display!
How do we make those .vtt subtitles?
The .srt format is more common. And you can make subtitles in that, and then convert them to .vtt using various tools. You can even use YouTube, which has a subtitle editor, for its videos. But we used http://subtitlehorse.com