Question

我正在使用aframe并拥有jquery库。我试图在光标悬停在实体上时触发函数调用。在这种情况下，实体是a-video标签。

这是我的光标：

<a-entity camera look-controls>
  <a-cursor id="cursor" animation__click="property: scale; startEvents: click; from: 0.1 0.1 0.1; to: 1 1 1; dur: 150" animation__fusing="property: fusing; startEvents: fusing; from: 1 1 1; to: 0.1 0.1 0.1; dur: 1500" event-set__1="_event: mouseenter; color: #f89828;" event-set__2="_event: mouseleave; color: black" fuse="true" raycaster="objects: .link"></a-cursor>
</a-entity>

这是我的视频

 <a-assets><video id="ceo-video" loop preload="auto" webkit-playsinline src="./values.mp4"></a-assets>
    <a-video cursor-listener="on: click;" id="a-video" src="#ceo-video" data-video-source="ceo-video" position="-9 0.953 -0.999" class="alan-video" width="5" height="3" rotation="0 90 0">
    </a-video>

这是我的AFRAME组件：

AFRAME.registerComponent('cursor-listener', {
  schema: {
    on: { type: 'string' },
    target: { type: 'selector' },
    src: { type: 'string' },
    dur: { type: 'number', default: 300 }
  },

  init: function() {
    var vid = document.getElementById('ceo-video');
    this.el.addEventListener('click', function(evt) {
      vid.play();
    });
    this.el.addEventListener('click', function(evt) {
      vid.pause();
    });
  }
});

永远不会触发click或mouseenter事件。谢谢！

Answer 1

您可以听两次点击事件，播放和暂停视频。

你需要有一个监听器和一个布尔开关来检查是否播放或暂停视频：

var switch
if(switch){
  playVideo();
  switch!=switch;
}else{
  pauseVideo();
  switch!=switch;
}

如果您想侦听mouseEnter事件，则需要创建另一个事件侦听器：

this.el.addEventListener('mouseenter', function(evt) {
  vid.play();
});

如果您正在使用ngoKevin's event component，只需将_event: click替换为_event: mouseenter

aframe如何在光标mouseenter或单击实体时触发函数

1 个答案: