I try to execute an action when user press a button (An event listener needed because https://webkit.org/blog/6784/new-video-policies-for-ios/), but I guess, I have some syntax/logic mistake. Some help would be nice :D.
Here is the code:
HTML:
<a-image id="playbutton_1" position="-5 0 0" width="2" height="2" rotation="0 -90 0" ></a-image>
JS:
var playthisvid_1 = document.querySelector('#playbutton_1');
playthisvid_1.addEventListener('click', () => { console.log("it clicks"); })
Aframe elements won't simply react to touch / mouse events. You need a ray based cursor.
A good way to simulate the mouse is with the cursors attribute:
<a-scene cursor="rayOrigin: mouse">
It should also work with touch events on mobile devices.
Check it out here.
Otherwise use the a-frame cursor.
<a-cursor></a-cursor>
I think the problem is with aframe. The javascript code is working perfect. I just replaced the aframe element with a normal button and the function is working.
var playthisvid_1 = document.querySelector('#playbutton_1');
playthisvid_1.addEventListener('click', () => { console.log("it clicks"); })<a id="playbutton_1" href="#">Test</a>Maybe this can solve your problem ? AFrame: how to add a touch event listener to an entity
check this out for a complete example:
https://curious-electric.com/w/experiments/aframe/audiosprite/
It is an audio example, but the same technique applies for video (i.e. get the user to click a button first).
Best, Dirk
