1 Внедрение мультимедиа Презентация (1)
Оценка 5

1 Внедрение мультимедиа Презентация (1)

Оценка 5
pptx
09.05.2020
1 Внедрение мультимедиа Презентация (1)
1 Внедрение мультимедиа Презентация (1).pptx

Внедрение мультимедиа 10.4.2.4 применять

Внедрение мультимедиа 10.4.2.4 применять

Внедрение мультимедиа

10.4.2.4 применять HTML-теги для вставки мультимедиа объектов на web-страницу

Графика и мультимедиа Графика и мультимедийные данные имеют принципиально другую природу, нежели текст

Графика и мультимедиа Графика и мультимедийные данные имеют принципиально другую природу, нежели текст

Графика и мультимедиа

Графика и мультимедийные данные имеют принципиально другую природу, нежели текст. Из-за этого объединить их в одном файле невозможно.
Разработчики HTML нашли оригинальный выход из положения. Прежде всего, графические изображения и мультимедийные данные хранятся в отдельных файлах. А в HTML-коде Web-страниц с помощью особых тегов прописывают ссылки на эти файлы, фактически — их интернет-адреса. Встретив такой тег-ссылку, Web-обозреватель запрашивает у Web-сервера соответствующий файл с изображением, аудио- или видеороликом и выводит его на Web-страницу в то место, где встретился данный тег.
Графические изображения, аудио- и видеоролики и вообще любые данные, хранящиеся в отдельных от Web-страницы файлах, называются внедренными элементами Web-страниц.

Графика Графика на Web-страницах появилась достаточно давно

Графика Графика на Web-страницах появилась достаточно давно

Графика

Графика на Web-страницах появилась достаточно давно. Предназначенный для этого тег появился еще в версии 3.2 языка HTML, которая вышла в 1997 году.
Форматы интернет-графики
Формат GIF (Graphics Interchange Format, формат обмена графикой) — старожил среди "сетевых" форматов графики. Он был разработан еще в 1987 году и модернизирован в 1989 году. На данный момент он считается устаревшим, но все еще широко распространен. GIF используется для хранения элементов оформления Web-страниц (всяческих линеек, маркеров списков и т. п.) и штриховых изображений.
Формат JPEG (Joint Photographic Experts Group, Объединенная группа экспертов по фотографии) был разработан в 1993 году специально для хранения полутоновых изображений. Для чего активно применяется до сих пор. JPEG не ограничивает количество цветов у изображения, а реализованное в нем сжатие лучше всего подходит для полутоновых изображений.
Формат PNG (Portable Network Graphics, перемещаемая сетевая графика) появился на свет в 1996 году. К достоинствам формата PNG можно отнести возможность хранения как штриховых, так и полутоновых изображений и поддержку полупрозрачности. Недостаток всего один и некритичный — невозможность хранения анимации.

Вставка графических изображений

Вставка графических изображений

Вставка графических изображений

Добавить на Web-страницу графическое изображение позволяет одинарный тег . Web-обозреватель поместит изображение в том месте Web-страницы, в котором встретился тег .
Сила тега — в его атрибутах. Обязательный атрибут тега SRC служит для указания интернет-адреса файла с изображением.
Пример:

Этот тег помещает на Web-страницу изображение, хранящееся в файле image.gif, который находится в той же папке, что и файл самой этой Web-страницы.
Пример:

Данный тег помещает на Web-страницу изображение, хранящееся в файле picture.jpg, который находится в папке images, вложенной в корневую папку Web-сайта.
Пример:
<IMG SRC="http://www.othersite.ru/book12/author.jpg">
А этот тег помещает на Web-страницу изображение, хранящееся в файле с интернет-адресом http://www.othersite.ru/book12/author.jpg, изображение с другого Web-сайта.

Элементы Web-страницы могут быть блочными и встроенными

Элементы Web-страницы могут быть блочными и встроенными

Элементы Web-страницы могут быть блочными и встроенными. Так вот, изображение, помещенное на Web-страницу с помощью тега , — встроенный элемент. Это значит, что он не может "гулять сам по себе", а должен быть частью блочного элемента, например, абзаца.
Из этого следуют два важных вывода.
Во-первых, мы можем вставить графическое изображение прямо в абзац:

Посмотрите картинку —


Во-вторых, если нам понадобится отобразить на Web-странице отдельное, не связанное ни с каким абзацем графическое изображение, нам придется поместить его в специально созданный абзац:

Пример Здесь предполагается, что графический файл, содержимое которого мы будем выводить на

Пример Здесь предполагается, что графический файл, содержимое которого мы будем выводить на

Пример

Здесь предполагается, что графический файл, содержимое которого мы будем выводить на Web-страницу, имеет имя image.gif. Если у вас другое имя файла, соответственно исправьте HTML-код.
Сохраним новую Web-страницу в файле

Практическая работа Дополните фрагменты, сохраните

Практическая работа Дополните фрагменты, сохраните

Практическая работа

Дополните фрагменты, сохраните HTML-файл, посмотрите результат в окне браузера


Этот маяк расположен на берегу моря и служит кораблям для ориентира. Он очень помогает морякам в плохую погоду.




Это небольшая яхта.


Я люблю море, но не умею плавать.





Море, море - мир безбрежный

Мультимедиа Мультимедиа — это, в первую очередь, аудио и видео

Мультимедиа Мультимедиа — это, в первую очередь, аудио и видео

Мультимедиа

Мультимедиа — это, в первую очередь, аудио и видео. Мультимедиа в приложении к Web-дизайну — это аудио- и видеоролики, размещенные на Web-страницах.
Форматов мультимедийных файлов существует не меньше, чем форматов файлов графических. Как и в случае с интернет-графикой, Web-обозреватели поддерживают далеко не все мультимедийные форматы, а только немногие. 
Но Web-обозревателю мало поддерживать только сам формат мультимедийных файлов. Он должен быть "знаком" и с форматом кодирования записанной в нем аудио- и (или) видеоинформации. В мире мультимедиа так — разные файлы одного формата могут хранить информацию, закодированную разными форматами. Более того, аудио- и видеодорожки мультимедийного файла практически всегда кодируются разными форматами.
Практически все форматы кодирования мультимедийных данных поддерживают их сжатие. Благодаря этому размер мультимедийных файлов значительно (иногда на несколько порядков) уменьшается, что благотворно сказывается на скорости их передачи по сети.

Типы MIME По сети передаются самые разные данные:

Типы MIME По сети передаются самые разные данные:

Типы MIME

По сети передаются самые разные данные: Web-страницы, графические изображения, аудио- и видеофайлы, архивы, исполняемые файлы и пр. Эти данные предназначены разным программам. К тому же, с разными данными программа, принявшая их, может поступить по-разному. Так, Web-обозреватель при получении Web-страницы или графического изображения отобразит их на экране, а при получении архива или исполняемого файла — откроет или сохранит его на диске.
Всем передаваемым по сети данным присваивается особое обозначение, однозначно указывающее на их природу, — тип MIME (Multipurpose Internet Mail Extensions, многоцелевые расширения почты Интернета). Тип MIME присваивает данным программа, их отправляющая, например, Web-сервер. А принимающая программа (тот же Web-обозреватель) по типу MIME принятых данных определяет, поддерживает ли она эти данные, и, если поддерживает, что с ними делать.
Свои типы MIME имеют и мультимедийные файлы.

В HTML 5 имеются два элемента для работы с мультимедиа: 1)

В HTML 5 имеются два элемента для работы с мультимедиа: 1)

В HTML 5 имеются два элемента для работы с мультимедиа:
1) Audio
2) Video

Вставка аудио Для вставки на

Вставка аудио Для вставки на

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

Для вставки на Web-страницу видеоролика предназначен парный тег

Сейчас проигрывается мелодия...

 

Файл музыки должен находиться в одной папке с исходным кодом

Тег имеет атрибуты: 1) Атрибут src - указывает путь к файлу для проигрывания

Тег имеет атрибуты: 1) Атрибут src - указывает путь к файлу для проигрывания

 Тег  имеет атрибуты:
1) Атрибут src - указывает путь к файлу для проигрывания.
2) Атрибут autoplay - сообщает браузеру о том, что файл необходимо воспроизвести сразу после загрузки страницы.
3) Атрибут loop - указывает, сколько раз необходимо проиграть файл (разумеется, если пользователь не закроет страницу).

По умолчанию аудиоролик никак не отображается на

По умолчанию аудиоролик никак не отображается на

По умолчанию аудиоролик никак не отображается на Web-странице. Но если в теге

Пример:




Сейчас проигрывается мелодия...





Вставка видеоролика Для вставки на

Вставка видеоролика Для вставки на

Вставка видеоролика

Для вставки на Web-страницу видеоролика предназначен парный тег

Сейчас проигрывается видео...




На данный момент понятно, что любой браузер будет поддерживать формат wav для музыки, а такие форматы как mp3 или wma будут поддерживать далеко не все.
Что касается видео-формата, то здесь ещё всё более непонятно

Атрибуты одинаковы с тегом

Практическая работа Изучите форматы мультимедийных файлов, которые поддерживают большинство браузеров

Практическая работа Изучите форматы мультимедийных файлов, которые поддерживают большинство браузеров

Практическая работа

Изучите форматы мультимедийных файлов, которые поддерживают большинство браузеров
Заполните таблицу соответствующими данными

Наименование

Расширение файла

Описание

Дополнительные возможности тегов и

Дополнительные возможности тегов и

Дополнительные возможности тегов

Набор поддерживаемых мультимедийных форматов у разных Web-обозревателей различается. И может случиться так, что аудио- или видеоролик, который мы поместили на Web-страницу, окажется какой-то Web-обозреватель не отображает. Как быть?
Специально для таких случаев HTML 5 предусматривает возможность указать в одном теге

А если Web-обозреватель вообще не поддерживает теги и ?

А если Web-обозреватель вообще не поддерживает теги и ?

А если Web-обозреватель вообще не поддерживает теги

Практическая работа 3 Рассмотрите фрагмент веб-страницу в окне браузера, напишите html-код для страницы

Практическая работа 3 Рассмотрите фрагмент веб-страницу в окне браузера, напишите html-код для страницы

Практическая работа 3

Рассмотрите фрагмент веб-страницу в окне браузера, напишите html-код для страницы

Ресурсы http://bookhtml.ru/grafika/vstavkaaudio

Ресурсы http://bookhtml.ru/grafika/vstavkaaudio

Ресурсы

http://bookhtml.ru/grafika/vstavkaaudio.html
https://myrusakov.ru/html-5-elementy-multimedia.html

Скачать файл