Controlling the Video

On a smartphone a user interaction to trigger the video is required. First we place the assets, the video and a start and stop object:

<a-assets>
   <video id="meinVideo" autoplay loop="true" src="videos/uhr_4.mp4"></video>
</a-assets>
		
<a-box id="stop" position="2 0 0" color="#FF0000"></a-box>
<a-box id="start" position="-2 0 0" color="#00FF00"></a-box>
<a-video src="#meinVideo" width="4" height="3" position="0 0 -2"></a-video>

Then we need Javascript to control everything:

<script>
  document.addEventListener("DOMContentLoaded", function() {
    var video = document.querySelector('#meinVideo');
    var start = document.querySelector('#start');
    var stop = document.querySelector('#stop');
    // Pause
    //video.pause();
    // Video
    start.addEventListener('click', function () {
        video.play();
    })
    stop.addEventListener('click', function () {
        video.pause();
    })
})
		</script>

Video Event ended

When the video is not looped

<a-assets>
   <video id="meinVideo" autoplay loop="false" src="videos/uhr_4.mp4"></video>
</a-assets>

it is possible to listen to an ended event:

video.addEventListener("ended", function() {
   console.log("The video has ended");
})

Download the finished example.