GetCurrentTime() [YouTube API]

@MaciFree · Регистрация: 10.07.2013

Студворк — интернет-сервис помощи студентам

Ребят, привет.
Ниже код html+js, суть такая. видео вставляется в див video-placeholder, в див current-time выводится текущее время, которое в данный момент на видео. Каждую секунду скрипт проверяет, на какой секунде находится ползунок времени. Я хочу сделать следующее: чтобы когда в диве current-time будет время 0:05 (т.е видео у нас будет на 5 секунде) на страницу перед закрытием тега body вставлялся нужный мне код html

не могу никак сам сделать, можете кто-нибудь дописать/подсказать?
Заранее спасибо огроменное

PHP/HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>YouTube API</title>
 
</head>
 
<body>
 
<div id="video-placeholder"></div>
<div style="height:450px;"></div>
<p><span id="current-time">0:00</span></p>
<script src="https://www.youtube.com/iframe_api"></script>
<script>
        
    var player,
    time_update_interval = 0;
 
function onYouTubeIframeAPIReady() {
    player = new YT.Player('video-placeholder', {
        width: 600,
        height: 400,
        videoId: 'oavMtUWDBTM',
        playerVars: {
            color: 'white'
        },
        events: {
            onReady: initialize
        }
    });
}
 
function initialize() {
 
    // Update the controls on load
    updateTimerDisplay();
    updateProgressBar();
 
    // Clear any old interval.
    clearInterval(time_update_interval);
 
    // Start interval to update elapsed time display and
    // the elapsed part of the progress bar every second.
    time_update_interval = setInterval(function() {
        updateTimerDisplay();
        updateProgressBar();
    }, 1000);
 
}
 
 
// This function is called by initialize()
function updateTimerDisplay() {
    // Update current time text display.
    $('#current-time').text(formatTime(player.getCurrentTime()));
 
}
 
 
// This function is called by initialize()
function updateProgressBar() {
    // Update the value of our progress bar accordingly.
    $('#progress-bar').val((player.getCurrentTime() / player.getDuration()) * 100);
}
 
 
 
 
// Load video
 
$('.thumbnail').on('click', function() {
 
    var url = $(this).attr('data-video-id');
 
    player.cueVideoById(url);
 
});
 
 
// Helper Functions
 
function formatTime(time) {
    time = Math.round(time);
 
    var minutes = Math.floor(time / 60),
        seconds = time - minutes * 60;
 
    seconds = seconds < 10 ? '0' + seconds : seconds;
 
    return minutes + ":" + seconds;
 
}
 
 
$('pre code').each(function(i, block) {
    hljs.highlightBlock(block);
});
 
 
    </script>
</body>
</html>

Добавлено через 57 минут
можно закрывать, разобрался

@Vivili · 10.04.2017, 12:33

привет. MaciFree, подскажи, пожалуйста, как ты сделал? у меня точно такой же вопрос

@evikza · 10.04.2017, 16:02

Vivili, попробуйте такой вариант. Найдите функцию - formatTime(time) и замените ее:

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
function formatTime(time) {
    time = Math.round(time);
 
    var minutes = Math.floor(time / 60),
        seconds = time - minutes * 60;
 
    seconds = seconds < 10 ? '0' + seconds : seconds;
  
      if (seconds == 5) { // -> если прошло 5 секунд
        $('body').append($('<span/>', {
        class: 'text',
        text: 'Блок, который добавится после 5 секунд воспроизведения'
      }));
      }
 
    return minutes + ":" + seconds;
 
}

Демонстрация

PHP/HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
<html>
 
<head>
  <meta charset="UTF-8">
  <title>YouTube API</title>
 
</head>
 
<body>
 
  <div id="video-placeholder"></div>
  <div></div>
  <p><span id="current-time">0:00</span></p>
  <script src="https://www.youtube.com/iframe_api"></script>
  <script>
    var player,
      time_update_interval = 0;
 
    function onYouTubeIframeAPIReady() {
      player = new YT.Player('video-placeholder', {
        width: 600,
        height: 200,
        videoId: 'oavMtUWDBTM',
        playerVars: {
          color: 'white'
        },
        events: {
          onReady: initialize
        }
      });
    }
 
    function initialize() {
      // Update the controls on load
      updateTimerDisplay();
      updateProgressBar();
      // Clear any old interval.
      clearInterval(time_update_interval);
      // Start interval to update elapsed time display and
      // the elapsed part of the progress bar every second.
      time_update_interval = setInterval(function() {
        updateTimerDisplay();
        updateProgressBar();
      }, 1000);
    }
    // This function is called by initialize()
    function updateTimerDisplay() {
      // Update current time text display.
      $('#current-time').text(formatTime(player.getCurrentTime()));
    }
    // This function is called by initialize()
    function updateProgressBar() {
      // Update the value of our progress bar accordingly.
      $('#progress-bar').val((player.getCurrentTime() / player.getDuration()) * 100);
    }
    // Load video
    $('.thumbnail').on('click', function() {
      var url = $(this).attr('data-video-id');
      player.cueVideoById(url);
    });
    // Helper Functions
    function formatTime(time) {
      time = Math.round(time);
      var minutes = Math.floor(time / 60),
        seconds = time - minutes * 60;
      seconds = seconds < 10 ? '0' + seconds : seconds;
      if (seconds == 5) { // -> если прошло 5 секунд
        $('body').append($('<span/>', {
          class: 'text',
          text: 'Блок, который добавится после 5 секунд воспроизведения'
        }));
      }
      return minutes + ":" + seconds;
    }
    $('pre code').each(function(i, block) {
      hljs.highlightBlock(block);
    });
  </script>
</body>
 
</html>

Не забудьте подключить jQuery

Новые блоги и статьи Все статьи Все блоги /
Перемещение выделенных строк ТЧ из одного документа в другой Maks 30.03.2026 Реализация из решения ниже выполнена на примере нетипового документа "ВыдачаОборудованияНаСпецтехнику" с единственной табличной частью "ОборудованиеИКомплектующие" разработанного в конфигурации КА2. . . .	Functional First Web Framework Suave DevAlt 30.03.2026 Sauve. IO Апнулись до NET10. Из зависимостей один пакет, работает одинаково хорошо как в режиме проекта так и в интерактивном режиме. из сложностей - чисто функциональный подход. Решил. . .	Автоматическое создание документа при проведении другого документа Maks 29.03.2026 Реализация из решения ниже выполнена на нетиповых документах, разработанных в конфигурации КА2. Есть нетиповой документ "ЗаявкаНаРемонтСпецтехники" и нетиповой документ "ПланированиеСпецтехники". В. . .	Настройка движения справочника по регистру сведений Maks 29.03.2026 Решение ниже реализовано на примере нетипового справочника "ТарифыМобильнойСвязи" разработанного в конфигурации КА2, с целью учета корпоративной мобильной связи в коммерческом предприятии. . . .
Автозаполнение реквизита при выборе элемента справочника Maks 27.03.2026 Программный код из решения ниже на примере нетипового документа "ЗаявкаНаРемонтСпецтехники" разработанного в конфигурации КА2. При выборе "Спецтехники" (Тип Справочник. Спецтехника), заполняется. . .	Сумматор с применением элементов трёх состояний. Hrethgir 26.03.2026 Тут. https:/ / fips. ru/ EGD/ ab3c85c8-836d-4866-871b-c2f0c5d77fbc Первый документ красиво выглядит, но без схемы. Это конечно не даёт никаких плюсов автору, но тем не менее. . . всё может быть. . .	Автозаполнение реквизитов при создании документа Maks 26.03.2026 Программный код из решения ниже размещается в модуле объекта документа, в процедуре "ПриСозданииНаСервере". Алгоритм проверки заполнения реализован для исключения перезаписи значения реквизита,. . .	Команды формы и диалоговое окно Maks 26.03.2026 1. Команда формы "ЗаполнитьЗапчасти". Программный код из решения ниже на примере нетипового документа "ЗаявкаНаРемонтСпецтехники" разработанного в конфигурации КА2. В качестве источника данных. . .

@Vivili 0 / 0 / 0 Регистрация: 10.04.2017 Сообщений: 1
	10.04.2017, 12:33
	привет. MaciFree, подскажи, пожалуйста, как ты сделал? у меня точно такой же вопрос 0

GetCurrentTime() [YouTube API]

Решение