AFrame: How to show a button when video (videosphere) ended?

Question

I am trying to detect whether a 360 video in mp4 format has ended before displaying a btn1 that was hidden.

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

Button to be displayed

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

Script is not working. Unable to change attribute visible to true with 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");

   }
})

Answer 1

According to the A-Frame documentation, you should be able to listen for the materialvideoended event on the <a-videosphere> primitive.

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

So you should be able to do something like this:

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

I noticed that you were originally trying to pass in the target selector for the button through the component. You can do that by adding it to the schema of the component by doing something like below:

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

If no selector is defined, it will just default to the first <a-videosphere> primitive.