JSFiddle - React, Tailwind, and code Playground

by secretgspot

HTML

<!--
video/oggはFireFox用
video/mp4はSafari,Opera,Google chrome用に用意する。
<source>タグは
見れるファイルを上から探して行き見つかったらそこで処理を終了する。
-->
<video id="display" controls="controls" autobuffer="autobuffer" width="340" height="280">
  <source src="http://www.bbmedia.jp/external/video/2010-07-20/sora.mp4" type="video/mp4" />
  <source src="http://www.bbmedia.jp/external/video/2010-07-20/sora.ogv" type="video/ogg" />
  <source src="http://www.bbmedia.jp/external/video/2010-07-20/sora.webm" type="video/webm" />
  <p>動画を再生するには video タグをサポートしたブラウザが必要です。</p>
</video>

<div id="loadstart">■LOAD START</div>
<div id="progress">■PROGRESS</div>
<div id="suspend">■SUSPEND</div>
<div id="load">■LOAD</div>
<div id="abort">■ABORT</div>
<div id="error">■ERROR</div>
<div id="emptied">■EMPTIED</div>
<div id="stalled">■STALLED</div>
<div id="play">■PLAY</div>
<div id="pause">■PAUSE</div>
<div id="loadedmetadata">■LOADED META DATA</div>
<div id="loadeddata">■LOADED DATA</div>
<div id="waiting">■WAITING</div>
<div id="playing">■PLAYING</div>
<div id="canplay">■CANPLAY</div>
<div id="canplaythrough">■CAN PLAY THROUGH</div>
<div id="seeking">■SEEKING</div>
<div id="seeked">■SEEKED</div>
<div id="timeupdate">■TIME UPDATE</div>
<div id="ended">■ENDED</div>
<div id="ratechange">■RATE CHANGE</div>
<div id="durationchange">■DURATION CHANGE</div>
<div id="volumechange">■VOLUME CHANGE</div>

JavaScript

var number = 1;

$(document).ready(function() {
  video = document.getElementById('display');
  /* LOAD START */
  video.addEventListener("loadstart", function() {
    $('#loadstart').css({color:"#55FF55"});
    $('#loadstart').html($('#loadstart').html() + "(" + number.toString() + ")");
    number++;
  }, true);
  
  /* PROGRESS */
  video.addEventListener("progress", function() {
    $('#progress').css({color:"#55EE55"});
    $('#progress').html($('#progress').html() + "(" + number.toString() + ")");
    number++;
  }, true);
  
  /* SUSPEND */
  video.addEventListener("suspend", function() {
    $('#suspend').css({color:"#55DD55"});
    $('#suspend').html($('#suspend').html() + "(" + number.toString() + ")");
    number++;
  }, true);
  
  /* LOAD */
  video.addEventListener("load", function() {
    $('#load').css({color:"#55CC55"});
    $('#load').html($('#load').html() + "(" + number.toString() + ")");
  }, true);
  
  /* ABORT */
  video.addEventListener("abort", function() {
    $('#abort').css({color:"#55BB55"});
    $('#abort').html($('#abort').html() + "(" + number.toString() + ")");
    number++;
  }, true);
  
  /* ERROR */
  video.addEventListener("error", function() {
    $('#error').css({color:"#55AA55"});
    $('#error').html($('#error').html() + "(" + number.toString() + ")");
    number++;
  }, true);
  
  /* EMPTIED */
  video.addEventListener("emptied", function() {
    $('#emptied').css({color:"#449944"});
    $('#emptied').html($('#emptied').html() + "(" + number.toString() + ")");
    number++;
  }, true);
  
  /* STALLED */
  video.addEventListener("stalled", function() {
    $('#stalled').css({color:"#338833"});
    $('#stalled').html($('#stalled').html() + "(" + number.toString() + ")");
    number++;
  }, true);
  
  /* PLAY */
  video.addEventListener("play", function() {
    $('#play').css({color:"#227722"});
    $('#play').html($('#play').html() + "(" + number.toString() + ")");
    number++;
  }, true);
  
  /* PAUSE */
 ...