Автопроигрывание видео YouTube при прокрутке страницы

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

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

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

Как реализовать автозапуск видео YouTube

Поскольку все помешаны на YouTube, давайте рассмотрим пример автопроигрывания роликов с этого видеохостинга. Код не сильно тяжелый (внутри я дам все пояснения), но и не в одну строку. Мы будем использовать функционал API Youtube, а иначе управлять видеоплеером у нас не получится!

По сути, весь этот код включает/выключает проигрывание видеоролика в момент видимости/невидимости определенного элемента на экране.

<!-- div в котором будет проигрываться наш видеоролик -->
<div id="video-placeholder"></div>

<script type="text/javascript">
//соединяемся с API Youtube
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

function checkPosition(){
//функция проверки видимости элемента на jquery
var div_position = $('#video-placeholder').offset();
var div_top = div_position.top;
var div_left = div_position.left;
var div_width = $('#video-placeholder').width();
var div_height = $('#video-placeholder').height();
var top_scroll = $(document).scrollTop();
var left_scroll = $(document).scrollLeft();
var screen_width = $(window).width();
var screen_height = $(window).height()+600;
var see_x1 = left_scroll;
var see_x2 = screen_width + left_scroll;
var see_y1 = top_scroll;
var see_y2 = screen_height + top_scroll;
var div_x1 = div_left;
var div_x2 = div_left + div_height;
var div_y1 = div_top;
var div_y2 = div_top + div_width;
if( div_x1 >= see_x1 && div_x2 <= see_x2 && div_y1 >= see_y1 && div_y2 <= see_y2 ){
//если элемент видим на экране, запускаем видео Youtube
player.playVideo();
}else{
//если не видим, ставим видео на паузу
player.pauseVideo();
}
}

$(document).ready(function(){
//запускаем функцию проверки видимости элемента
$(document).scroll(function(){
checkPosition();
});
$(window).resize(function(){
checkPosition();
});
});

function onYouTubeIframeAPIReady() {
//рисуем видеопроигрыватель Youtube
player = new YT.Player('video-placeholder', {
width: 600, height: 400, //размеры окна видео
playerVars: { 'autoplay': 0, 'controls': 0, 'showinfo': 0, 'rel': 0}, //тонкие настройки видеопроигрывателя
videoId: 'fqesxT90x8g', //здесь id ролика
});}
</script>

Пример реализации автопроигрывания видео

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

Обратите внимание, что выпадая из поля видимости, видео ставится на ПАУЗУ. Это очень удобно. Вернувшись к просмотру (пролистав страницу вверх-вниз), пользователь продолжит просмотр видео, а не начнет его смотреть повторно сначала.


P.S. Отдельное спасибо хорошему парню в сети под ником campusboy за дельные консультации и помощь в реализации этого автопроигрывателя Youtube!

Оцените материал:
Звёзд: 1Звёзд: 2Звёзд: 3Звёзд: 4Звёзд: 5 (8 голоса, рейтинг: 4,63 из 5)
Загрузка...

Вячеслав - типичный интернетчикВячеслав Скоблей (ака files) - типичный интернетчик. Скитаюсь интернетом, пишу на PHP, увлекаюсь созданием веб-сайтов на Wordpress, решаю многочисленные проблемы, которые до появления интернета не существовали...

Специализируюсь на безопасности сайтов: защищаю сайты от атак и взломов, занимаюсь лечением вирусов на сайтах и профилактикой...

Наверняка у Вас есть вопросы, просьбы или пожелания. Не стесняйтесь спросить, я отвечаю всегда быстро...

15 комментарий

  1. says:

    Здравствуйте!
    Скажите пожалуйста как я могу на одном странице сделать несколько видео. Когда сделаю несколько, они конфликтуют и только один видео срабатывает. А остальные даже не показывает.
    Заранее спасибо!

  2. Денис says:

    Добрый день!Скажите,а есть возможность работы этого скрипта после последних изменений в Google Chrome и Safari (недавно они ввели запрет на автозапуск видео со звуком) и если да,то как сделать если несколько видеороликов на странице.
    Нашел вот такой скрипт, но для нескольких видео не могу его сделать, автозапуск работает только на одном видео, при добавлении второго скрипта с другим id видео, первый не срабатывает

    var tag = document.createElement('script');
      tag.src = "https://www.youtube.com/iframe_api";
      var firstScriptTag = document.getElementsByTagName('script')[0];
      firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
        var player;
        function onYouTubeIframeAPIReady() {
            player = new YT.Player('6eNJ670FMeM', {
                events: {
                    'onReady': onPlayerReady
                }
            });
        }
    
        function onPlayerReady() {
            player.playVideo();
            player.mute();
        }
        
  3. Иван says:

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

    А так код зачетный спасибо!

  4. Валентин says:

    На мобильном не работает(

  5. says:

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

    1. Вячеслав Скоблей says:

      Поиграйтесь с цифрой в коде (в сторону увеличения, уменьшения) - var screen_height = $(window).height()+600;

  6. Павел says:

    Подскажите пожалуйста как сделать так чтобы видео работало по центру экрана (Если опускаю чуть ниже, что-бы было по центру, сразу останавливается)

  7. EAR says:

    Доброго времени суток. Я хочу растянуть плеер на весь экран, поэтому в строке width: 600, height: 400 меняю значение на width: 100 + "%", height: 100 + "%", при таких параметрах плеер не реагирует на прокрутку. Какие параметры следует указать в коде, чтобы проигрыватель работал при введенных мною величинах.

    1. Вячеслав Скоблей says:

      Достаточно добавить в стили CSS:

      #video-placeholder {
          width: 100%;
      }
  8. Александр says:

    Вячеслав, спасибо, что отозвались на вопрос, дело в том, что я не очень силен в кодах.
    Стандартное видео с авто воспроизведением помещаю на страницу блога Worpress без проблем таким образом:

    А вот, с кодом для авто запуском при прокрутке, так же просто не получилось. :(
    Поэтому прошу помощи или совета.

    1. Вячеслав Скоблей says:

      Вставьте весь код, что вы видите на странице, в том месте, где должен проигрываться ролик.

      videoId: 'fqesxT90x8g', //здесь id ролика

      Здесь (в конце кода) поставьте id своего видео (он есть в ссылке видеоролика). Вот и все!
      Если вы используете WordPress, вставляйте этот код в режиме ТЕКСТ (не ВИЗУАЛЬНО).

      Если видео все равно не проигрывается автоматом, попробуйте вверху кода еще добавить:

      <script src="https://code.jquery.com/jquery-1.8.3.js"></script>
    2. EAR says:

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

      1. Вячеслав Скоблей says:

        Вы должны поиграться со значением в скрипте (увеличить его для больших размеров видео):

        var screen_height = $(window).height()+600;
  9. Александр says:

    Вячеслав, спасибо за представленную информацию!!!
    Давно искал это решение.
    Если не сложно, поделитесь процессом установки и настройки скрипта.

    Заранее признателен, с уважением Александр.

    1. Вячеслав Скоблей says:

      Александр, Вы не видите кода в статье? Там же все попунктно!

Добавить комментарий для Павел Отменить ответ

Ваш адрес email не будет опубликован.