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

【问题标题】：AFrame: How to show a button when video (videosphere) ended?AFrame：视频（视频球）结束时如何显示按钮？
【发布时间】：2018-11-18 06:51:07
【问题描述】：

我正在尝试检测 mp4 格式的 360 度视频是否在显示隐藏的 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>

脚本不工作。无法使用 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");

   }
})

【问题讨论】：

标签： javascript html aframe 360-virtual-reality

【解决方案1】：

根据 A-Frame 文档，您应该能够在 <a-videosphere> 原语上监听 materialvideoended 事件。

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

【讨论】：