Poslední modifikace: 2021-10-22 10:23:39 UTC
element object umožňuje
vložení několika verzí MM objektu, prohlížeč si může podle svých
schopností vybrat nejvhodnější verzi
<object data="URL k souboru"
type="MIME typ dat"
width="šířka objektu"
height="výška objektu">
alternativní verze objektu (obrázek, text)
</object>příklad:
<object data="earth.mpeg" type="application/mpeg" width="300" height="200">
<object data="earth.gif" type="image/gif" width="400" height="500">
Planeta Země tak, jak ji viděl Gagarin.
</object>
</object>object je součástí HTML od
verze 4.0
dříve se používal element embed, který však
dlouho nebyl součástí standardu HTML (HTML5 jej však podporuje,
protože jej podporují prohlížeče)
<embed src="earth.mpeg" type="application/mpeg" width="300" height="200">
</embed>oba přístupy lze kombinovat (dříve se používalo pro zajištění kompatibility se staršími prohlížeči)
<object data="earth.mpeg" type="application/mpeg" width="300" height="200">
<embed src="earth.mpeg" type="application/mpeg" width="300" height="200">
</embed>
</object>podpora elementu object napříč prohlížeči nebyla
ideální a konzistentní, a proto HTML5 přineslo nové speciální elementy
<video src="URL k souboru"
width="šířka videa"
height="výška videa">
… alternativní obsah, pokud video nelze přehrát
</video><audio src="URL k souboru">
… alternativní obsah, pokud nelze zvuk přehrát
</audio>HTML5 definuje i API pro práci s audio/video – spuštění, zastavení, …
navzorkování zvukového signálu
primitivní kódovací algoritmy (PCM, DPCM, …)
nejznámější formáty – WAV, AU
pokročilejší kódování využívající nedokonalosti lidského sluchu
MP3, AAC, RealAudio, ATRAC, WMA, Vorbis, Opus, FLAC, …
syntéza zvuku
úsporné zaznamenání pokynů pro zvukový syntetizátor v počítači (druh zvuku, sekvence tónů a jejich délky)
MIDI
1 minuta záznamu WAV/MP3/MIDI = 10 MB/1 MB/10 KB
odkaz na soubor se zvukovým záznamem
pokud je dobře nakonfigurovaný prohlížeč a OS, spustí se po aktivaci odkazu příslušný přehrávač
<a href="zaznam_prednasky.mp3">Poslechněte si přednášku</a>hudba automaticky přehrávaná po natažení stránky
<audio src="skladba.mp3" autoplay>
</audio>vložení hudby včetně panelu pro ovládání přehrávače
<audio src="skladba.mp3" controls>
</audio>audiodalší atributy
muted – zvuk je po
spuštění ztišený
loop – zvuk se
přehrává dokola
preload – zvuková
data se začnou načítat ještě před spuštěním přehrávání
HTML5 definuje JS API, které dovoluje ovládání přehrávače
play() – spuštění přehrávání
pause() – pozastavení přehrávání
API pro zpracování a syntézu zvuku
míchání zvuků z více zdrojů
generování nových zvuků
vhodné např. pro generování zvukových efektů ve hrách
ne každý má stejný vkus jako my, automaticky spouštěný zvuk je mnohdy lepší nepoužívat
každá stránka se zvukem by měla nabízet jednoduchý a zřetelný způsob jak jej vypnout
autoplay dnes prohlížeče v mnoha případech ignorují
pozor na autorská práva ke skladbám
problematika video formátů by vydala na celý semestr ;-)
kontejnery: AVI, MPEG, QuickTime, Real Media, Windows Media, Flash Video, Matroska, WebM, …
kodeky: MPEG-2 Part 2 (DVD), MPEG-4 Part 2 (DivX), MPEG-4 Part 10/H.264 (moderní herní a mobilní zařízení), HEVC/H.265, Theora, WMW, RealVideo, VP8, VP9, …
různý stupeň komprese a rozlišení obrazu, kvality obrazu a výpočetní náročnosti
velké objemy dat
dlouhou dobu se video vkládalo téměř výhradně pomocí Flashe
HTML5 obsahuje nový element
video (demo)
<video src="film.mov">
Ve vašem starém prohlížeči video neuvidíte
</video>kvůli licenčním problémům nebyla dlouhou dobu shoda na jednom kodeku, který by podporovali všichni výrobci
stejný obsah lze zadat v několika různých zdrojích
<video>
<source src='video.mp4' type='video/mp4'>
<source src='video.webm' type='video/webm'>
<source src='video.ogv' type='video/ogg'>
</video>dnes je již téměř všude podporován kodek H.264
HTML5 přístup v kombinaci s Flashem zajistí funkčnost videa v naprosté většině prohlížečů
<video width="320" height="240">
<source src='video.mp4' type='video/mp4'>
<source src='video.webm' type='video/webm'>
<source src='video.ogv' type='video/ogg'>
<object width="320" height="240" type="application/x-shockwave-flash"
data="flowplayer-3.2.1.swf">
<param name="movie" value="flowplayer-3.2.1.swf">
<param name="allowfullscreen" value="true">
<param name="flashvars" value='config={"clip": {"url": "http://example.com/dih5/video.mp4", "autoPlay":false}}'>
<p>Stáhněte si video jako <a href="video.mp4">MP4</a>,
<a href="video.webm">WebM</a> nebo <a href="video.ogv">Ogg</a>.</p>
</object>
</video>pro audio a video záznamy lze přidat odkaz na titulky
titulky jsou ve formátu WebVTT
lze zadat několik vatiant titulků
zobrazení titulků lze ovládat pomocí JS a stylovat pomocí CSS
<video src="brave.webm">
<track kind="subtitles" src="brave.en.vtt" srclang="en" label="English">
<track kind="captions" src="brave.en.hoh.vtt" srclang="en"
label="English for the Hard of Hearing">
<track kind="subtitles" src="brave.fr.vtt" srclang="fr"
lang="fr" label="Français">
<track kind="subtitles" src="brave.de.vtt" srclang="de"
lang="de" label="Deutsch">
</video>při použití klasických formátů a způsobu distribuce je potřeba nejprve celý soubor stáhnout, a teprve poté je možné jej začít přehrávat
při streamingu probíhá přehrávání průběžně se stahováním dat
začátek přehrávání je téměř okamžitý (zpoždění je jen pár sekund, během kterých se naplní buffer vyrovnávající dočasné zpomalení přenosu dat)
v proudu přehrávaných dat se lze pohybovat
pro streaming je potřeba použít speciální protokol
Real Time Streaming Protocol (RTSP)
RTP: A Transport Protocol for Real-Time Applications
v posledních letech se pro streaming využívá i HTTP
objekt se rozdělí na krátké (typicky jednotky sekund) objekty, které si klient může stahovat jednotlivě
Dynamic Adaptive Streaming over HTTP (DASH)
Apple HTTP Live Streaming
Adobe Dynamic Streaming
Microsoft Smooth Streaming
lze provozovat vlastní streamovací server
v mnoha případech stačí využít existující služby a video jen vložit do stránky (YouTube, Vimeo, …)
mnoho CDN sítí podporuje streaming přes HTTP
prezentace složená z nezávislých obrázků, zvuků, videosekvencí, textů apod.
průběh prezentace se řídí buď podle času, nebo podle interakce s uživatelem
u jednotlivých objektů můžeme určit jejich umístění na obrazovce a čas spuštění
má menší nároky na přenosovou kapacitu než samostatné video
lze snadno personalizovat – např. doplnění jména uživatele do prezentace
formáty: SMIL, Flash, SilverLight
standard konsorcia W3C
verze 1.0 standard od roku 1998
verze 2.0 standard od srpna 2001 (používá se například pro animace v SVG)
verze 2.1 standard od prosince 2005 (používá se například pro MMS)
verze 3.0 standard od prosince 2008 (používá se např. pro animace v SVG)
založen na XML, na vytváření není potřeba žádný speciální software
<!DOCTYPE html>
<html>
<head>
<title>Animace SVG pomocí SMIL</title>
</head>
<body>
<svg width="300px" height="100px">
<rect x="0" y="0" width="300" height="100" fill="yellow" stroke-width="1" />
<circle cx="0" cy="50" r="15" fill="blue" stroke="blue" stroke-width="1">
<animate attributeName="cx" from="0" to="100" dur="5s" repeatCount="indefinite" />
</circle>
</svg>
</body>
</html>
proprietární formát firmy Adobe (dříve Macromedia)
pro vytváření je nutné použít program Flash nebo obdobný SW
mnoho prohlížečů standardně obsahuje předinstalovaný Flash plugin, zdarma lze získat přehrávač nejnovější verze
nevýhody:
vytváří se obvykle v komerčních aplikacích, které nejsou nejlevnější
od Flashe se postupně ustupuje
výhody:
Flash je program se snadnou obsluhou, oblíbený u designerů stránek
přehrávač Flash Player je standardní součástí mnoha prohlížečů, dostupný pro mnoho platforem, podporuje i mnohá mobilní zařízení
proč ano:
není nutná znalost HTML ani programování – vše lze „naklikat“
není potřeba řešit nekompatibility mezi prohlížeči (různý stupeň podpory HTML, CSS a JavaScriptu)
proč ne:
Flash plug-in nemá každý, jen skoro každý
stránky jsou větší než dobře navržené HTML
vyhledávací služby neumějí Flash stránky dobře indexovat
pokud není prezentace udělána profesionálně, nelze vytvářet odkazy na její jednotlivé části
Flash je proprietární firemní formát, časem jej nejspíš vytlačí SVG + DOM + CSS + JavaScript (a nebo taky ne ;–)
„Flash od Microsoftu“
umožňuje vytváření vysoce interaktivních a multimediálních aplikací
uživatelské rozhraní se definuje pomocí jazyka XAML
pro spuštění Silverlightu se používá plugin
zatím je Silverlight podporován na Windows a Mac OS X
Novel pracuje na implementaci Moonlight pro linuxové platformy
„V jednoduchosti je síla“
multimédia jsou velká a zpomalují načítání stránky
sebelepší grafika a zvuk nikdy nezakryje to, že na stránkách nejsou zajímavé informace
efektní klip možná upoutá při první návštěvě stránky, ale v budoucnu jen zdržuje přístup uživatele k informacím