JSFiddle - React, Tailwind, and code Playground

by Joshua Dwire

HTML

<script src="http://localhost/captionator.js"></script>
<video id="video" style="width:460px;height:289px" controls>
    <source src="http://localhost:7848/sometechie.media/media/video/video_1080p.mp4" type="video/mp4" />
    <source src="http://localhost:7848/sometechie.media/media/video/video_1080p.webm" type="video/webm" />
    <track kind="subtitles" src="" type="text/vtt" srclang="en" label="English Subtitles" default></track>
</video>
<div id="captions"></div>

CSS

#captions{
    width:450px;
    height:100px;
    background:gray;
}

JavaScript

var v=document.getElementById('video');
var refreshCaptions=captionator.addCaptionsToVideo(document.getElementById('captions'),'http://localhost/arduino-en.vtt');

v.addEventListener("timeupdate",function(){
    refreshCaptions(v.currentTime);    
},false)