为什么我不能挂钩html5视频播放活动?

时间:2015-08-12 09:48:18

标签: meteor html5-video

我正在使用带有videoJS的HTML5视频标签(最后一个稳定版本,4.12)。我可以轻松获得loadedmetadata事件但由于某种原因我可能错过了,我无法使用视频对象play事件上的“流星方式”进行挂钩。

我的模板事件代码:

Template.Player.events({
  'loadedmetadata #video_player':function (e,t) {
    console.log(e.target); //working fine
    },
  'play #video_player':function(e,t){
    console.log("play!");//now it works
  }
});

我正在使用Chrome进行调试,但我猜这与浏览器无关。

修改

当我不使用id或类选择器时,它似乎有效。由于我的模板上只有一个视频标记,因此我可以通过执行此操作来捕获play事件:

Template.Player.events({
  'play video':function(e,t){
    console.log("play!");//not working
  }
});

我仍然不买流星无法处理的事实。如果是这样,为什么? loadedmetadataplay事件之间有什么区别,允许第一个使用id选择器,而后者不能?

  

仅在恢复播放时播放触发器,每次播放触发器   时间播放开始。

@Oskar,当我查看文档时你是对的。但是,在我的情况下,play会在启动视频时和暂停后恢复视频时触发。

1 个答案:

答案 0 :(得分:0)

首先,请确保您正在使用正确的事件 - play仅在恢复播放时触发,playing每次播放都会触发。

查看Meteor docs,这些事件是正式的"支持:

  

事件类型及其用途包括:

     

点击
  鼠标单击任何元素,包括链接,按钮,表单控件或div。使用preventDefault()可防止跟踪单击的链接。从键盘激活元素的一些方法也会触发点击。

     

<强> DBLCLICK
  双击。

     

专注,模糊
  文本输入字段或其他表单控件增益或失去焦点。您可以通过为tabindex属性提供任何可聚焦的元素。浏览器的不同之处在于链接,复选框和单选按钮是否可以自然聚焦。这些事件不会冒泡。

     

更改
  复选框或单选按钮可更改状态。对于文本字段,请使用模糊或关键事件来响应更改。

     

mouseenter,mouseleave
  指针进入或离开元素的边界。这些事件不会冒泡。

     

mousedown,mouseup
  鼠标按钮是新近或向上的。

     

keydown,keypress,keyup
  用户按下键盘键。 keypress对于捕获文本字段中的输入最有用,而keydown和keyup可用于箭头键或修饰键。

     

其他DOM事件也可用,但对于上述事件,Meteor已经注意确保它们在所有浏览器中统一运行。