10. web и мултимедия · хиперлинк. Използва се при бавни...

Web design, Hristo Valchanov

10. Web и мултимедия


Мултимедия

• Звук;

• Музика;

• Видео;

• Анимация.


Mutipurpose Internet Mail

Extensions- MIME

Предоставя механизъм за прехвърляне на не-текстови данни към браузъра. Задава се във вида:

<MIME_type / format>

MIME_type: описва типа на данните (приложение, аудио, видео, изображение, текст).

Format: описва формата на данните (gif, jpg, mpeg, avi, html, quicktime, plain).

"audio/basic", "audio/x-wav", "text/plain", "image/jpeg", "video/mpeg", "video/quicktime", "image/png", "image/gif", "video/mpeg", "text/css"


Mutipurpose Internet Mail

Extensions- MIME From: Rich Example <[email protected]>

To: A Recipient <[email protected]>

Subject: An example of email with images and a plain alternative

MIME-Version: 1.0

Content-Type: multipart/alternative; boundary="outer-boundary"

This is a MIME-encoded message. If you are seeing this, your mail

reader is old.

--outer-boundary

Content-Type: text/plain; charset=us-ascii

This message might make you :) or it might make you :(

--outer-boundary

MIME-Version: 1.0

Content-Type: multipart/related;

type="text/html"; start="<body@here>"; boundary="inner-boundary"

--inner-boundary

Content-Type: text/html; charset=us-ascii

Content-Disposition: inline

Content-ID: <body@here>

<html>

<body>

This message might make you

<img src="cid:smile@here" alt="smile">

or it might make you

<img src="cid:frown@here" alt="frown">

</body>

</html>

--inner-boundary

Content-Type: image/gif


Content-Transfer-Encoding: base64

Content-ID: <smile@here>

R0lGODlhEAAQAKEBAAAAAP//AP//AP//ACH5BAEKAAIALAAAAAAQABAAAAIzlA2px6IBw2

IpWglOvTahDgGdI0ZlGW5meKlci6JrasrqkypxJr8S0oNpgqkGLtcY6hoFADs=

--inner-boundary

Content-Type: image/gif


Content-Transfer-Encoding: base64

Content-ID: <frown@here>

R0lGODlhEAAQAKEBAAAAAAD//wD//wD//yH5BAEKAAIALAAAAAAQABAAAAIzlA2px6IBw2

IpWglOvTahDgGdI0ZlGW5meKlci75drDzm5uLZyZ1I3Mv8ZB5Krtgg1RoFADs=

--inner-boundary--

--outer-boundary--


Мултимедийни формати

Формат Файл Описание

AVI .avi The AVI (Audio Video Interleave) format was developed by Microsoft. The AVI format is supported by all

computers running Windows, and by all the most popular web browsers. It is a very common format on

the Internet, but not always possible to play on non-Windows computers.

WMV .wmv The Windows Media format is developed by Microsoft. Windows Media is a common format on the

Internet, but Windows Media movies cannot be played on non-Windows computer without an extra (free)

component installed. Some later Windows Media movies cannot play at all on non-Windows computers

because no player is available

MPEG .mpg

.mpeg

The MPEG (Moving Pictures Expert Group) format is the most popular format on the Internet. It is cross-

platform, and supported by all the most popular web browsers.

QuickTime .mov The QuickTime format is developed by Apple. QuickTime is a common format on the Internet, but

QuickTime movies cannot be played on a Windows computer without an extra (free) component installed.

RealVideo .rm

.ram

The RealVideo format was developed for the Internet by Real Media. The format allows streaming of

video (on-line video, Internet TV) with low bandwidths. Because of the low bandwidth priority, quality is

often reduced.

Flash .swf

.flv

The Flash (Shockwave) format was developed by Macromedia. The Shockwave format requires an extra

component to play. But this component comes preinstalled with web browsers like Firefox and Internet

Explorer.

Mpeg-4 .mp4 Mpeg-4 (with H.264 video compression) is the new format for the internet. In fact, YouTube recommends

using MP4. YouTube accepts multiple formats, and then converts them all to .flv or .mp4 for distribution.

More and more online video publishers are moving to MP4 as the internet sharing format for both Flash

players and HTML5.

Видео формати

Формат, създаден от Microsoft. Поддържа се основно от компютри под Windows и от повечето

извести браузъри.

Формат, създаден от Microsoft. Не може да се гледа на не-Windows компютри без допълнителни

(безплатни) инсталирани компоненти.

Moving Pictures Expert Group формат е междуплатформен и се поддържа от почти всички

известни браузъри.

Разработен е от Apple. За използване от не-Windows компютри е нужен допълнителен

(безплатен) компонент.

Разработен специално за Интернет от Real Media.Позволява потоково изпълнение (streaming

video) при ниска скорост на изтегляне. Качеството е значително редуцирано.

(Shockware) формат разработен от Macromedia. Изисква допълнителен компонент.

Нов формат за Интернет. Препоръчителен е от YouTube.


Мултимедийни формати

Аудио формати

Формат Файл Описание

MIDI .mid

.midi

The MIDI (Musical Instrument Digital Interface) is a format for electronic music devices like synthesizers and PC

sound cards. MIDI files do not contain sound, but digital musical instructions (notes) that can be played by

electronics (like your PC's sound card).

Click here to play The Beatles.

Since MIDI format only contains instructions (notes), MIDI files are extremely small. The example above is only

23K in size but it plays for nearly 5 minutes. MIDI is supported by many software systems over a large range of

platforms. MIDI is supported by all the most popular Internet browsers.

RealAudio .rm

.ram

The RealAudio format was developed for the Internet by Real Media. The format also supports video. The format

allows streaming of audio (on-line music, Internet radio) with low bandwidths. Because of the low bandwidth

priority, quality is often reduced.

Wave .wav The Wave (waveform) format is developed by IBM and Microsoft. It is supported by all computers running

Windows, and by all the most popular web browsers (except Google Chrome).

WMA .wma The WMA format (Windows Media Audio), compares in quality to MP3, and is compatible with most players,

except the iPod. WMA files can be delivered as a continuous flow of data, which makes it practical for use in

Internet radio or on-line music.

MP3 .mp3

.mpga

MP3 files are actually the sound part of MPEG files. The MPEG format was originally developed for video by the

Moving Pictures Experts Group. MP3 is one of the most popular sound formats for music. The encoding system

combines good compression (small files) with high quality. Expect future software systems to support it.

(Musical Instrument Digital Interface) формат за електронни синтезатори и PC звукови карти. Не съдържа

звук, а музикални инструкции, които се възпроизвеждат. Изключително малки по размер файлове.

Поддържа се от почти всички Интернет браузъри.

Разработен специално за Интернет от Real Media. Позволява потоково изпълнение (streaming audio)

при ниска скорост на изтегляне. Качеството е значително редуцирано.

Разработен е от IBM и Microsoft. Поддържа се от почти всички Интернет браузъри.

(Windows Media Audio) е съвместим по качество с mp3 и се поддържа от повечето плеъри без iPod.

Файловете могат да се изтеглят като последователен поток от данни, което ги прави удобни за

Интернет радио или on-line музика.

Това е реалната звукова част на MPEG файловете. Един от най-разпространените формати за музика.

Притежава добра компресия с високо качество.

http://www.w3schools.com/media/beatles.mid


Възпроизвеждане на

различни формати данни

• Plug-in – програми, които разширяват

вградените възможности на браузърите;

• Helper application – самостоятелни

програми на клиентския компютър, които

могат да се използват съвместно с

браузъра.


Използване на мултимедийни

файлове в web-страници

• Inline media – медия, която е включена в

страницата (embedded media);

• External media – достъпът до нея е чрез

хиперлинк. Използва се при бавни връзки

и необходимост от изтегляне.


Анимация

JavaScript позволява преместване на

DOM елементи в страницата.

Преместването се реализира чрез

промяна на атрибутите на обект,

свързани с неговата позиция в

прозореца на браузъра.

Ръчна анимация <html>

<head>

<title>Ex1. JavaScript Animation</title>

<script type="text/javascript">



</script>

</head>

<body>

<form>

<img id="myImage" src="globe.jpg" />

<p>Click button below to move the image to right</p>

<input type="button" value="Click Me" onclick="moveRight();" />

</form>

</body>

</html>

Автоматична анимация <html>

<head>

<title>Ex2. JavaScript Animation</title>




</script>

</head>

<body>

<form>

<img id="myImage" src="globe.jpg" />

<p>Click the buttons below to handle animation</p>

<input type="button" value="Start" onclick="moveRight();" />

<input type="button" value="Stop" onclick="stop();" />

</form>

</body>

</html>

Преместване на курсор над

изображение <html>

<head>

<title>Ex3.Rollover with a Mouse Events</title>




</script>

</head>

<body>

<p>Move your mouse over the image to see the result</p>

<a href="#" onMouseOver="document.myImage.src=image2.src;"

onMouseOut="document.myImage.src=image1.src;">

<img name="myImage" src="globe.jpg" />

</a>

</body>

</html>


Използване на Plug-in

Обектът navigator съдържа специален

дъщерен обект – plugins.

Този обект представлява масив, всеки

елемент от който съдържа информация за

инсталиран plug-in в браузъра.


Извеждане инсталираните plug-in <html>

<head>

<title>Ex4.List of Plug-Ins</title>

</head>

<body>

<table border="1">

<tr>

<th>Plug-in Name</th>

<th>Filename</th>

<th>Description</th>

</tr>

<script language="JavaScript" type="text/javascript">

for (i=0; i<navigator.plugins.length; i++) {

document.write("<tr><td>");

document.write(navigator.plugins[i].name);

document.write("</td><td>");

document.write(navigator.plugins[i].filename);

document.write("</td><td>");

document.write(navigator.plugins[i].description);

document.write("</td></tr>");

}

</script>

</table>

</body>

</html>


Извеждане инсталираните plug-in


Включване на мултимедия

• Използване на Plug-in

<object ... />

<embed ... />

<audio ... />

<video ... />


Проверка за инсталиран plug-in

<html>

<head>

<title>Using Plug-Ins</title>

</head>

<body>


media = navigator.mimeTypes["video/quicktime"];

if (media) {

document.write("<embed src='HippoAndDog.mpeg'

height=640 width=480>");

}

else {

document.write("No plug-in detected.");

}

</script>

</body>

</html>

Контрол върху мултимедията <html>

<head>

<title>Ex5. Using Embeded Object</title>




</script>

</head>

<body>

<embed id="demo" name="demo"

src="http://www.amrood.com/games/kumite.swf"

width="318" height="300" play="false“ loop="false"

pluginspage=

http://www.macromedia.com/go/getflashplayer

swliveconnect="true">

</embed>

<form name="form" id="form" action="#" method="get">

<input type="button" value="Start" onclick="play();" />

<input type="button" value="Stop" onclick="stop();" />

<input type="button" value="Rewind" nclick="rewind();"

/>

</form>

</body>

</html>


Включване на аудио

• Използване на plug-in и хипервръзка

<html>

<title> Ex8. Play audio</title>

<body>

<p><a href="We will rock you.mp3">

Play Song</a></p>

</body>

</html>


Включване на аудио - embed

• Използване на <embed> таг

<!DOCTYPE HTML>

<html>

<head>

<title> Ex7. Play audio </title>

</head>

<body>

<embed height="50px" width="100px"

src="We will rock you.mp3"></embed>

<p>Play</p>

</body>

</html>

• Не се поддържа от HTML4. Няма да се

валидира коректно;

• Ако браузърът не поддържа аудио

формата, няма да се възпроизведе;

• Ако се конвертира в други формати,

може да не се разпознава от всички

браузъри.



• Изключване на автоматично аудио

<!DOCTYPE HTML>

<html>

<head>

<title> Ex71. Play audio </title>

</head>

<body>


src="We will rock you.mp3“ autostart=“false”>

</embed>

<p>Play</p>

</body>

</html>



• Скриване на плейбек контрола

<!DOCTYPE HTML>

<html>

<head>

<title> Play audio </title>

</head>

<body>


src="We will rock you.mp3“

hidden=“true”

autostart=“true”>

</embed>

<p>Play</p>

</body>

</html>



• Използване на <audio> таг

<!DOCTYPE HTML>

<html>

<head>

<title> Play audio </title>

</head>

<body>

<audio controls="controls">

<source src="We will rock you.ogg“ type="audio/ogg">

<source src="We will rock you.mp3“ type="audio/mp3">

Your browser does not support this audio

</audio>

</body>

</html>

• Не се поддържа от HTML4. Поддържа

се от HTML5;

• Не работи със стари браузъри;

• Не се валидира в HTML4 и XHTML.



• Препоръчително решение

<!DOCTYPE HTML>

<html>

<body>

<audio controls="controls" height="50px width="100px">

<source src="song.mp3" type="audio/mp3">

<source src="song.ogg" type="audio/ogg">

<embed height="50px width="100px“ src="song.mp3">

</audio>

</body>

</html>


Включване на видео

• Използване на <embed> таг

<html>

<head>

<title>Ex6. Using Plug-Ins</title>

</head>

<body>


media = navigator.mimeTypes["video/quicktime"];

if (media){

document.write("<embed src='HippoAndDog.mpeg' height=640

width=480>");

}

else{

document.write("No plug-in detected.");

}

</script>

</body>

</html>



• Използване на <video> таг

<html>

<body>

<video width=“500" height="200" controls="controls">

<source src="movie1.mp4" type="video/mp4" />

<source src="movie1.ogg" type="video/ogg" />

<source src="movie1.webm" type="video/webm" />

Your browser does not support video

</video>

</body>

</html>



• Използване на <object> таг

<html>

<head>

<title>Ex10. Using Plug-Ins</title>

</head>

<body>

<object height="200px" width="200px"

data="HippoAndDog.mpeg"></object>

</body>

</html>



• Препоръчително решение

<html>

<body>

<video width="320" height="240" controls="controls">

<source src="HippoAndDog.ogg" type="video/ogg" />

<source src="HippoAndDog.mp4" type="video/mp4" />

<source src="HippoAndDog.webm" type="video/webm" />

<object width="320" height="240" src="HippoAndDog.mpeg">

<embed width="320" height="240" src="HippoAndDog.mpeg">

Your browser does not support video

</embed>

</object>

</video>

</body>

</html>


Въпроси?

10. web и мултимедия · хиперлинк. Използва се при бавни...

Documents