qyZGve

index.html

    <main>
        <div class="myVideo">
            <div id="vidText" class="vidText"></div>
            <video controls id="myVideo" width="640" height="480">
                <source src="https://s3.us-east-2.amazonaws.com/leetcodes/assets/The_Lumineers_-_Ophelia.mp4" type="video/mp4">
                Your browser does not support HTML5 video.
              </video>
        </div>
    </main>

<div id="time-data"></div>
<button id="test-btn">Test Btn</button>

qyzgve.markdown

qyZGve

A Pen by Leetcodes on CodePen.

License.

script.js

const vid = document.getElementById("myVideo")

/*
function nextLyric(target){
  let cur = parseInt(target.data("lyric")),
  lyricwrap = $("#lyricwrap"),
  next = $("span[id=lyric-" + (cur + 1) + "]"),
  prev = $("span[id=lyric-" + (cur - 1) + "]"),
  upcoming = $("span[id=lyric-" + (cur + 2) + "]")

  if(cl == 0) vid.play()
  timeLyric()

  target.animate({'opacity': 0.3}, 150)
  prev.animate({'opacity': 0}, 150)
  next.animate({'opacity': 1}, 150)
  upcoming.animate({'opacity': 0.3}, 150)

  lyricwrap.scrollTop(lyricwrap.scrollTop() + (next.position().top - lyricwrap.position().top) - (lyricwrap.height()/2) + (next.height()/2)  )
  cl++
}
//*/
  var c = 0,
    da = 0,
    timeArr = [];

var tmp = false;
function vidTime(){
  //console.log(tmp, timeArr.length)
  if(timeArr.length <= c && tmp === false) {
    tmp = vid.currentTime;
  } else {
    timeArr.push({
      "id": c,
      "start": fancyTimeFormat(tmp),
      "end": fancyTimeFormat(vid.currentTime)
    })
    c++;
    tmp = false;
  }
}

function fancyTimeFormat(time)
{   
    // Hours, minutes and seconds
    var hrs = ~~(time / 3600);
    var mins = ~~((time % 3600) / 60);
    var secs = time % 60;

    // Output like "1:01" or "4:03:59" or "123:03:59"
    var ret = "";

    if (hrs > 0) {
        ret += "" + hrs + ":" + (mins < 10 ? "0" : "");
    }

    ret += "" + mins + ":" + (secs < 10 ? "0" : "");
    ret += "" + secs;
    return ret;
}

//*/

hotkeys('space,w,a,s,d,n', function(event,handler) {
  switch(handler.key){
    case "space":vidTime();break;
      /*case "a":vidTime();break;
      case "d":vidTime();break;*/
    /*case "space":nextLyric($('#lyric-'+cl));break;
    case "n":nextLyric($('#lyric-'+cl));break;*/
  }
  let arrayData = "timestamps=("
  timeArr.forEach( (i) => arrayData += "\"" + i.start + " " + i.end + "\" " )
  arrayData += ")"
  $("#time-data").text(arrayData.toString())
});

$("#test-btn").click(function(){
  let arrayData = ""
  timeArr.forEach( (i) => arrayData += i.start + "-" + i.end + " " )
  $("#time-data").text(arrayData.toString())
  console.log(timeArr)
  
  /*
  eval("var curlytime = " + $("#current-lyrics-time textarea").text())
  cl = 0
  vid.currentTime = 0
  vid.addEventListener("timeupdate", function(){
    if(this.currentTime >= curlytime[cl]) {
        $('#lyrictext').text(lyrics[(cl)])
        nextLyric($('#lyric-'+cl))
    }
  })
  nextLyric($('#lyric-'+cl))*/
})

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://unpkg.com/hotkeys-js/dist/hotkeys.min.js"></script>

style.scss

#lyricwrap {
  height: 165px;
  overflow-y: hidden;
  width: 640px;
  p {
    margin: 5px;
    padding: 10px;
  }
  span {
    margin: 5px;
    padding: 10px;
    background-color: lightgreen;
    display: block;
    opacity: 0;
    position: relative;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
  }
  span:nth-of-type(1){
      background-color: red;
    color: white;
    }
}

#lyric-time {
  width:640px;
}

main {
  position: relative;
}

.lyrictext {
  display: block;
  position: absolute;
  bottom: 70px;
  left: 100px;
  font-weight: bold;
  font-size: 24px;
  color: #efefef;
}

#current-lyrics-time textarea {
  width: 640px;
  height: 100px;
}