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:
|
1 2 3 4 5 6 7 |
<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:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<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
|
1 2 3 |
<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:
|
1 2 3 |
video.addEventListener("ended", function() { console.log("The video has ended"); }) |
Download the finished example.