Видео оживляет Ваш сайт, улучшает поведенческие факторы. Но одно дело, когда видео иллюстрирует статью и совсем другое дело, если Вы хотите сделать видео-информер, чтобы встроить в шаблон своего сайта. В последнем случае, поведенческие факторы (ПФ) наоборот будут ухудшаться. Дело в том, что видеть заставку одного и того же видео при перемещении по сайту пользователю будет неприятно лицезреть. Что делать? Правильно, реализовать возможность выводить видео рандомно (случайным образом).
Способ 1 на PHP
Можно сделать массив из готовых кодов видео Youtube, поместить их в обычных текстовый файл (каждый код в отдельную строку), пример:
<iframe width="560" height="315" src="https://www.youtube.com/embed/Q6IJR1S7I7E" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe> <iframe width="560" height="315" src="https://www.youtube.com/embed/b-2g1eQzkEU" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe> ...
И извлечь их этого массива случайную строчку, разместив на своем сайте (в виджете/сайдбаре) такой PHP код:
<?php $textfile = "http://ваш.сайт/video.txt"; if ($quotes = @file("$textfile")) { $quote = rand(0, sizeof($quotes)-1); echo $quotes[$quote]; }else{ echo ("Нет контента"); } ?>
Данный код реализован по стопам статьи "Создаем информер с случайными данными".
Все было бы хорошо, но такой код недружелюбен со статическим кешированием, которое очень любят включать вебмастера в погоне за высокими показателями "PageSpeed Insights". Если на сайте есть кеш, то такой информер не получится динамическим (обновление страницы в браузере не сгенерирует случайное видео)!
Способ 2 на JavaScript
JavaScript работает на стороне клиента, то есть в браузере пользователя. А это значит, что никакой кеш сайта ему не страшен. Это идеальный сценарий для написания динамичного информера - случайного видео.
Состоит такой код из 3-е составляющих:
- Массив видеофайлов (в формате id видео с сайта Youtube);
- Функции получения случайного числа;
- Отрисовки iframe (полноценного кода плеера Youtube);
На практике это выглядит следующим образом:
<script>var arr = ["bseQCN2OYjU", "nH0jHmQru78", "pXu1Slvg1gg", "SF4GHiOQ4SE", "PW74tkGAeLM", "YwQ0aVJD45Y", "GL27138WU08", "zMHe3YGJAaU", "NMFjFptPdCU", "zktDidzrXY8", "5sGT82Iq-3w", "LC4INwaXxJ8", "bxthyHwTpXU", "jrg4yP5YWgw", "JEa08wRibLk", "ezf1_AvbNXA", "y-a1eJKvxG8", "FKn0TXYJPJQ", "paNv1ZjpRco", "l0bCcTmJsyU", "qwyX1dcEBk0", "--gPDF2_W10", "Q6IJR1S7I7E", "GC10gUr-wTw", "5XpTSshvWxA", "nLjGG0tZh2o", "_wFR-Dg5Swk"]; var rand = Math.floor(Math.random() * arr.length); document.write("<iframe seamless width=\"1280\" height=\"720\" src=\"//www.youtube.com/embed/"+arr[rand]+"?wmode=opaque&hd=1&autoplay=0&showinfo=1&controls=2&rel=0\" allowfullscreen></iframe>"); </script>
Такой код выводит в браузере пользователя случайное видео (из предложенного массива) с Youtube. Атрибут seamless в iframe означает, что содержимое фрейма будет отображаться так, словно оно является частью документа. А установленная ширина в width=1280 означает, что видео аккуратно заполнит отведенную ему область экрана.
Интересное решение, но почему нет автоматического включения проигрывания как происходит при переходе на ютубовскую страницу с видео? У меня полуился черный квадрат с кнопкой запуска и название клипа. Можно сделать что бы показывалась заставка клипа? Пробовал на тестовой странице.
прикольная фича)