Question

我试图在显示隐藏的btn1之前检测mp4格式的360视频是否已经结束。

<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>

脚本不起作用。无法使用javascript将可见属性更改为true

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");

   }
})

Answer 1

根据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>原语。

AFrame：视频（视频圈）结束时如何显示按钮？

1 个答案: