Start and Stop a Video
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.
Previous TopicNext Topic