JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://popcornjs.org/code/dist/popcorn-complete.min.js"></script>
<video height="180" width="300" id="video" controls> 
<source src="http://techslides.com/demos/sample-videos/small.mp4"></source>
<source src="http://techslides.com/demos/sample-videos/small.mp4"></source>
<source src="http://techslides.com/demos/sample-videos/small.mp4"></source>
</video>
<div id="wordriverdiv" style="width:600px;height:800px;"></div>

JavaScript

// create our popcorn instance
var pop = Popcorn( "#video" );

pop.wordriver({
                start: 1,
                end: 3,
                text: "hello",
                target: "wordriverdiv",
                color: "blue"
})
    .wordriver({
                start: 3,
                end: 6,
                text: "world",
                target: "wordriverdiv",
                color: "red"
      })
// play video
pop.play();