Как выполнить нужные условия до и после определенной даты JS?

Question

[Alex Goncharov]

Написал небольшой скрипт, который автоматически запускает видео с Youtube в определенное время каждый день (автовебинар). Например, в 20:00. Если пользователь открыл видео в 20:30, то плеер автоматически мотает видео на 30-ю минуту. Не разберусь, как давать разный набор инструкций, если пользователь открыл страницу:

• до начала вебинара (до 20:00) (пришел раньше)
  
• в течение 30 минут после старта (20:00) (пришёл вовремя)
  
• позже 30 минут после старта.
  

В коде есть комментарий капсом, где я пытаюсь создавать разный набор инструкций.

Благодарю за помощь. За код сильно не ругайте. Новичок, делал методом научного тыка.

<script src="http://host1693252.hostland.pro/js/playerjs.js" type="text/javascript"></script>
<div id="player"></div>
<meta charset="utf-8">

<script>
   var player = new Playerjs({id:"player", poster: "https://blogsimages.adobe.com/creativecloud/files/2015/04/blogposter-kids-01.png", file:"https://www.youtube.com/watch?v=IXv_PUiD20E"});
   console.log(player.api("id"));
 
     function startWebinar(){ 
     player.api("play");
     }
      function unmute(){ 
     player.api("unmute");
     }
     
    function seekToTime(){
    player.api("seek", playTimeOffset);
    } 

    
    var wHour = "20"; //час старта вебинара
    var wMinute = "00"; //минута старта вебинара
    var wTime = wHour + ":" + wMinute; //время старта вебинара
    let firstDate = wTime; //время старта вебинара
    
    //вычисляем разницу между текущим временем (открытия страницы) и временем старта вебинара
    var currentDateTime = new Date();
    var hrs = currentDateTime.getHours();
    var mnts = currentDateTime.getMinutes();
    var secondDate = (hrs+":"+mnts); //текущее время
    let getDate = (string) => new Date(0, 0,0, string.split(':')[0], string.split(':')[1]);
    let different = (getDate(secondDate) - getDate(firstDate));
    let differentRes, hours, minuts;
        if(different > 0) {
          differentRes = different;
          hours = Math.floor((differentRes % 86400000) / 3600000);
          minuts = Math.round(((differentRes % 86400000) % 3600000) / 60000);
            } else {
              differentRes = Math.abs((getDate(firstDate) - getDate(secondDate)));
              hours = Math.floor(24 - (differentRes % 86400000) / 3600000);
              minuts = Math.round(60 - ((differentRes % 86400000) % 3600000) / 60000);
            }
    let result = hours + ':' + minuts; 
    var playTimeOffset = (hours*3600)+minuts*60; //разница в секундах между временем открытия страницы и временем старта вебинара для функции seekToTime (плеер принимает в секундах и бросает в нужный момент видео)
    //назначаем время старта вебинара
    var now = new Date();
    var webinarStartTime = new Date(now.getFullYear(), now.getMonth(), now.getDate(), wHour, wMinute, 0, 0) - now; 
    

    var timeOfWebinar = new Date(now.getFullYear(), now.getMonth(), now.getDate(), wHour, wMinute, 0, 0);
    console.log(timeOfWebinar);
    console.log(currentDateTime);

//ПЫТАЮСЬ ДАТЬ РАЗНЫЙ НАБОР ИНСТРУКЦИЙ В ЗАВИСИМОСТИ ОТ ВРЕМЕНИ ОТКРЫТИЯ СТРАНИЦЫ    

               //час после вебинара
                var hourAfter = new Date();
                 hourAfter = hourAfter.setHours(hourAfter.getHours() + 1);
                console.log(hourAfter, timeOfWebinar, webinarStartTime)
              
              //если текущее время больше на час
               if (hourAfter > timeOfWebinar){
                player.api("stop");
                alert("Вы опоздали");
                }
                
                if (currentDateTime.getTime() >  timeOfWebinar.getTime())  {
                player.api("stop");
                alert("За полчаса");
                
                }
                
          
                 //если с начала вебинара еще не прошел 1 час, то запускаемм плеер
                else{
                  startWebinar();
                    seekToTime();
                    unmute(); //включаем звук  
                    
                }
   
    
    /**
     ЛОГИКА РАБОТЫ:Каждый день, в одно и то же время, ровно в 20:00 по Москве запускается воспроизведение видео через плеер. Если пользователь открыл страницу раньше 20:00, то воспроизведение не начинается автоматически, при попытке его запустить - сбрасывается/
     
     Если открывает позже, то плеер начинает воспроизведение видео с той минуты, с которой пользователь вошел на вебинар от его начала, то есть с 20:00. если зашел в 20:07, то видео начинает играть с 7-ой минуты
     */
     
     
 


</script>
<button onclick="seekToTime()">Перейти ко времени</button>

Comments

[Петро Бойко]

привет а шо за плеер вы сипользуете в скрипте

Answer 1

[alexalexes]

var now = new Date(); // Текущая дата
       var event_date = new Date ("Jul 17 2018 11:30:00 GMT+0300"); // дата события (+ часовой пояс, крайне обязательно)
       var dif_time = now.getTime() - event_date.getTime(); // разность в милисикундах по UTC (время приведено в один часовой пояс, крайне удачно)
       var duration = 60 * 60 * 1000; // время длительности вебинара в милисекундах
       switch(true)
       {
           case dif_time < 0:
            // действия до события
            break;
          case dif_time >= 0 && dif_time < duration:
            // действия во время события до окончания, (dif_time / 1000) - куда перематывать
            break;
          case dif_time >= duration:
            // действия после окончания события
            break;
       }

Comments

[Alex Goncharov]

Супер! Спасибо!

А как здесь, в дате, указывать всегда на текущий месяц, год и время сегодняшнего дня?

var event_date = new Date ("Jul 17 2018 11:30:00 GMT+0300");

[alexalexes]

Собрать строку из части текущей даты и скормить конструктору Date полный формат даты.
Месяц не символьный получается, но числовой тип подойдет.

var now = new Date(); // Текущая дата
  var event_date = new Date((now.getFullYear() + '.' + (now.getMonth() + 1) + '.' + now.getDate()) + " 11:30:00 GMT+0300");

[Alex Goncharov]

alexalexes, спасибо большое! Решил. Теперь если я захочу добавить действия через 30 минут до начала, мне нужно создать новый case и добавить 30 минут ко времени старта?

[alexalexes]

Кейс case dif_time < 0 убирается и вместо него добавляются такие кейсы:

var before_time = 30 * 60 * 1000; // время длительности предстартового периода в милисекундах
  switch(true)
  {
     case  -dif_time > before_time:
        // действие до начала предстартового периода
         break;
     case  -dif_time <= before_time && dif_time < 0:
        // действие в предстартовый период
         break;
        ....
  }