Добавить ответ
Скрыть последние ответы
Сообщений в теме: 1

подскажите по JS пожалуйста

Аватар им. ecrou
Сообщений: 1
Регистрация: 11 июня 2012, 17:44
Постов в блогах: 0
Создано топиков: 1
-
0
+
Ребят, привет.
Ниже код html+js, суть такая. видео на странице, в див current-time выводится текущее время, которое в данный момент на видео. Я хочу сделать следующее: чтобы когда в диве current-time будет время 0:05 на страницу перед закрытием тега вставлялся нужный мне код html

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


<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>YouTube API</title>
<script type="text/javascript" src="https://code.jquery.com/jquery-2.2.4.js"></script>


</head>

<body>
<p><span id="current-time">0:00</span></p>
<div id="video-placeholder"></div>
<script src="https://www.youtube.com/iframe_api"></script>
<pre><code class="javascript">
<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>

Отредактирован: 5 февраля 2017, 23:21
Ответить
Аватар им. tomasci
Сообщений: 966
Регистрация: 26 ноября 2011, 14:02
Постов в блогах: 6
Создано топиков: 17
-
0.8
+
ecrou, вот простейший способ :) (все это проверил на твоем коде, скопировав его себе)

Что происходит?
В новом блоке по стандарту есть текст. Если прошло больше 5 секунд видео — я добавляю туда еще кусочек.

В блоке в любом месте добавь (чисто для примера) (ид блока можно поставить уже существующий или сделать новый и т.д.):

<div id="html">Default html.</div>


В JS скрипте замени updateTimerDisplay функцию, после нее допишу новую и не забудь 1 строку :) (говнокод ТМ)

var inserted = 0;

function updateTimerDisplay() {
    $('#current-time').text(formatTime(player.getCurrentTime()));
	console.log(player.getCurrentTime());	
	
	if(player.getCurrentTime() > 5.0) {
		if (inserted == 0) {
			insertCode();
			inserted = 1;
		}
	}

}

function insertCode() {
	$('#html').append('<b>Text after 0:05</b>');
}


Отредактирован: 7 февраля 2017, 00:57
Ответить
Добавить быстрый ответ
+
smiles
[cut]