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 />Обьясните подробнее 
Только зарегистрированные и авторизованные пользователи могут оставлять комментарии.