[JW Player скрипт] Как сделать, чтобы кнопка под видео появлялась через время? %)

Кнопка, которая появляется по таймеру под видео jw player
Привет друг!

Недавно по одному из проектов, которые я веду, необходимо было решить следующую проблему:

Сделать кнопку, которая появляется перед окончанием видео, строго в определенное время, а именно на 24-й минуте.

Такая функция часто нужна ребятам, которые занимаются инфобизнесом или интернет-маркетингом.

Прочитай этот пост до конца, информация обновилась.

Раньше эта проблема уже решалась, но более простым образом.

Вот как БЫЛО:

<div id="link"></div>

<script type="text/javascript">
var obj = document.getElementById('link');
var timerFIG = 7; //Время, через которое появляется кнопка В СЕКУНДАХ:
var timer = setInterval("startTimer()",1000);
function startTimer() {
if(timerFIG !== 1) {
timerFIG--;
} else {
clearInterval(timer);
obj.innerHTML = '<a href="http://twog.me/"><img src="/button.png" border="0" /></a>';
}}
</script>

Принцип раньше был очень простой, после загрузки страницы стартовал таймер и после того, как он откручивал установленное время, появлялась кнопка.

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

кнопка в определенное время видео jw player инфобизнес

Поэтому было решено разобраться с документацией JW Player (в данном случае автор использует JW Player для своих self-hosted видео и поэтому я работал с документацией именно этого плеера, а вообще рекомендую его всем). Разобраться и сделать жесткую привязку конкретно ко времени проигрываемого видео.

Вот как СТАЛО:

<div id="link"></div>

<script type="text/javascript">
var obj = document.getElementById('link');

//начальная задержка, чтобы плеер успел загрузится и не возникало ошибок
setTimeout('initTimer()',3000);

function initTimer() {
var timer = setInterval('startTimer()',500);
}

//Функция для дебага (по умолчанию не нужна, так что можно ее стереть)
/*
function alertjwTime() {
var jwplayerTime = jwplayer().getPosition() + '';
if(jwplayerTime.indexOf('.') > 0) {
jwplayerTime = jwplayerTime.substring(0, jwplayerTime.length-2);
}
alert(jwplayerTime);
}
*/

function startTimer() {
var jwplayerTime = jwplayer().getPosition();
jwplayerTime += '';
if(jwplayerTime.indexOf('.') > 0) {
jwplayerTime = jwplayerTime.substring(0, jwplayerTime.length-2);
}

//1440 - ВРЕМЯ ПОЯВЛЕНИЯ КНОПКИ В СЕКУНДАХ (24 мин. = 24 * 60)
//Поменять и 1440 и 1440. - это небольшой костыль для opera и mozilla
if((jwplayerTime == '1440') || (jwplayerTime == '1440.')) {
obj.innerHTML = '<div id="buttonBox"><a href="http://twog.me/"><img src="button.png" border="0" /></a></div>';
}
}
</script>

ОБНОВЛЕНИЕ (08.09.12):

С помощью ребят, которые писали в комментах ниже, мне удалось разобраться с проблемами,
когда кнопка не работала при вставке через вкладку HTML редактора WordPress.

В итоге родились еще 3 совета, которые должны помочь тебе использовать этот скрипт без проблем.

1. Видосы с YouTube плеером JW Player'ом воспроизводятся, но в виду непонятных причин кнопка не появляется в нужное время каждый раз. Поэтому, чтобы кнопка гарантированно появлялась каждый раз, лучше видео загружать на свой хостинг или на Amazon, если ожидается много просмотров.

2. Есть такой плагин - Code Insert Manager. Установи его на свой сайт и с помощью него ты сможешь добавлять любой код в записи и страницы своего сайта без глюков.

3. Вот код для вставки без переносов строк:
(НЕ забудь заменить в двух местах цифру 44 и 44. )

<div id="link"></div> <script type="text/javascript"> var obj = document.getElementById('link'); setTimeout('initTimer()',3000); function initTimer() { var timer = setInterval('startTimer()',500);} function startTimer() { var jwplayerTime = jwplayer().getPosition(); jwplayerTime += ''; if(jwplayerTime.indexOf('.') > 0) { jwplayerTime = jwplayerTime.substring(0, jwplayerTime.length-2); } if((jwplayerTime == '44') || (jwplayerTime == '44.')) { obj.innerHTML = '<div id="buttonBox"><a href="http://twog.me/"><img src="button.png" border="0" /></a></div>'; }} </script>

Пользуйся на здоровье! Решение 100% рабочее, я очень много его тестировал на браузерах последних версий: Chrome, Opera, Mozilla, IE 9, Safari для Windows. 2 раза даже с часами засекал 🙂

Обязательно напиши мне ниже в комментах к этой записи, если у тебя возникли какие-то вопросы.

C уважением, Богдан Григорук.

[ Прочитайте комменты ниже или напишите свой... ]

Ищете хостинг для своего сайта? Могу порекомендовать свой (нажмите здесь)

31 комментарий к “[JW Player скрипт] Как сделать, чтобы кнопка под видео появлялась через время? %)”

  1. Виталий 21.08.2012 в 20:46 #

    Привет! Первый вариант работает а второй нет - не пойму почему

    • Богдан 21.08.2012 в 21:44 #

      Привет Виталий.

      Скинь, пожалуйста, ссылку на страничку на которой ты хочешь использовать этот скрипт (если это возможно).

      Я посмотрю, какие могут быть проблемы.

      И еще, у меня возникло подозрение, что ты скопировал второй вариант, но не поменял время, через которое появляется кнопка.

      Там по умолчанию стоит 1440 секунд (24 минуты), поэтому у тебя просто не появляется долго кнопка и ты подумал, что плеер не работает.

      Попробуй в строке (строка 33 в записи):

      if((jwplayerTime == '1440') || (jwplayerTime == '1440.')) {

      поменять обе цифры 1440 на 10, например.

      Важно! Там 2 варианта - "1440" и "1440." (с точкой). Не сотри во втором варианте точку случайно.

      У тебя все получится 😉

  2. Виталий 21.08.2012 в 22:52 #

    страница где делаю http://vitaliyichin.ru/trening/
    вот так у меня стоит, сверху только добавлен сам видеоролик

    [jwplayer mediaid="529"]

    var obj = document.getElementById('link');

    //начальная задержка, чтобы плеер успел загрузится и не возникало ошибок

    setTimeout('initTimer()',3000);

    function initTimer() {

    var timer = setInterval('startTimer()',500);

    }

    //Функция для дебага (по умолчанию не нужна, так что можно ее стереть)

    /*

    function alertjwTime() {

    var jwplayerTime = jwplayer().getPosition() + '';

    if(jwplayerTime.indexOf('.') > 0) {

    jwplayerTime = jwplayerTime.substring(0, jwplayerTime.length-2);

    }

    alert(jwplayerTime);

    }

    */

    function startTimer() {

    var jwplayerTime = jwplayer().getPosition();

    jwplayerTime += '';

    if(jwplayerTime.indexOf('.') > 0) {

    jwplayerTime = jwplayerTime.substring(0, jwplayerTime.length-2);

    }

    //1440 - ВРЕМЯ ПОЯВЛЕНИЯ КНОПКИ В СЕКУНДАХ (24 мин. = 24 * 60)

    //Поменять и 1440 и 1440. - это небольшой костыль для opera и mozilla

    if((jwplayerTime == '2') || (jwplayerTime == '2.')) {

    obj.innerHTML = '';

    }

    }

    • Богдан 22.08.2012 в 00:40 #

      Понятно, я посмотрел код твоей страницы, оказывается там редактор визуальный портит код.

      Чтобы это исправить надо:

      1. Снова выделить и скопировать код с этой страницы

      2. Открыть редактирование этой записи у себя в вордпрессе

      3. Открыть вкладку HTML в редакторе

      4. Удалить все оттуда

      5. Вставить туда следующий код (это уже с твоим плеером):

       
      [jwplayer mediaid=&quot;529&quot;]
       
      
       
      &lt;div id=&quot;link&quot;&gt;&lt;/div&gt;
       
      
       
      &lt;script type=&quot;text/javascript&quot;&gt;
       
      var obj = document.getElementById('link');
       
      
       
      setTimeout('initTimer()',3000);
       
      
       
      function initTimer() {
       
      var timer = setInterval('startTimer()',500);
       
      }
       
      
       
      function startTimer() {
       
      var jwplayerTime = jwplayer().getPosition();
       
      jwplayerTime += '';
       
      if(jwplayerTime.indexOf('.') &gt; 0) {
       
      jwplayerTime = jwplayerTime.substring(0, jwplayerTime.length-2);
       
      }
       
      
       
      //ВРЕМЯ ПОЯВЛЕНИЯ КНОПКИ В СЕКУНДАХ
       
      //Поменять и 14 и 14.
       
      if((jwplayerTime == '14') || (jwplayerTime == '14.')) {
       
      obj.innerHTML = '&lt;div id=&quot;buttonBox&quot;&gt;<a href="хттп://адрессайта" target="_blank">&lt;img src=&quot;button.png&quot; border=&quot;0&quot; /&gt;</a>&lt;/div&gt;';
       
      //ПОЯВЛЯЮЩАЯСЯ КНОПКА СО ССЫЛКОЙ
       
      }
       
      }
       
      &lt;/script&gt;
       
      

      6. Сохранить

      P.S. Если ты потом будешь переключаться назад на вкладку "Визуально" в редакторе и Сохранишь запись, то весь скрипт опять надо будет по этом алгоритму вставлять. Это достаточно муторно.

      Поэтому если хочешь я помогу тебе сделать более удобный вариант по скайпу, его отправил в письме.

      С уважением,

      Богдан.

  3. Александр 28.08.2012 в 17:21 #

    первая версия тоже работает, вторая не исходная, ни правленная с комментариев не работает. Видео вставляю тоже плагином с помощью конструкции [jwplayer mediaid=" "] (сайт на вордпресс). Помогите разобраться

  4. Артем 22.09.2012 в 21:30 #

    Здравствуйте Богдан, ваш код будет работать во всех браузерах ?

    IE6-10 Firefox Opera

    • Богдан 23.09.2012 в 12:34 #

      Здравствуйте Артем. Насчет IE6 со 100% уверенностью сказать не могу, потому что не проверял. Но во всех последних версиях популярных браузеров, я его тестировал и он работает (Opera, Firefox, Chrome, IE 9-10, Safari). Особенно с учетом поправок, которые я внес после обратной связи.

  5. Юзер 19.02.2013 в 21:59 #

    Отлично!

    Первый скрипт задержки появления кнопки - больше часа искал.

    Афтар молодец!

  6. Светомир 22.02.2013 в 03:02 #

    Первый вариант работает, большое спасибо. А можно что бы этот скрипт также работал с пелерами ютуба и других сервисов. А также, чтобы до появления кнопки отображался таймер отсчета. Большое спасибо.

    • Богдан 25.02.2013 в 00:10 #

      Здравствуйте Светомир.

      Я изучу вопрос насчет ютуба, мне самому это интересно, и насчет таймера тоже что-нибудь попробую.

      Вот здесь для разработчиков описано, как пользоваться JS API Ютуба: https://developers.google.com/youtube/js_api_refe...

  7. Ирина 06.03.2013 в 23:55 #

    Здравствуйте, Богдан

    Мне очень нужно сделать так, чтобы кнопка под видео появилась в нужное время.

    Ноя ничего не понимаю в HTML

    Подскажите пожалуйста, куда в Вашем коде надо вставить свое видео и свою кнопку. И как потом все это разместить на своем блоге?

    Заранее огромное спасибо Ирина

  8. Андрей 07.09.2013 в 20:43 #

    Привет!

    А есть возможность чтобы кнопка появлялась только когда значение, например = 2. Число берется из базы данных, когда у человека появляется два приглашенных.

    Заранее спасибо.

    • Богдан 09.09.2013 в 11:15 #

      Привет, Андрей.

      Сделать такую систему возможно, но это зависит от деталей вашего сайта, и конечно, это дополнительная работа на несколько часов.

      Если вам нужна помощь в решении этой задачи, то ознакомьтесь с этой страницей - WP Помощь

  9. Анастасия 25.11.2013 в 15:09 #

    Богдан, здравствуйте.

    Подскажите пожалуйста, можно ли сделать такой скрипт для видео YouTube на сайтах, сделанных в плагине WpPage?

    Если да, то как это настроить?

    Заранее спасибо!

    • Богдан 30.11.2013 в 10:00 #

      Спасибо вам за сообщение, Анастасия. Я вам ответил на почту.

      • Евгения 08.03.2014 в 17:14 #

        Богдан, и мне, пожалуйста, отправьте информацию по поводу работы скрипта на страницах WpPage.

        Заранее огромное спасибо!

  10. Сергей 12.12.2013 в 21:03 #

    Богдан, здравствуйте!
    А можно и мне ответить на почту на такие вопросы:
    Можно ли сделать такой скрипт для видео YouTube на сайтах, сделанных в плагине WpPage?
    Если да, то как это настроить?

  11. Игорь 13.12.2013 в 18:58 #

    Приветствую. Присоединяюсь к вопросу про скрипт для видео YouTube на сайтах, сделанных в плагине WpPage.

  12. Владимир 24.12.2013 в 12:17 #

    Здравствуйте. Меня тоже интересует вопрос как сделать появление кнопки на странице сделанной с помощью wppage!

    Подскажите, как сделать и возможно ли это???

    Заранее, благодарю!

  13. Владимир 09.03.2014 в 00:27 #

    Никак не удается запустить второй вариант скрипта, при этом первый работает, может есть какие особенности? верисия плеера или еще что?

    • Богдан 13.03.2014 в 09:07 #

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

  14. Евгений 14.03.2014 в 13:10 #

    Богдан, привет! 🙂 Пытаюсь встроить второй вариант скрипта на страницу с видео, ничего не выходит. Целевая страница - в ссылке

    Подскажи пожалуйста, что не так?

    • Евгений 14.03.2014 в 15:30 #

      Хе-хе, вопрос решен, помошь не требуется

  15. Лилия 16.03.2014 в 07:03 #

    Здравствуйте!
    Тоже не знаю как настроить скрипт для видео YouTube на странице wppage.
    Подскажите пожалуйста.

    С уважением, Лилия

  16. Максим 18.01.2015 в 14:35 #

    Богдан, спасибо!
    Все работает!

  17. Дмитрий 18.02.2016 в 13:27 #

    Здравствуйте, Богдан. Как можно создать кнопку в HTML переходящую на заданный сайт. Чтобы просто можно было всегда на этой кнопки менять ссылку нужного сайта. За ранее спасибо.

    • Богдан 19.02.2016 в 09:58 #

      Доброго времени суток, Дмитрий. Спасибо за вопрос!

      Смотрите, в примерах кода, в этой инструкции, которую я написал, есть такой фрагмент:

      <a href="http://twog.me/">
      

      Вот в этом фрагменте внутри кавычек меняйте мою ссылку http://twog.me/ на любую вашу.

  18. Алексей 28.06.2016 в 14:11 #

    скажите я так и не понял. А как сделать кнопку если видео с Ютуба. Или куда в скрипт вставить код видео?

  19. Евгений 19.09.2016 в 23:05 #

    Спасибо полезно! Но вопросы есть.
    1) ты сказал про амазон, у них я слышал бесплатно можно, да? Как много там места?
    2) А если задача такая, чтобы появлялся блок див не только на определенной минуте секунде, но и при условии если видео просто включили а затем остановили

  20. Михаил 14.12.2016 в 03:15 #

    Подскажите, действует ли это сейчас, ничего ли не изменилось? Можно это сделать не с Self-hosted плеером, а с облачным?

    • Михаил 14.12.2016 в 03:53 #

      С облачным не получилось, а со встроенным - работает. Плеер устанавливал по данной инструкции - http://rugraphics.ru/forvideo/besplatnyy-jw-player-dlya-sayta. Подключаемые файлы скачивал оттуда же.

      Небольшой совет. Если пользователь будет перелистывать видео, то таймер не сработает. Чтобы этого не происходило, нужно отключить панель управления видео. Делает это команда controls: false. Например, так:

      jwplayer("myElement").setup({
      file: "video.mp4",
      width: 640,
      height: 360,
      autostart: true,
      controls: false,
      });