KAOS - Subtitles On Mobile

Content
#1

KAOS (Khan Academy On a Stick), for those who don’t know - is an even lighter version of ka-lite. It drops the exercises and provides vanilla HTML navigation for browsing and searching the videos. On that topic…

Andy wrote:

I have put the www folder from KAOAS on a Apache server running on a Mac. The captioning works fine when accessed by HTML5 browsers from a computer, but not from mobile devices.

And then:

I solved the issue by changing your html:

From:

To:

I believe that the new code invokes the html standard view player which is more widely supported…. but this is just a guess. The controls are different than with your html, but show up on a tablet and work great. In order for this to work, I had to convert the captions from .srt to .vtt format. There are free converters that do batch conversions.

Hope this is helpful to anyone running into similar problems!

Creator’s note: I was surprised because video-js was put in place to improve compatibility: it works on older browsers that don’t support HTML5 video, and is supposed to work on everything modern too… but I guess that is not the case.

I have got an update to KAOS on my TODO list, and I’ll probably move to pure HTML5 and drop video-js. That will cut off IE8 and earlier users, but I’m thinking that may be OK at this point. I’ll still include the “download” link as a failsafe.

Questions and comments welcome!

1 Like
#2

Thanks to jfield for posting my fix for mobile devices and inviting me to this forum.

Some additional info:

  • The caption files must be converted from .srt to .vtt format for this approach to work!

  • The standard html5 video player is more user friendly than the video-js player

  • It took about an hour to convert the entire KAOS to this approach

  • I used terminal commands executed from the www directory to convert all the html at one time

  • The commands on a Mac were:

        $  cd /your path/to the/www directory
    $  find . -type f -name '*.html' -exec sed -i '' 's/<video class="video-js vjs-default-skin" width="700" height="392"/<video  width="700" autoplay controls>/' {} +
    $  find . -type f -name '*.html' -exec sed -i '' 's/controls preload="auto" data-setup="{}" autoplay>//' {} +
    $  find . -type f -name '*.html' -exec sed -i '' 's/label="English"><\/track>/label="English" default>/' {} +
    $  find . -type f -name '*.html' -exec sed -i '' s/.srt"/.vtt"/ {} +

  • Finally I downloaded the converter from this site to convert the caption files. jfield also has a converter for this at this site.

We will be serving up the KAOS to students using tablets in a remote village in West Pokot, Kenya.

1 Like