Playing video at certain point at certain time of the day

Question

I am trying to get my video to play at a certain point depending on what time the day it is. For example, if it was 16:12:54 p.m my video will start playing from 16:12:54. If it was 16:13:00 p.m the video will start at 16:13:00 and so forth. For now it only plays at a certain time of the day. Many thanks.

function checkTimeAndPlay() {
    var date = new Date();
    if (date.getHours() == 12 && date.getMinutes() == 0) {
        document.getElementById('video_id').play();
    } else {
        setTimeout("checkTimeAndPlay", 1000);
    }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Remove quotes when using function reference i.e. `setTimeout(checkTimeAndPlay, 1000);` __or__ use `()` when passing code to be executed as string i.e. `setTimeout("checkTimeAndPlay()", 1000);` — Satpal, Nov 15 '18 at 07:45
*if it was **16**:12:54* why you wrote `date.getHours() == 12`? — Mohammad, Nov 15 '18 at 07:55
are you looking for seek video to some point? if yes, here is a good answer: https://stackoverflow.com/questions/10461669/seek-to-a-point-in-html5-video just use currentTime property (https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/currentTime) — Yaroslav Bigus, Nov 15 '18 at 08:19
@Yaroslav Bigus It will be 24 hour video. It can start at any time depending on the time of the day.1 a.m it will start hour 1 of video. 2 a.m it will start at hour 2 video. 3:01:02 a.m it will start at 3:01:02 of video. — portalboy95, Nov 15 '18 at 08:24

Mohammad · Accepted Answer · 2018-11-15T08:31:03.170

1

You need to check current time with target time. So you should get hour using .getHours(), minute using .getMinutes() and second using .getSeconds() to checking them.

function checkTimeAndPlay() {
  var date = new Date();
  // Check if time is 16:12:54
  if (date.getHours() == 16 && date.getMinutes() == 12 && date.getSeconds() == 54)
    document.getElementById('video_id').play();
  else {
    console.log("Time isn't match");
    setTimeout(checkTimeAndPlay, 1000);
  }
}
checkTimeAndPlay();

Also if you want to play video from special time (current time) you should change currentTime property of video.

var date = new Date();
var vid = document.getElementById("myVideo");
vid.currentTime = (date.getHours()*3600) + (date.getMinutes()*60) + date.getSeconds();
vid.play();

edited Nov 15 '18 at 08:31

answered Nov 15 '18 at 08:04

Mohammad

21,175
15
55
84

I don't need it to be at 16:12:54. It can be any time. I just want my video start time to match the time of the day. If it is xx:xx:xx p.m the video will start at the same xx:xx:xx. Thanks! Sorry if I'm not clear. – portalboy95 Nov 15 '18 at 08:08
@portalboy95 You mean video start from hour 16, so your video should have 24 hour length and browser should download video from start to hour 16 to start playing – Mohammad Nov 15 '18 at 08:13
Yes it will be 24 hour video. It can start at any time depending on the time of the day.1 a.m it will start hour 1. 2 a.m it will start at hour 2 and so forth. – portalboy95 Nov 15 '18 at 08:17
So if I just changed it to current property it will now play from my clock's time? Clock time is 12:14:53 p.m video start time will be 12:14:53. Many thanks. – portalboy95 Nov 15 '18 at 08:55
@portalboy95 Yes, but it take time to load video to target time – Mohammad Nov 15 '18 at 08:58
Awesome. Thanks. I'll try it for myself soon. – portalboy95 Nov 15 '18 at 09:02

score 0 · Answer 2 · answered Nov 15 '18 at 07:52

0

If I understood what you need correctly,

the answers are here Fire event at a certain time of the day

It's all about creating the date that suits you, get current time and use setTimeout for the difference a date that.

To create the date you want use new Date(year, month, day, hours, minutes, seconds, milliseconds)

answered Nov 15 '18 at 07:52

Yorgos Kakavas

31
5

I will look into this more. Thanks. – portalboy95 Nov 15 '18 at 07:56

Playing video at certain point at certain time of the day

2 Answers2