javascript - 需要更改 JS 事件格式以适应 Jquery 和 Meteor (Template.mysite.events) 格式

Question

我想将此脚本粘贴到我的 meteor 应用程序中，但我不知道如何稍微更改格式以使其适合我的“Template.page.events”，有人可以帮忙吗？

我是初学者，遇到困难

(function(){
  var v = document.querySelector('video'),
      n = document.querySelector('source').src.replace(/.*\/|\..*$/g,''),
      c = document.querySelector('canvas'),
      save = document.querySelector('#save ul'),
      ctx = c.getContext('2d');
  v.addEventListener('loadedmetadata',function(ev){

    var ratio = v.videoWidth/v.videoHeight,
        w = 400,
        h = parseInt(w / ratio, 10),
        time = 0,
        img = null,
        li = null;
    c.width = w;
    c.height = h + 40;

    v.addEventListener('timeupdate',function(ev){
      if(v.paused){
        ctx.fillStyle = 'rgb(0, 0, 0)';
        ctx.fillRect(0, 0, w, h);
        ctx.drawImage(v, 0, 40, w, h);
        ctx.font = '20px Calibri';
        ctx.fillStyle = 'lime';
        ctx.fillText(n, 5, 20);
        time = format(v.currentTime);
        ctx.fillStyle = 'white';
        ctx.fillText(time, 395 - ctx.measureText(time).width, 20);
      }
    },false);
    c.addEventListener('click',function(ev){
      li = document.createElement('li');
      img = document.createElement('img');
      li.appendChild(img);
      save.appendChild(li);
      img.src = ctx.canvas.toDataURL('image/png');
    },false);
  },false);
  function format(time){
    var hours = parseInt((time / 60 / 60) % 60, 10),
        mins = parseInt((time / 60) % 60, 10),
        secs = parseInt(time, 10) % 60,
        hourss = (hours < 10 ? '0' : '') + parseInt(hours, 10) + ':',
        minss = (mins < 10 ? '0' : '') + parseInt(mins, 10) + ':',
        secss  = (secs < 10 ? '0' : '') +(secs % 60),
        timestring = ( hourss !== '00:' ? hourss : '' ) + minss + secss;
    return timestring;
  };
})();

Answer 1

假设我们有这个 Meteor 模板标记:

<template name="page">
  <video controls autoplay>
    <source src="/videos/video.mp4">
  </video>
  <canvas></canvas>
  <ul>
    {{#each screenshots}}
      {{> screenshot}}
    {{/each}}
  </ul>
</template>

<template name="screenshot">
  <li>
    <img src="{{source}}">
  </li>
</template>

我添加了一个子模板来处理以 Meteor 方式完成的屏幕截图列表生成:无需直接操作 DOM 来插入 HTML 元素。

首先我们需要创建一个 reactive-var 来将截图列表源保存为一个数组:

Template.page.onCreated(function(){
  this.screenshots = new ReactiveVar([]);
});

Template.page.helpers({
  screenshots:function(){
    return Template.instance().screenshots.get();
  }
});

不要忘记meteor add reactive-var。

我们可以将对 onRendered 模板生命周期事件中的 video 和 canvas 元素的引用保存为模板属性:

Template.page.onRendered(function(){
  this.video = this.find("video");
  this.canvas = this.find("canvas");
});

然后我们必须使用 Meteor 事件映射重写标准的 HTML 事件处理，这非常简单，只需使用语法 "event selector"。

Template.page.events({
  "loadedmetadata video":function(event,template){
    var ratio = template.video.videoWidth / template.video.videoHeight;
    var canvasWidth = 400;
    var canvasHeight = parseInt(canvasWidth / ratio, 10);
    template.canvas.width = w;
    template.canvas.height = h + 40;
  },
  "timeupdate video":function(event,template){
    function format(time){
      var hours = parseInt((time / 60 / 60) % 60, 10);
      var mins = parseInt((time / 60) % 60, 10);
      var secs = parseInt(time, 10) % 60;
      var hourss = (hours < 10 ? '0' : '') + parseInt(hours, 10) + ':';
      var minss = (mins < 10 ? '0' : '') + parseInt(mins, 10) + ':';
      var secss  = (secs < 10 ? '0' : '') +(secs % 60);
      var timestring = ( hourss !== '00:' ? hourss : '' ) + minss + secss;
      return timestring;
    }
    //
    if(template.video.paused){
      var ctx = template.canvas.getContext("2d");
      ctx.fillStyle = "rgb(0, 0, 0)";
      ctx.fillRect(0, 0, template.canvas.width, template.canvas.height);
      ctx.drawImage(template.video, 0, 40, template.canvas.width, template.canvas.height);
      ctx.font = "20px Calibri";
      ctx.fillStyle = "lime";
      ctx.fillText("caption", 5, 20);
      var time = format(template.video.currentTime);
      ctx.fillStyle = "white";
      ctx.fillText(time, 395 - ctx.measureText(time).width, 20);
    }
  },
  "click canvas":function(event,template){
    var screenshots = template.screenshots.get();
    screenshots.push({
      source: template.canvas.toDataURL("image/png")
    });
    template.screenshots.set(screenshots);
  }
});