Загрузить видео youtube на основе текущего времени?

У меня есть слайд-шоу на основе веб-страницы (index.php) и хотелось бы, чтобы другая страница (commercial.php) прерывала его каждые 10 минут или около того, а затем возвращалась к index.php, как только страница commercial.php была в течение X минут.Загрузить видео youtube на основе текущего времени?

Я думаю, что способ сделать это, если бы javascript сказал, «если текущие минуты делятся на 10, загрузите commercial.php. Когда таймер commercial.php заканчивается, загрузите index.php». Я просто не знаю, как это сделать в коде ... :(

Ниже приведена тестовая страница, которую я создал, чтобы перевести ее на настоящую веб-страницу ...

<body> 

    <div id="time"></div> 
    <div class="frame" style="border:1px solid red;width:100%;height:90%;"></div> 

    <script> 
    function time() { 
    $("#time").text(new Date().getHours() + ":" + new Date().getMinutes() + ":" + new Date().getSeconds()); 
    } 
    setInterval(time, 1000); 
    time(); 

    //IF STATEMENT TO LOAD VIDEO IN DIV.FRAME? 

    </script> 

</body>

Любая помощь будет весьма признателен Спасибо

источник

2016-06-14 mrmills129

Итак, я взял подход к хранению минут в отдельной переменной, а затем с помощью оператора модуля на нем mins%10, чтобы узнать, равен ли он 0.

function time() { 
    var hours = new Date().getHours(), 
     mins = new Date().getMinutes(), 
     secs = new Date().getSeconds(); 

    $("#time").text(hours + ":" + mins + ":" + secs); 

    if(mins%10 == 0) { 
    console.log('sending to commercial.php'); 
    //location.href = 'commercial.php'; 
    loadVideo(); 
    } 
} 
//setInterval(time, 1000); 
time(); 

function loadVideo(){ 
    console.log('loading video'); 
    $('<iframe>', { 
    src: 'https://www.youtube.com/embed/dQw4w9WgXcQ?rel=0&autoplay=1', 
    width: "560", 
    height: "315", 
    id: 'myFrame', 
    frameborder: 0, 
    scrolling: 'no' 
    }).appendTo('.frame'); 
}

В случае, если это действительно так, вы загружаете свое видео. Я не был уверен, что вы перенаправляетесь на новую страницу (что вы можете сделать с location.href, или если вы собираетесь просто добавить его на страницу. Я принял подход добавления iframe на страницу.

мой пример https://jsfiddle.net/enigmarm/rrgbfa8x/1/

Обратите внимание, что я прокомментировал интервал. Вам нужно будет отслеживать, было ли видео уже загружено или нет, поэтому в течение целой минуты вы не просто обновляете одно и то же видео повторно. , в моей скрипке я добавил 1==1 в блок if. Именно так вы можете видеть, как видео загружается на вашу существующую страницу.

Насколько я ong, чтобы отобразить это для, я полагаю, это зависит от того, где вы загружаете видео/рекламу. В идеале видеоплеер имеет статус события, к которому вы можете подключиться. Поэтому, когда видео перестает играть, вы можете обнаружить это и вернуться к слайд-шоу. YouTube's Player API has onStateChange. В противном случае вам нужно будет знать, сколько времени займет каждая реклама, а затем через 30 секунд (или независимо от длины) вы вернетесь на слайды.

Как вы смотрите, чтобы он выгорает, вы можете использовать JQuery-х fadeIn function.Чтобы это работало, когда вы добавляете новый элемент, сначала нужно скрыть элемент display: none;. В моей обновленной скрипке: https://jsfiddle.net/enigmarm/rrgbfa8x/3/ Я просто установить iframe {display:none;}, then used .fadeIn (3000) to fade it in over 3 seconds. To have it fade out, you can look at jQuery's [ FADEOUT() `] 3

function loadVideo() { 
    console.log('loading video'); 
    $('<iframe>', { 
    src: 'https://www.youtube.com/embed/dQw4w9WgXcQ?rel=0&autoplay=1', 
    width: "560", 
    height: "315", 
    id: 'myFrame', 
    frameborder: 0, 
    scrolling: 'no' 
    }).appendTo('.frame').fadeIn(3000); 
}

источник

2016-06-14 16:08:16 EnigmaRM

Это была отличная помощь! взял то, что вы мне дали, и внес изменения, чтобы показать разные страницы. вы установили и работали секцию youtube api. есть ли простой способ сделать переходы между index.php и commercial.php fadeIn и out? еще раз спасибо! – mrmills129

Нет проблем. Есть способ сделать это. Вам нужно будет скрыть элемент, который вы добавляете с помощью CSS, затем вы можете использовать jQuery 'fadeIn()'. См. Мой обновленный ответ. – EnigmaRM

простой базовый подход заключается в следующем:

index.php

<body> 

    <div id="time"></div> 
    <div class="frame" style="border:1px solid red;width:100%;height:90%;"></div> 

    <script> 

    //IF STATEMENT TO LOAD VIDEO IN DIV.FRAME? 

    setTimer(function() { 
     window.location.href = "commercial.php?parameters..."; 
    }, 600000); //10 minutes 
    </script> 

</body>

Включите любую требуемую информацию в параметры (например, информацию о том, что посмотреть или с чего начать). Имейте в виду, что пользователи могут легко перехватывать и останавливать таймеры на стороне клиента (но вы на самом деле не можете этого сделать).

commerical.php

Page HTML 
<script> 
    setTimer(function() { 
    window.location.href = "index.php?parameters..."; 
    }, X); //Min time in this page? 
</script>

В ваших возвращении параметров, вероятно, можно повторно передать те, которые вы получили от индекса, который может включать в себя информацию, необходимую для возобновления, где вы были. Это, вероятно, не то же самое, что и ваше предложение, но это можно рассматривать как альтернативу.

источник

2016-06-14 16:00:51 apokryfos

Спасибо за ваш ответ. Я думал о том, чтобы делать это так, но я был обеспокоен тем, что это может проглотить все, и счетчик идет так долго. Я планирую попробовать решение @EnigmaRN, но дам это тоже. Всегда полезно узнать больше, чем один способ сделать что-то. Еще раз спасибо! – mrmills129

Загрузить видео youtube на основе текущего времени?

ответ

Смежные вопросы