Обучаемся.com

Руководство по компьютеру, работа с Windows, разработка и продвижение сайтов…

Автор

Внешние объекты в html, Занятие 10

Сегодня мы поговорим с вами о возможности вставлять в html документ внешние элементы такие, как флеш, аудио и видео, а также научимся задавать нашему браузеру favicon, это такое маленькое изображение рядом с title во вкладке браузера.

Вставка флеш элемента в html

Для вставки внешних элементов существует парный тег object, он говорит браузеру, вот в этом месте будет такой-то документ с такими-то атрибутами и значениями.

<object type=“application/x-shockwave-flash”
data=“film.swf”
width=“300” height=“200”>
<param name=“quality” value=“high” />
<param name=“scale” value=“exactfit” />
</object>

Это простой пример вставки флеш ролика, но вы заметили много непонятных вам тегов и атрибутов, давайте обо всем по порядку.

  • Type — указывает собственно тип документа встраиваемого в документ
  • Data — Собственно путь к документу включая его имя
  • Param — некие параметры присущи этому элементу

Но так было ранее и так есть и сейчас за исключением только одного момента. В спецификации html 5 появится и уже он есть и работает новый вид использования возможности вставлять в документ внешние элементы, ну и пример:

<embed type=“application/x-shockwave-flash”
src=“film.swf”
width=“300” height=“200”
pluginspage=“http://adobe.com/...” />

Скажу сразу, элемент одиночный, то есть закрывающего тега нет. Также уже нет параметров, которые были в object, но доступны ширина с высотой, а также указание на плагин самого проигрователя.

Попробуйте на практике подключить себе на страницу флеш файл и посмотреть на деле как это работает. Взять файл с расширением swf можно на любом сайте с видеороликами, они все идут в формате swf. Просто укажите путь абсолютный на тот сайт, где вы подсмотрели ролик.

Вставка аудио в html5

В спецификации html5 появились замечательные элементы вставки аудио и видео и про первый мы сейчас с вами и поговорим. Выглядит данный элемент вот так и собственно вся конструкция подключения и настройки:

<audio src=“music.mp3” controls></audio>

Видим, что тег парный и имеет обязательный атрибут src, который указывает путь к нашему аудио файлу. Хочу обратить ваше внимание на такие элементы, вот мы указали mp3 тип файла, а что если мы будем использовать файл, который только воспроизводится на MAC, что делать остальным пользователям? Вот здесь на помощь приходит еще один элемент source, который находится в самом  audio.

<audio autoplay loop preload=“auto”>
<source src=“music.mp3” type=“audio/mpeg”/>
<source src=“music.ogg” type=“audio/ogg”/>
</audio>

В примере указаны да совершенно одинаковые аудио файла, только имеющие разные типы и кодировку. При просмотре браузером нашего audio, он обратит внимание на оба, но проиграет тот, который он умеет воспроизводить. Теперь пару слов об атрибутах поддерживаемым элементом audio:

  • autoplay — Звук начинает играть сразу после загрузки страницы.
  • controls — Добавляет панель управления к аудиофайлу.
  • loop — Повторяет воспроизведение звука с начала после его завершения.
  • preload — Используется для загрузки файла вместе с загрузкой веб-страницы.
  • src — Указывает путь к воспроизводимому файлу.

Управление воспроизведением аудио различается между браузерами по своему виду, но основные элементы совпадают. Это кнопка воспроизведения/паузы, длина трека, прошедшее и суммарное время звучания, а также уровень громкости.

Вставка видео в html5

Здесь абсолютно все аналогично с предыдущим примером в одном только отличие, а именно элемент video.

<video width=“300” height=“200” autoplay>
<source src=“film.mp4” type=“video/mpeg”/>
<source src=“film.ogv” type=“video/ogg”/>
<p>Неизвестный формат</p>
</video>

Следует отметить, что type указывает на кодировку видео ролика. Также есть возможность задать для видео элемента ширину и высоту. Вы заметили после двух sourse указан параграф с неким посланием для юзера у которого браузер не смог открыть ролик. Так вот не факт, что оно сработает, все зависит от браузера пользователя.

Вставка favicon на ваш сайт

Чтобы вам было понятно о чем мы сейчас говорим я покажу несколько скриншотов сделанных с окна браузера.Фавикон на сайте

Это такое маленькое изображение (16х16 px), которое находится во вкладке браузера перед вашим title. У всех этих иконок есть одно имя и тип изображения favicon.ico, данный тип поддерживает прозрачность, создать можно как в графическом редакторе, скачать готовые с интернет и сделать самому с любого изображения с помощью специальных онлайн сервисов. Чтобы эта иконка начала отображаться в окне браузера, нужно ее загружать в корень сайта, то есть к вашему index.html.

Применение библиотеки jQuery на практике

Вторая часть нашего десятого занятия будет посвящена понимаю работы с jQuery. Мы на простом примере скачаем и подключим библиотеку к нашему сайту и попробуем ее применить на самых простых и банальных примерах.

Итак посещаем сайт с jQuery и качаем библиотеку себе на компьютер. Создаем html каркас страницы и в нем в служебных тегах head подключаем нашу готовую библиотеку.

<head>
		<meta charset="utf-8">
		<title>Использование jQuery-UI</title>
		<script type="text/javascript" src="jquery.js"></script>

Я для удобства файл переименовал… Теперь попробуем применить ее на простых примерах, для этого создаем три div в нашем документе и задаем им разные id. После них создадим три кнопки (занятие по формам), эти кнопки будут влиять на наши дивы посредством javascript. Ну и на последок нужно задать стиль для наших блоков:

<style type="text/css">
		#k1, #k2, #k3{
			width: 80px;
			height: 100px;
			float: left;
			background: red;
			margin: 10px;
			color: green;
			display: none;
		}
		</style>

Вы заметили, что я использую встроенный метод применения css в документе, а также перечислил все id через запятую. Комментировать свойства я не стану, вы уже должны их знать до этого момента.

Если вы сохраните сейчас ваш документ, то кроме кнопок и заголовка ничего не будет, при этом сами кнопки никоим образом не реагируют на нажатие. Так и должно быть, библиотека сама по себе еще ничего не делает, ей нужно задавать какие-то указания. Давайте напишем небольшой код на js, где будут задаваться действия кнопкам при нажатии.

<script type="text/javascript">
			function addEffect1(){
				$("#k1:hidden").show();
			}
			function addEffect2(){
				$("#k2:hidden").slideDown("slow");
			}
			function addEffect3(){
				$("#k3:hidden").show().animate( {
					fontSize:"40px" } , 4000 );
			}
		</script>

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

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Использование jQuery-UI</title>
		<script type="text/javascript" src="jquery.js"></script>
		<style type="text/css">
		#k1, #k2, #k3{
			width: 80px;
			height: 100px;
			float: left;
			background: red;
			margin: 10px;
			color: green;
			display: none;
		}
		</style>

		<script type="text/javascript">
			function addEffect1(){
				$("#k1:hidden").show();
			}
			function addEffect2(){
				$("#k2:hidden").slideDown("slow");
			}
			function addEffect3(){
				$("#k3:hidden").show().animate( {
					fontSize:"40px" } , 4000 );
			}
		</script>
	</head>
	<body>
		<h2>Эффекты jQuery</h2>
		<div id="k1">1</div>
		<div id="k2">2</div>
		<div id="k3">3</div><br>
		<button onclick="addEffect1()">Эффект show</button>
		<button onclick="addEffect2()">Эффект slideShow</button>
		<button onclick="addEffect3()">Эффект animate</button><br>
		<a href="http://jquery.com/download/">jquery.com</a>
	</body>
</html>

Скопируйте его себе и сохранив посмотрите в браузере. На последок немного пояснений, как же работает библиотека и что она делает. В элементе script указаны функции, которые будут срабатывать при нажатии на кнопки.

Что же делают эти функции?

Функция addEffect1() видит $ (знак доллара) и понимает, что это jQuery, затем она видит
#k1:hidden«) и понимает, что ей нужно найти элемент с id=»k1″, обладающий свойством hidden (невидимый).
Далее она видит .show() и понимает, что найденный элемент надо сделать видимым.

Функция addEffect2() видит $ (знак доллара) и понимает, что это jQuery, затем она видит
#k2:hidden«) и понимает, что ей нужно найти элемент с id=»k2″, обладающий свойством hidden (невидимый).
Далее она видит .slideDown(«slow») и понимает, что найденный элемент надо медленно («slow»)
отобразить сверху-вниз (slideDown).

Функция addEffect3() видит $ (знак доллара) и понимает, что это jQuery, затем она видит
#k3:hidden«) и понимает, что ей нужно найти элемент с id=»k3″, обладающий свойством hidden (невидимый).
Далее она видит .show() и понимает, что найденный элемент надо сделать видимым. Затем она видит
.animate( {fontSize:»40px«} , 4000 ) и понимает, что размер шрифта нужно за 4 секунды (4000) увеличить
до 40 пикселей (fontSize:»40px»)

На этом все, до следующих встреч.

← Предыдущее зянятиеСледующее занятие →

One Response to Внешние объекты в html, Занятие 10

  1. land_driver says:

    Понятно, что, например, видео, не будешь хранить у себя на хостинге — он моментально «съест» все место. А когда его берешь, например, с Ютьюба, так там всегда есть код для вставки на блог. Аналогично и с фотографиями

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *