I am looking to create a dynamic webpage that features both a digital clock and a video element. The unique aspect of this page is that when the clock reaches the 35th second of each minute, the video should automatically start playing.
For example, if the time is exactly 21:00:35, a 15-second video clip will begin playing. Once the video finishes, it will pause until the clock reads 21:01:10. At this point, the same 15-second video clip will play again, repeating the cycle every 35 seconds.
function displayCurrentTime() {
var currentdate = new Date();
var hours = currentdate.getHours(); // 0 - 23
var minutes = currentdate.getMinutes(); // 0 - 59
var seconds = currentdate.getSeconds(); // 0 - 59
if (hours < 10) {
hours = "0" + hours;
}
if (minutes < 10) {
minutes = "0" + minutes;
}
if (seconds < 10) {
seconds = "0" + seconds;
}
var currentTime = hours + ":" + minutes + ":" + seconds;
document.getElementById('myClock').innerText = currentTime;
document.getElementById('myClock').textContent = currentTime;
setTimeout(displayCurrentTime, 1);
}
displayCurrentTime();<i>
<video width="320" height="240" controls>
<source src="Myvid01.mp4" type="video/mp4">
</video>
</i>