JSFiddle - React, Tailwind, and code Playground
HTML
<div>
<video class="video" controls>
<source src="http://techslides.com/demos/sample-videos/small.mp4" type="video/mp4">
<source src="http://techslides.com/demos/sample-videos/small.mp4" type="video/mp4">
</video>
<div >
<button class="playpause" title="play">Play</button>
</div>
</div>
<div>
<video class="video" controls>
<source src="http://techslides.com/demos/sample-videos/small.mp4" type="video/mp4">
<source src="http://techslides.com/demos/sample-videos/small.mp4" type="video/mp4">
</video>
<div >
<button class="playpause" title="play">Play</button>
</div>
</div>
<script type='text/javascript'>
JavaScript
// Grab a handle to the play pause buttons by the class name
var playpause = document.getElementsByClassName("playpause");
// The play pause method
var controlFunction = function (e) {
var playpause = this;
var video = this.parentElement.parentElement.children[0]
if (video.paused || video.ended) {
playpause.title = "pause";
playpause.innerHTML = "pause";
video.play();
} else {
playpause.title = "play";
playpause.innerHTML = "play";
video.pause();
}
};
// For each play pause button
for (var i = 0; i < playpause.length; i++) {
playpause[i].addEventListener('click', controlFunction, false);
}
// Grab a handle to the videos by the class name
var video = document.getElementsByClassName("video");
// Video methods
var videoPlayFunction = function () {
var playpause = this;
playpause.title = "pause";
playpause.innerHTML = "pause";
};
var videoPauseFunction = function () {
var playpause = this;
playpause.title = "play";
playpause.innerHTML = "play";
};
// For each video adds the event listeners
for (var i = 0; i < video.length; i++) {
video[i].addEventListener('play', videoPlayFunction, false);
video[i].addEventListener('pause', videoPauseFunction, false);
video[i].controls = false;
}