AFrame: Как показать кнопку, когда видео (видеосфера) закончилось? - PullRequest
Новая
       47

AFrame: Как показать кнопку, когда видео (видеосфера) закончилось?

0 голосов
/ 18 ноября 2018

Я пытаюсь определить, закончилось ли видео 360 в формате mp4 перед отображением btn1, который был скрыт. 

<a-videosphere id="videosphere1"
    rotation="0 180 0"
    visible="true"
    src="#vid1"
    show-btn-when-ended="target: #btn1"
    autoplay = "true">
</a-videosphere>

Кнопка для отображения 

<a-entity
            id="btn1"
            geometry = "primative: plane"
            position = "-0.8 3 -12.3"
            rotation = "0 -1 -3"
            scale = "12.5 25 1"
            visible = "false"
            text = "align:center; width: 6; wrapCount:100; color:black;
                    value: CLICK HERE"
            go-toScene-onCLick>
        </a-entity>

Скрипт не работает. Невозможно изменить атрибут, видимый на true с JavaScript 

AFRAME.registerComponent('show-btn-when-ended', {
init: function () {
    el = this.el;
    this.showBtn= this.showBtn.bind(this);
    el.addEventListener('ended', this.showBtn);
},

showBtn: function(evt) {
    console.log('in window.showBtn');
    var videosphere1 = document.querySelector("#videosphere1")
    var btn1 = document.querySelector('#btn1'); 
    btn1.setAttribute('visible', 'true');
    console.log("Show Button");

   }
})

1 Ответ

0 голосов
/ 18 ноября 2018

Согласно документации A-Frame, вы должны иметь возможность прослушивать событие materialvideoended в примитиве <a-videosphere>.

https://aframe.io/docs/0.8.0/components/material.html#events_materialvideoended

Так что вы должны иметь возможностьчтобы сделать что-то вроде этого: 

videosphere1.addEventListener('materialvideoended', function() {
  // show button
});

Я заметил, что вы изначально пытались передать селектор target для кнопки через компонент.Вы можете сделать это, добавив его в схему компонента, выполнив что-то вроде следующего: 

schema: {
  target: { type: 'selector', default: '[a-videosphere]' }
}

Если селектор не определен, он просто по умолчанию будет использовать первый <a-videosphere> примитив.

...