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

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

Живой пример | Скачать архив

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

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

index.html




<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>DevShack youtube api демо</title>

<link rel="stylesheet" href="style.css" type="text/css" media="all" />
<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"></script>
</head>
<body>
        <div id="wrapper"><!-- Здесь начинается весь контент -->

                <div id="panel">
                        Управление звуком:
                        <a href="javascript:void(0)" onclick="setVideoVolume('0');">Нет</a>
                        <a href="javascript:void(0)" onclick="setVideoVolume('20');">Тихо</a>
                        <a href="javascript:void(0)" onclick="setVideoVolume('60');">Средне</a>
                        <a href="javascript:void(0)" onclick="setVideoVolume('100');">Громко</a>
                </div>

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

        </div><!-- /wrapper -->

        <div id="videoDiv">Видео загружается...</div>

</body>
</html>


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


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

источник
  • +4
  • Guf
  • 01 ноября 2010, 15:37

Комментарии (3)

без флеша

Я уже чуть было не подумал, что совсем без флеша.
google.load("swfobject", "2.1");
А как тут заменит видео?
Это что-ли swfobject.embedSWF(«www.youtube.com/apiplayer?» +
"&enablejsapi=1&playerapiid=player1&hd=1",
                                                "videoDiv", "100%", "100%", "8", null, null, params, atts);<br /><br />Обьясните подробнее 
Только зарегистрированные и авторизованные пользователи могут оставлять комментарии.