JSFiddle - React, Tailwind, and code Playground

by maitrekaio

HTML

<video id="videohead" autoplay="" preload = "metadata" >
    <source src="http://download.blender.org/peach/trailer/trailer_400p.ogg"/>
</video>
<div id="player">
    <ul class="controls">
        <li id="li_playpause" class="play_pause" title="Pause">
            <p class="control" id="play">PAUSE</p>
        </li>
    </ul>
</div>

JavaScript

var play = document.getElementById('play');
play.addEventListener('click', playControl, false);
var video = document.getElementById('videohead');

function playControl() {
    if (video.paused == false) {
        video.pause();
        play.innerHTML = 'PLAY';
        document.getElementById('li_playpause').title = 'Play';
    } else {
        video.play();
        play.innerHTML = 'PAUSE';
        document.getElementById('li_playpause').title = 'Pause';
    }
}