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

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

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

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


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

index.html

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

/>






Управление звуком:
Нет
Тихо
Средне
Громко

Правда выглядит круто?

Вернутья к уроку...




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



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

Здесь обязательно в 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.

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