Поиск

Полнотекстовый поиск:
Где искать:
везде
только в названии
только в тексте
Выводить:
описание
слова в тексте
только заголовок

Рекомендуем ознакомиться

'Литература'
Во-первых, почему я выбрала именно эту тему. Хотелось закончить три года исследовательской работы по символизму именно емким, полным, практическим ис...полностью>>
'Статья'
Целями настоящего Федерального закона являются развитие рынков товаров, работ и услуг на основе соблюдения принципов добросовестной конкуренции, обесп...полностью>>
'Программа'
Раздел 1. Организация туристской деятельности в МО МР «Боровский район»: разработка и утверждение правил туристского обслуживания на территории МО МР...полностью>>
'Публичный отчет'
Приложение 2. Соответствие основной образовательной программы подготовки дипломированного специалиста требованиям ГОС ВПО по специальности 030601.65 ...полностью>>

Лекция №9 Тема «Мультимедиа на Web-страницах»

Главная > Лекция
Сохрани ссылку в одной из сетей:

Лекция № 9

Тема «Мультимедиа на Web-страницах»

Вопросы темы:

  1. Способы вставки видео и звука на web-страницах

  2. Технологии Flash

  3. Новые медиатехнологии VRML

  1. Способы вставки видео и звука на web-страницах

1 способ:

Поместить на странице ссылку на соответствующий звуковой либо ви­деофайл .

<a href = адрес_файла > — для вставки звуковых и видеофайлов;

Тогда пользователь, щелкнув мышью на этой ссылке и выбрав радиокнопку Открыть файл в появившемся окне запроса, сможет загрузить соответствующее Windows-приложение (например, «Универсальный проигрыватель») и прослушать или просмотреть файл. Необходимость общения с этим диалоговым окном составляет главный недостаток данного способа.

При решении вставить звук и/или видео в HTML-документ следует учитывать, что соответствующие файлы имеют довольно большой объем. Наиболее популярными в веб сейчас являются файлы звуковых форматов MP3, WMA, AIFF, AU, RealAudio (c расширением ra и ram), MP4, MIDI и видеоформатов MPEG, MOV. Звуковой формат WAV и видеоформат AVI в Интернете используются довольно редко.

Для операционной системы Windows стандартными звуковыми файлами являются WMA и WAV, для Macintosh — AIFF. Общепринятым видеоформатом для Windows, Macintosh и UNIX является MPEG. Формат QuickTime (MOV) также широко распространен и может использоваться Windows и Macintosh. При выборе других форматов желательно предупреждать об этом пользователей.

2 способ:

Добавление фонового звука.

<bgsound src = адрес_файла > — для вставки фонового звука;

Тег <bgsound> позволяет указать звуковой файл формата WMA, AU, MIDI или WAV, который проигрывается при загрузке страницы. При этом на экран не выводится панель управления воспроизведением.

Тег <bgsound> имеет следующие атрибуты:

  • src — URL-адрес звукового файла;

  • loop — определяет, сколько раз звуковой файл должен быть воспроизведен; принимает значения:

    • -1 или infinite —воспроизведение в течении всего времени показа документа;

    • число — количество воспроизведений

  • balance — число, определяющее баланс для стереозвука;

  • volume — число, определяющее громкость звучания.

Пример:

<bgsound src="ib_logfile0" loop="3">

3 способ:

Представляет собой расширение тэга <IMG>, дополненное параметром DYNSRC, указывающим местоположение файла цифрового видео:

Атрибуты, определяющие воспроизведение видеофайлов, таковы:

  • dynsrc — URL-адрес видеофайла формата AVI(расширение avi);

  • loop — определяет, сколько раз звуковой файл должен быть воспроизведен; принимает значения:

    • -1 или infinite —воспроизведение в течении всего времени показа документа;

    • число — количество воспроизведений

  • start = mouseover —выводится изображение первого кадра, а воспроизведение начинается только при наведении на него указателя мыши и продолжается далее заданное атрибутом loop количество раз.

Пример:

<img dynsrc = "myvideo.avi" loop = 2 start = mouseover>

Можно также использовать и другие атрибуты тега <img>, например, align, border, hspase и vspace.

Для воспроизведения звуковых и видео файлов можно использовать тег ссылки <a>, указав в качестве значения атрибута href URL-адрес файла. При этом файл будет воспроизводиться в окне приложения(проигрывателя), которое ассоциировано с данным типом файла и установлено на компьютере пользователя. Это может быть, например,Windows Media Player, панель Медиа (в Internet Explorer), Winamp, QuickTime Player или RealPlayer G2.

URL-адрес файла RealAudio имеет вид:

pnp://адрес_файла.

Технология RealAudio обеспечивает передачу звука и видео практически в режиме реального времени и позволяет устраивать аудио- и видеоконференции. Звуковые файла RealAudio имеют расширение ra. Кроме того, могут использоваться метафайлы с расширением ram. Это обычные текстовые файлы, содержащие полные URL-адреса файлов с расширением ra.

Пример:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">

<title>Вставка звука</title>

</head>

<body>

Сергей Трофимов

<a href="S._Trofimov-Snegiri.mp3">Снегири</a>

</body>

</html>

4 способ:

Использование тегов <embed> и <object>. Внедрение объектов на web-страницу

Тег <embed> позволяет встроить в веб-страницу документы различных типов для просмотра их соответствующим приложением.

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

Тег <embed> имеет следующие атрибуты, связанные с воспроизведением звука и видео:

  • src — URL-адрес файла;

  • align — горизонтальное выравнивание панели, принимает следующие значения:

    • absbottom — выравнивание нижней границы панели по нижней границе текущей строки;

    • absmiddle — выравнивание середины панели по середине текущей строки;

    • baseline — выравнивание нижней границы панели по базовой линии текущей строки;

    • bottom — то же, что и baseline;

    • top — верхняя граница панели выравнивается по самому высокому элементу текущей строки;

    • texttop — верхняя граница панели выравнивается по самому высокому текстовому элементу текущей строки;

    • left — панель располагается у левого края окна, текст и другие элементы обтекают его справа;

    • right — панель располагается у правого края окна, текст и другие элементы обтекают его слева;

  • alt — альтернативный текст;

  • hight — высота в пикселах или процентах;

  • width — ширина в пикселах или процентах;

  • hspace — боковые отступы в пикселах;

  • vspace — верхний и нижний отступы в пикселах;

  • name — имя (идентификатор) встроенного элемента.

Кроме перечисленных, тег <embed> имеет еще атрибуты code и codebase, имеющие такой же смысл, что и для тега <object>.

Рассмотрим пример, где с помощью тега <embed> встраиваются три звуковых и один видеофайл. Размеры панелей воспроизведения можно задать с помощью атрибутов width и heiht.

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">

<title>Звук и видео</title>

</head>

<body>

<p>Сергей Трофимов

<p>Снегири <embed src="S._Trofimov-Snegiri.mp3">

<p>Порутчик <embed src="Trofim-01_poruchik.mp3" width="200" height="150">

<p>Пролог <embed src="Trofim-01_prolog.mp3">

<p>Видео <embed src="../../../images/avto1.swf" width="350" height="250">

</body>

</html>

Тег object

Тег <object> позволяет вставлять в HTML-документы графические изображения, HTML-документы, элементы ActiveX и апплеты.

Тег <object> является контейнерным и обладает множеством атрибутов:

  • accesskey —определяет клавишу быстрого доступа к объекту, встроенному с помощью тега <object>. Значением атрибута является строка, содержащая букву или цифру. Если нажать указанную клавишу в сочетании с клавишей <Alt>, то объект получит фокус;

  • align — выравнивание; возможны следующие значения:

      • absbottom — выравниванивает нижнюю границу объекта по подстрочной линии символов окружающего текста;

      • absmiddle — выравнивает середину объекта по центральной линии между top и absbottom окружающего текста;

      • baseline — выравнивает нижнюю границу объекта по базовой линии окружающего текста;

      • bottom — то же, что и baseline (только в Internet Explorer);

      • left —выравнивает объект по левому краю элемента-контейнера;

      • middle — выравнивает воображаемую центральную линию окружающего текста по воображаемой центральной линии объекта;

      • right —выравнивает объект по правому краю элемента-контейнера;

      • texttop —выравнивает верхнюю границу объекта по верхней границе окружающего текста;

      • top — выравнивает верхнюю границу объекта по верхней границе окружающего текста.

  • classid — уникальный регистрационный идентификатор встраиваемого компонента;

  • code — имя файла Java(класс апплета), если он является источником.

  • codebase — базовый URL-адрес, по которому веб-браузер может взять файл (обычно упакованный) компонента, чтобы установить его при отсутствии на компьютере пользователя. Вслед за URL-адресом указывается версия компонента в виде строки: #Version = M1, M2, m1, m2. Где M1, M2 — максимальные, а m1, m2 — минимальные мажорный и минорный номера версии, доступные на сервере. Встречая в HTML-документе ссылку на компонент, веб-браузер проверяет его наличие на компьютере пользователя. Если компонента нет, то производится его загрузка и установка, с разрешения пользователя или без него в зависимости от настроек безопастности веб-браузера. Если на компьютере пользователя установлена более новая версия чем указана атрибутом codebase, то загрузка компонента не производится.

  • codetype — MIME-тип файлов, указанных атрибутом codebase. Например, для элементов управления ActiveX значением этого атрибута (если он указан) является application/x-oleobject;

  • data — URL-адрес файла данных (для объектов, работающих с данными);

    • datafld — имя столбца табличных данных;

    • datasrc — "#идентификатор_источника_данных";

  • disabled — если указан то объект не доступен;

  • hight — высота в пикселах визуального образа компонента (если такой имеется);

  • width — ширина в пикселах визуального образа компонента (если такой имеется);

  • hspace — расстояние по горизонтали между объектом и соседними элементами;

  • vspace — расстояние по вертикали между объектом и соседними элементами;

  • id — идентификатор объекта как элемента HTML-документа, с помощью которого обеспечивается доступ к свойствам объекта из сценария;

  • name — идентификатор объекта элемента формы; используется в случае, когда объект находится в контейнере <form>, а его данные требуется передать на сервер щелчком кнопки мыши типа submit;

  • type — MIME-тип файлов, указанных атрибутом data;

  • tabindex — целое число, определяющее порядок перехода к элементу с помощью клавиши <Tab>;

  • lang —определяет тип языка для событий контейнера, например script/javascript;

    • language —определяет имя языка для событий контейнера. Возможные значения: javascript, jscript, vbscript, vbs.

Кроме перечисленных выше, тег <object> имеет атрибуты class и style (для задания параметров каскадной таблицы стилей), title (для задания текста всплывающей подсказки) и атрибуты-события (для связи с их обработчиками).

Встраиваемый компонент может иметь параметры, которые задаются с помощью тегов <param>, вставляемых в контейнер <object>. Для каждого параметра требуется отдельный тег <param>, имеющий следующие атрибуты:

  • name — имя параметра;

  • value — значение параметра;

  • datafld — имя столбца табличных данных;

  • dataformatas — формат данных;

  • datasrc —"#идентификатор _источника_данных"

Кроме элементов ActiveX и апплетов, с помощью тега <object> можно вставлять в веб-страницы графические изображения из файлов формата GIF и JPEG, звуковые файлы, а также HTML-документы. Для этого необходимо использовать атрибуты data и type. Значением атрибута data является URL-адрес вставляемого графического или html-файла. Значением атрибута type является тип данных в этом файле: image/jpeg или image/gif для графического и text/html — для html-файла.

Вставляемые объекты указанных выше типов отображаются в отдельных окнах, подобных плавающим фреймам и снабженных при необходимости полосами прокрутки. Размеры этих окон устанавливаются с помощью атрибутов width и height. В отличие от тега <img>, специальнопредназначенного для вставки графики, эти атрибуты не влияют на размеры графического изображения (не маштабируют его). Они задают размеры только окна отображения графики.

Для корректного отображения в окне веб-браузера графики и HTML-документов, вставляемых посредством тега <object>, последние либо должны находится в контейнере <body>, либо исходный HTML-документ должен содержать, кроме тега <object>, еще какой-нибудь элемент, способный принять фокус (например, текст).

  1. Технологии Flash

Flash-документ (мультфильм, ролик, клип) может включать разнородное содержимое: текст, растровую и векторную статическую и анимационную графику, звук, видео и элементы пользовательского интерфейса. Можно создать отдельную страницу или даже целый сайт, используя технологию Flash. Flash-документы разрабатываются с помощью пакета Macromedia Flash, выходные файлы которого имеют расширение swf. Просмотр swf-файлов производится с помощью специального Flash-проигрывателя. Чтобы просматривать swf-файл в окне браузера MS Internet Explorer, требуется элемент управления ActiveX, реализующий функции Flash-проигрывателя, ссылка на который вставляется в HTML-документ с помощью тегов <object> и <param>:

<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0"<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0"

id = "myflash">

<param name = "movie" value = "URL-адрес swf-файла ">

</object>

Здесь атрибут classid принимает в качестве значения идентификатор объекта, соответствующего Flash-проигрывателю.

Атрибут codebase содержит URL-адрес исходных файлов Flash-проигрывателя версии 9.0 на случай если он не установлен на компьютере пользователя.

Тег <param> служит для указания URL-адреса swf-файла, содержащего Flash-документ, который должен быть воспроизведен Flash-проигрывателем.

Атрибут id указан только для обеспечения возможности доступа к объекту с помощью сценария.

Чтобы Flash-проигрыватель был вставлен в веб-страницу браузерами, не воспринимающими теги <object> и <param> (например, Nestcape Navigator), внутри внутри контейнера <object> используется тег <embed>:

<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0"

<param name = "movie" value = "URL-адрес swf-файла ">

<embed src = "URL-адрес swf-файла " name = "myflash"

type = application/x-shockwave-flash"

pluginspage = "/go/getflashplayer">

</object>

В пакете Macromedia Flash имеются средства автоматизации создания HTML-документа, содержащего заданный Flash-документ, которые позволяют легко установить все необходимые параметры.

Пример размещения Flash проигрывателя на веб-странице.

<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0" width="550" height="400" id="banner" align="middle">

<param name="movie" value="../../../images/avto1.swf">

<param name="play" value="true">

<param name="loop" value="true">

<param name="quality" value= "high">

</object>

  1. Новые медиатехнологии VRML

В последнее время общая направленность Интернета, и со­ответственно, Web-дизайна все в большей степени ориентиру­ется на пользователя — «некомпьютерщика», для которого Всемирная сеть представляет собой лишь еще одно «средство массовой информации». Поэтому при создании Web-сайтов се­годня все большее внимание уделяется зрелишности, привле­кательности размещаемой на них информации, хотя и жертвуя при этом скоростью передачи информации (время загрузки страниц при использовании подобных технологий, несмотря на все ухищрения по как можно большей упаковке информации, все же возрастает довольно значительно, так что просмотр та­ких сайтов при доступе по телефонной линии может даже ока­заться невозможным, если только представленная на них ин­формация не будет продублирована разработчиками сайта в текстовом виде). Кроме того, строго говоря, и VRML, и Flash, и многие другие медиатехнологии почти никак не связаны с языком HTML: как правило, их реализация заключается в создании при помощи специальных программных пакетов хра­нящихся в отдельных файлах (подобно иллюстрациям или цифровому видео) «медиароликов» специфического формата, которые затем «подключаются» в HTML-документ при помо­щи тэга <EMBED> (либо тэга <А HREF. . .>); соответственно, для их просмотра в окне браузера как правило требуется доустановить на свой компьютер дополнительный «плеер» («плагин»).

Язык VRML (Virtual Reality Modelling Language) представ­ляет собой, по сути, набор текстовых команд, позволяющих описать вид некоего трехмерного объекта — от простой геомет­рической фигуры до, скажем, здания, которое рассматривается как совокупность «элементарных» объектов; в этом VRML по­добен набору графических операторов языка программирова­ния, например, BASIC этом такое описание содержит в себе координаты «опорных точек» для контуров описываемых объектов, указания на некие стандартные (загружаемые анало­гично обычным графическим иллюстрациям) фактуры закрас­ки поверхностей, а в более «продвинутых» вариантах — и ин­формацию о движении этих объектов в пространстве (т. е. VRML-мир можно «оживить», фактически создавая трехмер­ные анимации), а также гиперссылки, роль которых выпол­няют назначенные разработчиком те или иные объекты и их отдельные участки. Пользователь же рассматривает создан­ные объекты — как снаружи, так и изнутри (например, для интерьеров) — при помощи «виртуальной телекамеры»: компьютер вычерчивает на экране «псевдотрехмерное» изображение (проекцию VRML-объектов на плоскость экрана), со­ответствующую «взгляду» на созданные объекты в заданном направлении и с заданной точки. При этом пользователь мо­жет либо сам перемещать «виртуальную телекамеру» при по­мощи клавиатуры и/или мыши, произвольно «гуляя» по вир­туальному миру, либо траектория движения «виртуальной телекамеры» (и направления «взгляда» в каждой ее точке) за­дается разработчиком, так что в результате получается своеобразный «видеоролик».

Описание объекта в виде текстового файла с типовым расши­рением wrl «вычленяется» браузером и передается специальной программе — «плееру», которая уже интерпретирует содержащиеся в файле команды и вычерчивает на экране требуемое изображение (в том числе в отдельном окне с соответствующим интерфейсом). Среди VRML-плееров можно назвать, например, Live3D Cosmo Player, который можно переписать на сайте

.

Контрольные вопросы:

  1. Какие способы вставки видео и звука на Web-страницу вам известны?

  2. Каким тегом вставить на Web-страницу фоновый звук? Назовите параметры данного тега.

  3. Как внедрить мультимедиа объекты на web-страницу?

  4. Для каких целей используется тег object и каковы параметры данного тега?

  5. Как вставить на web-страницу flash анимированные ролики?

  6. В чем заключается медиатехнология VRML?

  7. Какие программы необходимы для воспроизведения VRML-файлов?



Скачать документ

Похожие документы:

  1. Лекция 1 "введение в дисциплину"

    Лекция
    Основная цель курса - дать студентам знания в области современных технологий переработки деловой информации с помощью персональных компьютеров, научить приемам работы с базовыми пакетами, применяемыми при решении задач инвестиционного менеджменту.
  2. На правах рукописи (135)

    Автореферат диссертации
    Защита состоится 20 октября 2004 г. в 10 часов на заседании диссертационного совета Д 212.011.01 при Барнаульском государственном педагогическом университете по адресу: 656031, г.
  3. Практическое задание на проведение расчетов с помощью электронной таблицы. Билет 2

    Задача
    технология решения задач с помощью компьютера. Технологическая цепочка: построение модели – формализация – алгоритм – программа – компьютерный эксперимент.
  4. Мультимедиа-технологии

    Реферат
    Слово мультимедиа в буквальном переводе означает много средств для представления информации пользователю. Компьютер без средств мультимедиа сегодня уже не считается полноценным.
  5. Создание простейшей Web страницы

    Лабораторная работа
    Изучение дисциплины «Информационные технологии» является составной частью фундаментальной подготовки студентов специальности 071900. Она преподается в течение пятого и шестого семестров.

Другие похожие документы..