Is it possible to create a button that starts a one-minute timer for a task where participants have to do something? I’ve made a one-minute movie with a timer, counting down to zero from 60 seconds. The play button with the <video> tag in limesurvey is tiny, so I need to make a separate larger button or an overlay button on the video.
I tried to add an overlay with javascript, with something like “press here to start a one-minute timer,” to start the movie with the countdown. Another possibility is to add a separate html button named “START TIMER,” with the video next to the button. The latter solution is below.
I’ve had no success so far. The code below works outside limesurvey on the same web server. In limesurvey, the page reloads and resets less than one second after pressing the play button. I have little experience with javascript and the HTML5 video tag, so I’m not sure what the issue is. Filter HTML for XSS is set to off in the global settings. The javascript seems to work slightly better when adding them in the source code for the questions than adding them in the custom.js file in the template, which is odd.
Does anyone have a solution to this or know what is going on? If possible, I would add something over the video, e.g., an image with “press here to start,” with the option of reloading and pausing the movie with separate buttons.
The following code was entered into the source of a text (mask) question type.
Code:
<video src="path/to/movie/name_of_movie.mp4" width=320 height=240 controls id=videoPlayer>
</video>
<div>
<button id=buttonPlay>Start</button>
<button id=buttonPause>Pause</button>
Current time is: <span id="timeDisplay"></span>
</div>
<script>
/* use global variable for ease */
var v = document.getElementById('videoPlayer');
/* play button */
document.getElementById('buttonPlay').addEventListener('click',function(e){ v.play(); },true);
/* pause button */
document.getElementById('buttonPause').addEventListener('click',function(e){ v.pause(); },true);
/* current time display (rounded to nearest second) */
v.addEventListener('timeupdate',function(e){ document.getElementById('timeDisplay').innerHTML = Math.floor(e.target.currentTime); },true);
</script>
