Start and Stop a Video

Start and Stop a Video

Topic Progress:

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:

   <video id="meinVideo" autoplay loop="true" src="videos/uhr_4.mp4"></video>
<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:

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

Video Event ended

When the video is not looped

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

it is possible to listen to an ended event:

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

Download the finished example.



Comments are closed.