JSFiddle - React, Tailwind, and code Playground

by terby

HTML

<video id="vid" width="300" height="240" controls>
    <source src=https://video-cdn.tjk.org/videoftp/2021/12/21120137_m.mp4 type=video/mp4>
</video>
<br />
<button id="getTime">Get time</button>
<button id="setTime">Set time</button>
<button id="speedx1">x1</button>
<button id="speedx2">x2</button>
<select class="pbrate" id="pbrate">
	<option value="0.25">0.25</option>
	<option value="0.5">0.5</option>
	<option value="0.75">0.75</option>
	<option value="1" selected="selected">Normal</option>
	<option value="1.25">1.25</option>
	<option value="1.5">1.5</option>
	<option value="1.75">1.75</option>
	<option value="2">2</option>
</select>
<button id="playpause" class="play">Play</button>
<span id="currentTime"></span>

JavaScript

/*
I JQUARIZED THIS ONE:
$(function() {
  var vid = document.getElementById("vid");
});
*/
$(document).ready(function() {
	var vid = $('video#vid');
});


function getvideotime() {
  var currentTime = vid.currentTime;
  $('#currentTime').html(currentTime);
}

function getvideoplaybackrate() {
	var rate = vid.playbackRate;
	$('select.pbrate').val(rate);
}

$('#getTime').on('click', function() {
  getvideotime();
});


$('#setTime').on('click', function() {
  var settime = 30.34;
  vid.currentTime = settime;
  getvideotime();
});

$('#speedx1').on('click', function() {
  var pbRate = 1;
  vid.playbackRate = pbRate;
});

$('#speedx2').on('click', function() {
  var pbRate = 2;
  vid.playbackRate = pbRate;
});
$('#playpause').on('click', function() {
  if ($(this).hasClass('play')) {
    vid.play();
    $(this).text('Pause').removeClass('play').addClass('pause');
  } else if ($(this).hasClass('pause')) {
    vid.pause();
    $(this).text('Play').removeClass('pause').addClass('play');
		getvideotime();
  }
});

$('#vid').click(function() {
  if (vid.paused) {
		//vid.pause();
    $('#playpause').text('Pause').removeClass('play').addClass('pause');
  } else {
		//vid.play();
    $('#playpause').text('Play').removeClass('pause').addClass('play');
    getvideotime();
  }
});

$(vid).bind('play', function(e) {
  if (!vid.paused) {
    $('#playpause').text('Pause').removeClass('play').addClass('pause');
		getvideoplaybackrate();
		//alert(vid.playbackRate);
  }
});

$(vid).bind('pause', function(e) {
  if (vid.paused) {
    $('#playpause').text('Play').removeClass('pause').addClass('play');
    getvideotime();
  }
});

$('select.pbrate').change(function() {
	vid.playbackRate = $(this).val();
});

vid.onratechange = function() {
	getvideoplaybackrate();
};