WebVR Overlay a curved image using aframe.io

Question

Currently when I focus on a curved image I change its color.

Instead, I would like to overlay it with an icon, a play icon for example.

How can i achieve this? Code is as follows:

HTML

<a-curvedimage id="vid1" material="opacity: 0" data-src="vid1.mp4" selectable height="2" radius="5.3" theta-length="32" position="0 2.2 -0" rotation="0 65 0" scale="0.7 0.7 0.7"  src="#tile1">
</a-curvedimage>

JS

AFRAME.registerComponent('selectable', {
    init: function () {
        var el = this.el;
        this.el.addEventListener('mouseenter', function (evt) {
            this.setAttribute('material', 'color', 'blue');
        });
        this.el.addEventListener('mouseleave', function (evt) {
            this.setAttribute('material', 'color', '');
        });  
    });
}

Answer 1

From what i know, If You want to make the material to be the current videoframe + play icon, it would require to dynamically create a texture consisting of the play icon + parsed image from the current video frame.

BUT i think it's way too difficult, and i would suggest a workaround:
create a entity, consisting of Your curved image and a play icon on a plane:

<a-entity id="playerwrapper" selectable>
    <a-curvedimage>
    </a-curvedimage>
    <a-plane id="playicon">
    </a-plane>
</a-entity>

Position them so that the plane is where You want Your icon to be. Then modify Your plane using JS:

AFRAME.registerComponent('selectable', {
init: function () {
    var el = this.el;
    this.el.addEventListener('mouseenter', function (evt) {
        el.children[1].setAttribute('scale', '1 1 1');
    });
    this.el.addEventListener('mouseleave', function (evt) {
        el.children[1].setAttribute('scale', '0 0 0);
    });  
  }
});

I change the scale, because changing visibility sometimes obstruct my raycaster, but You can do it using the scale , visible , or even opacity attributes. If You want it to seem overlayed, instead of a plane use another <a-curvedimage> placed close to the video.