Используем видео как фон сайта. Разбираемся в youtube api. Плеер Chromeless

Blog by admin

Здравствуйте.

В этом посте я расскажу как можно вместо обычного фона использовать видео без флеша и html5. Делать мы это будем с помощью youtube api и немного мозгов. Задача у нас простая: поместить ролик под основной контент сайта и вывести кнопки управления видео на специальную панель. По-моему такое решение будет очень круто смотреться на сайтах музыкальных групп etc.

И сразу можете посмотреть пример или скачать его

Использовать мы будем специальный плеер ютуба «Chromeless Player». Он отличается тем, что полностью контролируется с помощью Javascript и не имеет визуального оформления. Примеры можно найти на Google PlayGround.

Итак, создадим файл index.html, script.js и style.css.

index.html

<!DOCTYPE>
/>
DevShack youtube api демо

/>
<script src="http://www.google.com/jsapi" type="text/javascript"></script>
<script type="text/javascript">
 google.load("swfobject", "2.1");
</script>
<script src="script.js" type="text/javascript"></script>

 

 Управление звуком:
 <a href="http://javas&#99;ript:void(0)">Нет</a>
 <a href="http://javas&#99;ript:void(0)">Тихо</a>
 <a href="http://javas&#99;ript:void(0)">Средне</a>
 <a href="http://javas&#99;ript:void(0)">Громко</a>
 

 <h1>Правда выглядит круто?</h1>
 <a href="http://devshack.ru/2010/10/ispolzuem-video-kak-fon-sajta-razbiraemsya-v-youtube-api-pleer-chromeless/">Вернутья к уроку...</a>
  



Видео загружается...

(Предпросмотр хабрредактора почему-то неверно парсил выше написанный код. Надеюсь после публикации код отобразиться как надо.)

Здесь обязательно в head подключен файл с нашем js кодом и файл для работы всего api. Далее идет элемент с id=wrapper. Он будет симулировать основной и в нем и нужно располагать весь основной контент страницы. Далее id=content. В него я вставлю уже непосредственно сам текст. За ним идет панелька c настройками звука (я включил в урок только их т.к. использование их наиболее оправдано. Остальные опции врятли нужны. Так же я уже в код ссылок прописал функции управления звуком в плеере. О них мы будем говорить позже) и div который будет заменяться на плеер.

script.js

Здесь я повырезал некоторые ненужные нам функции. Со всем функционалом можете ознакомиться в справке google youtube api. Далее идет код с подробными комментариями. Информацию по всем функциям можно найти на Справочное руководство по API YouTube для проигрывателя Javascript.

// Функция вызовется при появление ошибки
function onPlayerError(errorCode) {
 alert("Упс. Что-то пошло не так... Код ошибки:" + errorCode);
}

// Allow the user to set the volume from 0-100
function setVideoVolume(volume) {
 if (isNaN(volume) || volume < 0 || volume > 100) {
 alert("Упс. Что-то пошло не так...");
 }
 else if (ytplayer) {
 ytplayer.setVolume(volume);
 }
}

// Начать проигрывать ролик
function playVideo() {
 if (ytplayer) {
 ytplayer.playVideo();
 }
}

// По окончанию ролика будет вызвана эта функция. Она запустит ролик повторно.
function StateChange() {
 if (ytplayer) {
 if (ytplayer.getPlayerState() == 0) {
 ytplayer.playVideo()
 }
 }
}

// Эта функция автоматическив вызывается при загрузки плеера
function onYouTubePlayerReady(playerId) {
 ytplayer = document.getElementById("ytPlayer");
 // В случаи ошибки вызывается функция
 ytplayer.addEventListener("onError", "onPlayerError");
 ytplayer.addEventListener("onStateChange", "StateChange");
 // Загрузка видео в плеер. Может использоваться отдельно.
 ytplayer.cueVideoById("mVFeHv4oxJc");
 // Запуск видео сразу после загрузки
 ytplayer.playVideo()
 // Сразу ставим громкость на 20 из 100
 setVideoVolume('20')
}

// The "main method" of this sample. Called when someone clicks "Run".
function loadPlayer() {
 // Lets Flash from another domain call Javascript
 var params = {
 allowscriptAccess: "always",
 wmode: "opaque"
 };
 // Ставим ИД для embed
 var atts = {
 id: "ytPlayer"
 };
 // Вся магия происходит с помощью SWFObject (http://code.google.com/p/swfobject/)
 // Сюда можете вписать ваши параметры для видео
 swfobject.embedSWF("http://www.youtube.com/apiplayer?" +
 "&enablejsapi=1&playerapiid=player1&hd=1",
 "videoDiv", "100%", "100%", "8", null, null, params, atts);
}

// Загружаем видео.
function _run() {
 loadPlayer();
}
google.setOnLoadCallback(_run);

Итак, здесь функция ytplayer.cueVideoById(«mVFeHv4oxJc») задает какой ролик воспроизводить. Id ролика берется из его ссылки на ютубе. В swfobject.embedSWF я приписал к параметрам видео hd=1. Это значит, что если есть видео в HD, то будет воспроизводиться именно оно. Так же как раз параметр wmode: «opaque» и позволит нашему ролику быть на фоне страницы. Остальное вам врятли придется менять и я оставляю это без подробных объяснений. Да кстати, если вы не хотите чтобы все видели всплывающее окно в случаи ошибки, просто удали код alert(…).

style.css

Теперь настроем внешний вид страницы.

* {
 padding: 0;
 margin: 0;
 font-family: Tahoma, Geneva, sans-serif;
}
/* Этот код лучше не редактировать */
body {
 width: 100%;
 height: 100%;
 background: black;
}
#ytPlayer {
 position: fixed;
 z-index: 0;
}
#wrapper {
 position: absolute;
 left: 0;
 top: 0;
 z-index: 1;
 width: 100%;
 height: 100%;
 overflow: auto;

}
/* Далее уже можете сами настраивать все как хотите */

#panel {
 background: rgba(0, 0, 0, .7);
 -moz-border-radius: 10px;
 -webkit-border-radius: 10px;
 border-radius: 10px;
 padding: 0 16px;
 line-height: 32px;
 color: #999;
 font-size:12px;
 width: 600px;
 margin: 20px auto;
 text-align:right
}
 #panel a {
 color: #f05;
 text-decoration: none;
 }
 #panel a:hover {
 text-decoration: underline;
 }
#content {
 width: 600px;
 margin: 20px auto;
}
 #content h1 {
 background: yellow;
 display: inline-block;
 font-weight: normal;
 text-transform:uppercase;
 margin-top:200px;
 font-size: 30px;
 line-height: 42px;
 padding: 2px 10px;
 }
 #content a {
 color: #f05;
 font-size: 24px;
 line-height: 36px;
 padding: 2px 10px;
 text-decoration: none;
 background: black;
 display: inline-block;
 }

Вроде выглядит достаточно неплохо. Во всех последних браузерах работает отлично. Если что, скролл появляется как обычно и прокрутка осуществляется так же как и без видео.

Чтобы навигация по сайту была без перезагрузок видео, используйте Ajax.

Посмотреть на результат или скачать его.