10. web и мултимедия · хиперлинк. Използва се при бавни...
TRANSCRIPT
Web design, Hristo Valchanov
10. Web и мултимедия
Web design, Hristo Valchanov
Мултимедия
• Звук;
• Музика;
• Видео;
• Анимация.
Web design, Hristo Valchanov
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"
Web design, Hristo Valchanov
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-Disposition: inline
Content-Transfer-Encoding: base64
Content-ID: <smile@here>
R0lGODlhEAAQAKEBAAAAAP//AP//AP//ACH5BAEKAAIALAAAAAAQABAAAAIzlA2px6IBw2
IpWglOvTahDgGdI0ZlGW5meKlci6JrasrqkypxJr8S0oNpgqkGLtcY6hoFADs=
--inner-boundary
Content-Type: image/gif
Content-Disposition: inline
Content-Transfer-Encoding: base64
Content-ID: <frown@here>
R0lGODlhEAAQAKEBAAAAAAD//wD//wD//yH5BAEKAAIALAAAAAAQABAAAAIzlA2px6IBw2
IpWglOvTahDgGdI0ZlGW5meKlci75drDzm5uLZyZ1I3Mv8ZB5Krtgg1RoFADs=
--inner-boundary--
--outer-boundary--
Web design, Hristo Valchanov
Мултимедийни формати
Формат Файл Описание
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.
Web design, Hristo Valchanov
Мултимедийни формати
Аудио формати
Формат Файл Описание
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 файловете. Един от най-разпространените формати за музика.
Притежава добра компресия с високо качество.
Web design, Hristo Valchanov
Възпроизвеждане на
различни формати данни
• Plug-in – програми, които разширяват
вградените възможности на браузърите;
• Helper application – самостоятелни
програми на клиентския компютър, които
могат да се използват съвместно с
браузъра.
Web design, Hristo Valchanov
Използване на мултимедийни
файлове в web-страници
• Inline media – медия, която е включена в
страницата (embedded media);
• External media – достъпът до нея е чрез
хиперлинк. Използва се при бавни връзки
и необходимост от изтегляне.
Web design, Hristo Valchanov
Анимация
JavaScript позволява преместване на
DOM елементи в страницата.
Преместването се реализира чрез
промяна на атрибутите на обект,
свързани с неговата позиция в
прозореца на браузъра.
Web design, Hristo Valchanov
Ръчна анимация <html>
<head>
<title>Ex1. JavaScript Animation</title>
<script type="text/javascript">
<!--
var imgObj = null;
function init(){
imgObj = document.getElementById('myImage');
imgObj.style.position= 'relative';
imgObj.style.left = '0px';
}
function moveRight(){
imgObj.style.left = parseInt(imgObj.style.left) + 10 + 'px';
}
window.onload =init;
//-->
</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>
Web design, Hristo Valchanov
Автоматична анимация <html>
<head>
<title>Ex2. JavaScript Animation</title>
<script type="text/javascript">
<!--
var imgObj = null;
var animate ;
function init(){
imgObj = document.getElementById('myImage');
imgObj.style.position= 'relative';
imgObj.style.left = '0px';
}
function moveRight(){
imgObj.style.left = parseInt(imgObj.style.left) + 10 + 'px';
animate = setTimeout(moveRight,20); // call moveRight in 20msec
}
function stop(){
clearTimeout(animate);
imgObj.style.left = '0px';
}
window.onload =init;
//-->
</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>
Web design, Hristo Valchanov
Преместване на курсор над
изображение <html>
<head>
<title>Ex3.Rollover with a Mouse Events</title>
<script type="text/javascript">
<!--
if(document.images){
var image1 = new Image(); // Preload an image
image1.src = "globe.jpg";
var image2 = new Image(); // Preload second image
image2.src = "globe1.jpg";
}
//-->
</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>
Web design, Hristo Valchanov
Използване на Plug-in
Обектът navigator съдържа специален
дъщерен обект – plugins.
Този обект представлява масив, всеки
елемент от който съдържа информация за
инсталиран plug-in в браузъра.
Web design, Hristo Valchanov
Извеждане инсталираните 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>
Web design, Hristo Valchanov
Извеждане инсталираните plug-in
Web design, Hristo Valchanov
Включване на мултимедия
• Използване на Plug-in
<object ... />
<embed ... />
<audio ... />
<video ... />
Web design, Hristo Valchanov
Проверка за инсталиран plug-in
<html>
<head>
<title>Using Plug-Ins</title>
</head>
<body>
<script language="JavaScript" type="text/javascript">
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>
Web design, Hristo Valchanov
Контрол върху мултимедията <html>
<head>
<title>Ex5. Using Embeded Object</title>
<script type="text/javascript">
<!--
function play() {
if (!document.demo.IsPlaying()){
document.demo.Play();
}
}
function stop() {
if (document.demo.IsPlaying()){
document.demo.StopPlay();
}
}
function rewind() {
if (document.demo.IsPlaying()){
document.demo.StopPlay();
}
document.demo.Rewind();
}
//-->
</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>
Web design, Hristo Valchanov
Включване на аудио
• Използване на plug-in и хипервръзка
<html>
<title> Ex8. Play audio</title>
<body>
<p><a href="We will rock you.mp3">
Play Song</a></p>
</body>
</html>
Web design, Hristo Valchanov
Включване на аудио - 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. Няма да се
валидира коректно;
• Ако браузърът не поддържа аудио
формата, няма да се възпроизведе;
• Ако се конвертира в други формати,
може да не се разпознава от всички
браузъри.
Web design, Hristo Valchanov
Включване на аудио - embed
• Изключване на автоматично аудио
<!DOCTYPE HTML>
<html>
<head>
<title> Ex71. Play audio </title>
</head>
<body>
<embed height="50px" width="100px"
src="We will rock you.mp3“ autostart=“false”>
</embed>
<p>Play</p>
</body>
</html>
Web design, Hristo Valchanov
Включване на аудио - embed
• Скриване на плейбек контрола
<!DOCTYPE HTML>
<html>
<head>
<title> Play audio </title>
</head>
<body>
<embed height="50px" width="100px"
src="We will rock you.mp3“
hidden=“true”
autostart=“true”>
</embed>
<p>Play</p>
</body>
</html>
Web design, Hristo Valchanov
Включване на аудио
• Използване на <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.
Web design, Hristo Valchanov
Включване на аудио
• Препоръчително решение
<!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>
Web design, Hristo Valchanov
Включване на видео
• Използване на <embed> таг
<html>
<head>
<title>Ex6. Using Plug-Ins</title>
</head>
<body>
<script language="JavaScript" type="text/javascript">
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>
Web design, Hristo Valchanov
Включване на видео
• Използване на <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>
Web design, Hristo Valchanov
Включване на видео
• Използване на <object> таг
<html>
<head>
<title>Ex10. Using Plug-Ins</title>
</head>
<body>
<object height="200px" width="200px"
data="HippoAndDog.mpeg"></object>
</body>
</html>
Web design, Hristo Valchanov
Включване на видео
• Препоръчително решение
<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>
Web design, Hristo Valchanov
Въпроси?