Dear support team,
I am showing participants a video and would like the next page to be automatically shown as soon as the video ends. I want to ensure that participants cannot replay the video. I know there is the possibility to automatically move on to the next page after a timer goes off, but in my case, maybe participants take a few seconds before they press "Play", so I would rather do it the way I described it.
Alternatively, I could hide the "Play" button once it was clicked.
Could you please help me implement this in my code?
Thank you in advance and have a nice day!
Here is the code:
<!-- for styling the play button -->
<style>
#playbutton{
user-select: none;
border: 1px solid #747478;
border-radius: 5px;
background-color: #E9E9ED;
padding: 5px;
width: fit-content;
}
#playbutton:hover:not(.clicked){
background-color: #D0D0D7;
}
#playbutton.clicked{
color: grey;
border-color: grey;
}
</style>
<!-- below comes the main content of the page -->
<video width="1024" height="576" id="stimulus"
disablepictureinpicture
>
<source src="video_1_5.mp4" type="video/mp4" />
</video>
<div id="playbutton">
Play
</div>
<!-- here goes the JS code. It needs the elements to be defined before it works -->
<script type="text/javascript">
let video = document.getElementById("stimulus")
let button = document.getElementById("playbutton")
// adds click function to button
button.addEventListener("click", handlePlayButtonClick)
// hides next button
SoSciTools.submitButtonsHide()
// shows next button after video ended
video.addEventListener("ended", SoSciTools.submitButtonsDisplay)
// ## Functions ##
// changes the play button design and calls playvideo()
function handlePlayButtonClick(){
let button = document.getElementById("playbutton");
button.classList.add("clicked")
playvideo()
}
// starts the video
function playvideo(){
let video = document.getElementById("stimulus");
video.play();
};
</script>