我如何从以秒为单位存储在数组中的时间戳中查找和获取快照/否 jQuery

Question

我已将预定义时间存储在数组中。我写了一个 for 循环来抛出一个数组并从 canvas 拍摄快照并通过 onclick 事件将它们附加到 div。问题是我只能获取最后一个快照，除非我在快照之间发出警报。我尝试使用一个寻求的侦听器，设置超时，我尝试将快照函数放在一个等待变量更改的 while 循环中，但我只能获取数组中的最后一个时间戳来拍摄快照，除非有警报或确认循环。

Codepin Example

HTML

    <div id="DesiredvideoPlayer" >

    <br>

<video muted controls  id="videoPlayer" style="float: left;">

        <source id='currentVID' src="http://html5multimedia.com/code/ch9/media/elephants-dream-medium.mp4" >
</video>
<br>
    <div id="PreCHPscroll">Array snaps
    </div>

    <div id="snapshotscroll">Manual Snaps
    </div>
    <div><input type="checkbox" id="Alerts">: alert between snapshots</div>
    </div>
<button id="snap" onclick="PreCHps()">Snapshots from array</button>
<button id="snap" onclick="snap()">Take Snapshot</button>

CSS

video, canvas {
    /border:1px solid #000;
}
#DesiredvideoPlayer{
    background-color:grey;
    /width: 100%;
    /height:auto;
    /height:100%;
    /display: block;;
    /display: inline-block;
}
#PreCHPscroll {
    outline: 1px solid steelblue;
    width: auto;
    height:120px;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    /font-size: 0px;
}
#snapshotscroll {
    outline: 1px solid steelblue;
    width: auto;
    height:120px;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
}
.snapshots {
    width: 200px;
    height: 100px;
    border: 1px solid white;
    display: inline-block;
}

JavaCRIPT

var CHPcategory_ALL_ = [5,63,264,348,479,512,551,600];
function PreCHps() {
    scrollDIV = 'PreCHPscroll';

    if(document.getElementById("videoPlayer").readyState >= 4) {
        document.getElementById("videoPlayer").addEventListener("seeked", ready2snap );

    for (i = 0; i < CHPcategory_ALL_.length; i++) {
//!!!!!!! toggle alert  
    if (document.getElementById("Alerts").checked == true){
    alert("snapshot#" + snapcount);
    }
//!!!!!!! toggle alert  
       setTimeout(next(), 1500);
    }
        setTimeout(chpThumbsMade, 1500);

    }
}
function next(){ document.getElementById("videoPlayer").currentTime= CHPcategory_ALL_[i];
}
function chpThumbsMade(){
    scrollDIV = 'snapshotscroll';
document.getElementById("videoPlayer").removeEventListener("seeked", ready2snap );
}
function ready2snap(){
    scrollDIV = 'PreCHPscroll';
    snap();

}
/********* snap shot script ********/
var w = 200, h = 100, snapcount = 0, scrollDIV = 'snapshotscroll';
function snap() {

    snapcount = snapcount+1;
        var snapnum = "snapshot#" + snapcount;
    //alert(snapnum);
    // make new div
    var newsnap = document.createElement('div');
    newsnap.id =  (snapnum);
    newsnap.className = 'snapshots';
    //var scrollDIV = scrollDIV ;
    document.getElementById(scrollDIV).appendChild(newsnap);


    var crrntTsec = document.getElementById('videoPlayer').currentTime;
    var clckFnct = 'document.getElementById("videoPlayer").currentTime=' + crrntTsec;

    document.getElementById(snapnum).setAttribute('onclick', clckFnct);

    var cv = document.createElement("canvas");
    cv.width = w;
    cv.height = h;


        // Get timestamp
    var Tsec = Math.floor(document.getElementById('videoPlayer').currentTime);


        // convert to time stamp
    var hour = Math.floor(Tsec / 3600);
    var min = Math.floor(Tsec / 60);
    var secs = (Tsec - (min * 60));

    hour = (hour >= 10) ? hour : "0" + hour;
    min = (min >= 10) ? min : "0" + min;
    secs = (secs >= 10) ? secs : "0" + secs;
    var Tstamp = hour+ ":" +min+ ":" +secs ;


    document.getElementById(snapnum).appendChild(cv);
    var cx = cv.getContext('2d');
    cx.fillRect(0, 0, w, h); 

    // Grab the image from the video
    cx.drawImage(document.getElementById('videoPlayer'), 0, 0, w, h);
         cx.font = "12pt Calibri";


        cx.strokeStyle="#40FF00";
        cx.strokeText(Tstamp, 5, 95);
        cx.strokeText(Tstamp, 6, 96);
        cx.strokeText(Tstamp, 6, 97);
        cx.strokeText(Tstamp, 7, 95);
   cx.fillStyle = "#000000";
   cx.fillText(Tstamp, 6, 96);


    document.getElementById(scrollDIV).scrollLeft +=  5000;

}

Codepen example

Answer 1

这并不理想，但它确实有效。这是你的 JavaScript:

var CHPcategory_ALL_ = [5, 63, 264, 348, 479, 512, 551, 600];

var CHPindex = 0;

function PreCHps() {
  scrollDIV = 'PreCHPscroll';
  if (document.getElementById("videoPlayer").readyState >= 4) {
    document.getElementById("videoPlayer").addEventListener("seeked", ready2snap);
    console.log(CHPindex);
    document.getElementById("videoPlayer").currentTime = CHPcategory_ALL_[CHPindex];
  }
}

function ready2snap() {
    snap();
    document.getElementById("videoPlayer").removeEventListener("seeked", ready2snap);

    if (CHPindex < CHPcategory_ALL_.length - 1) {
      CHPindex++;
      PreCHps();
    } else {
      CHPindex = 0;
      scrollDIV = 'snapshotscroll';
    }

  }

  /********* snap shot script ********/
var w = 200,
  h = 100,
  snapcount = 0,
  scrollDIV = 'snapshotscroll';

function snap() {

  snapcount = snapcount + 1;
  var snapnum = "snapshot#" + snapcount;
  //alert(snapnum);
  // make new div
  var newsnap = document.createElement('div');
  newsnap.id = (snapnum);
  newsnap.className = 'snapshots';
  //var scrollDIV = scrollDIV ;
  document.getElementById(scrollDIV).appendChild(newsnap);

  var crrntTsec = document.getElementById('videoPlayer').currentTime;
  var clckFnct = 'document.getElementById("videoPlayer").currentTime=' + crrntTsec;

  document.getElementById(snapnum).setAttribute('onclick', clckFnct);

  var cv = document.createElement("canvas");
  cv.width = w;
  cv.height = h;

  // Get timestamp
  var Tsec = Math.floor(document.getElementById('videoPlayer').currentTime);

  // convert to time stamp
  var hour = Math.floor(Tsec / 3600);
  var min = Math.floor(Tsec / 60);
  var secs = (Tsec - (min * 60));

  hour = (hour >= 10) ? hour : "0" + hour;
  min = (min >= 10) ? min : "0" + min;
  secs = (secs >= 10) ? secs : "0" + secs;
  var Tstamp = hour + ":" + min + ":" + secs;

  document.getElementById(snapnum).appendChild(cv);
  var cx = cv.getContext('2d');
  cx.fillRect(0, 0, w, h);

  // Grab the image from the video
  cx.drawImage(document.getElementById('videoPlayer'), 0, 0, w, h);
  cx.font = "12pt Calibri";

  cx.strokeStyle = "#40FF00";
  cx.strokeText(Tstamp, 5, 95);
  cx.strokeText(Tstamp, 6, 96);
  cx.strokeText(Tstamp, 6, 97);
  cx.strokeText(Tstamp, 7, 95);
  cx.fillStyle = "#000000";
  cx.fillText(Tstamp, 6, 96);

  document.getElementById(scrollDIV).scrollLeft += 5000;

}

我如何从以秒为单位存储在数组中的时间戳中查找和获取快照/否 jQuery

how do i seek and take snapshots from time stamps stored in an array in secounds / NO jQuery

javascript

for-loop

html5-canvas

html5-video

snapshot