Multimédia

4IZ268 – Webové technologie

Jirka Kosek

Poslední modifikace: $Date: 2016/10/20 17:15:12 $

Úvod

Vkládání libovolných MM objektů

  • 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 až od verze 4.0

Element embed

  • 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>

Vkládání zvuku a videa v HTML5

  • podpora elementu object napříč prohlížeči nebyla ideální, 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í, …

  • kvůli patentovým hrozbám bohužel zatím nepanuje shoda na jednotných formátech pro video a audio, které by podporovaly všechny prohlížeče

Zvuk

Formáty

  • navzorkování zvukového signálu

    • primitivní kódovací algoritmy (PCM, DPCM, …)

      • nezná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, …

  • 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

Vložení do stránky

  • 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>

Ovládání elementu audio

  • další 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í

Web Audio API

  • 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

  • ukázky Web Audio API

Na co nesmíme zapomenout

  • 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

  • pozor na autorská práva ke skladbám

Video

Formáty

  • 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 (moderní herní a mobilní zařízení), Theora, WMW, RealVideo, VP8, …

  • různý stupeň komprese a rozlišení obrazu, kvality obrazu a výpočetní náročnosti

  • velké objemy dat

Možnosti vložení do stránky

  • podobně jako u zvuku pomocí object/embed

  • nejčastěji se kvůli podpoře v prohlížečích dnes používá Flash

  • 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 není zatím 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>

Vložení do stránky pro starší prohlížeče

  • 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>

Titulky

  • 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>

Streaming médií

Výhody streamingu

  • 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

Protokoly

  • 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

Streaming prakticky

  • 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, …)

Synchronizovaná multimédia

Synchronizovaná multimédia

  • 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

SMIL

Synchronized Multimedia Integration Language

  • 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

Ukázka animace SVG pomocí SMIL

<!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>

Flash

  • 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í

Fenomén „Celé stránky ve Flashi“

  • 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 ;–)

Silverlight

  • „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

Na co nesmíme zapomenout

Na co nesmíme zapomenout

  • 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

Další zdroje informací

Další zdroje informací