AspNet.sk     O súťaži HTML5     Výsledky súťaže HTML5     Pravidlá súťaže     Internet Explorer 9 - príručka pre vývojárov
Menu

Praktické cvičenia

Vloženie videa do webovej stránky pomocou HTML5

mslogo_DS_300

 

Ciele praktického cvičenia

Toto praktické cvičenie je zamerané na preskúšanie podpory HTML5 značky “video” v prehliadači Internet Explorer 9. Dokončením tohto cvičenia získate znalosti z nasledujúcich oblastí:

·         Kódovanie videa

·         HTML5 element “video”

Stručný popis

Internet Explorer 9 podporuje prehrávanie videa na stránke pomocou HTML5 elementu “video”. Prehrávanie je podporované pre formát H.264 a po doinštalovaní príslušného “kodeku” aj VP8.

Predpoklady zvládnutia praktického cvičenia

·         Základné znalosti webového vývoja

·         Internet Explorer 9

·         Voliteľne pre možnosť odskúšania prehliadače Mozilla FireFox 4, Google Chrome 10, Opera 11

Viac informácií

Vývojárska príručka “Internet Explorer 9, HTML5 a CSS3” :
http://msdn.microsoft.com/sk-sk/dd727769

Blogy:
http://blogs.msdn.com/b/ie/archive/2010/04/29/html5-video.aspx
http://petelepage.com/blog/2010/06/how-to-put-html5-video-on-a-page/

Zdrojové kódy

Scenár

V praktickom cvičení vytvoríte jednoduchú webovú stránku obsahujúcu video. Keďže nie každý prehliadač podporuje HTML5, vytvoríte aj záložné prehrávanie videa na stránke  založené na technológii Silverlight.

Predpokladaný čas potrebný pre dokončenie praktického cvičenia

30 minút

Pomôcky

Použite klávesu F12 (vývojárske nástroje) zabudované do Internet Explorer-a 9, ktoré vám uľahčia ladenie s podporou “breakpoint-ov” a iné funkcie.

Cvičenie č.1 – Kódovanie videa do vhodného formátu

HTML5 v Internet Explorer-e 9 podporuje prehrávanie videa vo formáte H.264 (MP4). Niektoré nahrávacie zariadenia podporujú priamo tento formát, v prípade podpory iného formátu je potrebné video prekódovať. Niekedy naviac potrebujete videoklipy editovať  alebo meniť vlastnosti videa (napr. kvalitu, veľkosť). V prvej časti cvičenia prekódujete video použitím nástroja Microsoft Expression Encoder 4 Pro.

Upozornenie: Ak nemáte k dispozícii komerčnú verziu Expression Encoder 4 Pro, môžete cvičenie č.1 preskočiť. Výsledný súbor prekódovania “avi” na “mp4” je súčasťou doplnkového kódu pre toto praktické cvičenie v priečinku „Media“. (Bezplatná verzia Expression Encoder-a nemá zabudovanú podporu prekódovania do MP4.)

Úloha č.1: Prekódovanie videa do formátu H.264 (MP4)

Expression Encoder Pro použijeme na prekonvertovanie pripraveného videa vo formáte avi do formátu MP4. Expression Encoder Pro umožňuje naimportovať jeden alebo viac multimediálnych súborov a prekódovať ich spolu s vložením špecifických vlastností  a atribútov pre iný “kodek”.

1.       Spustite Microsoft Expression Encoder 4

2.       Vyberte “Transcoding Project”

3.       Kliknite na tlačidlo “Import” v dolnej časti okna a vyberte z lokálneho disku video  “vodopady.avi” (, ktoré je súčasťou doplnkového kódu pre toto praktické cvičenie v priečinku „Media“).Po importe budete vidieť videosúbor v zozname “Media content”, aj v editačnom panele.

4.       Komerčná verzia Expression Encoder Pro má zabudovaných niekoľko šablón pre typické scenáre, akými sú napr. optimalizácia videa pre web so slabou priepustnosťou, alebo príprava videa pre zariadenia s malými obrazovkami. Vyberte v pravej hornej časti okna Expression Encoder-a Pro v zozname “Presets” šablónu “Encoding for Online Services | SD | H.264 YouTube SD” a potvrďte tlačidlo “Apply”.

5.       Nastavte výstupné umiestnenie na rovnaké miesto ako zdrojový súbor. Nevyberte pritom zaškrtávacie políčko “Sub-folder by Job ID”.

6.       Potvrďte tlačidlo “Encode”, ktoré nájdete v spodnej časti okna “Expression Encoder”.

Do nastaveného priečinka sa vygeneruje súbor “vodopady.mp4” (vo formáte H.264), ktorý použijeme v ďalšej časti tohto cvičenia.

Cvičenie č.2 – HTML 5 Video

Video bolo tradične do webových stránok vkladané ako URL súbor na prevzatie,  ktorý sa po prenesení na lokálny počítač prehral v lokálnom multimediálnom prehrávači alebo v doplnku doinštalovanom do internetového prehliadača. Značka “video” v HTML5 umožňuje renderovať video priamo vo webovej stránke natívnymi prostriedkami “browsera”.

Úloha č.1: Pridanie značky “<video>” na webovú stránku

1.       Rozbaľte priložený kód a otvorte ho v Visual Studiu 2010, prípadne v bezplatnom nástroji Visual Web Developer 2010 Express  alebo priamo v Internet Explorer-e 9. Hlavnou stránkou projektu je “default.html”. (Visual Studio 2010 so Service Pack-om 1 alebo Visual Web Developer Express 2010 so Service Pack-om 1 sú vývojárske prostredia, ktoré vám pri písaní kódu poskytnú kontextové dokončovanie syntaxe, validáciu štýlov a kódu aj s podporou HTML5.)

 V prípade otvorenia stránky “default.html” volajúcej JavaScript v Internet Explorer-e 9 z lokálneho disku povoľte spúšťanie javascriptového kódu volaného stránkou.  (Potvrďte “Allow blocked content” - “Povoľte blokovaný obsah” v notifikačnom okne na stránke.)

2.       Otvorte stránku “default.html” v editačnom móde. (Výber editora ponecháme na vás. Postačí vám aj obyčajný editor textu typu “poznámkový blok”. Editor webových stránok v Visual Studiu 2010 SP1 alebo Visual Web Developer 2010 Express ponúka prehľadnosť,  HTML5 intellisense a kontrolu “html/css/js” kódu.)

3.       Pridajte do “default.html” nasledujúci zvýraznený kód:

<body>

  <h1>Vodopády</h1>

  <div class="wrap">

             

    <video class="video" src="media/vodopady.mp4" controls>

      Značka video nie je týmto prehliadačom podporovaná.

      <a href="media/vodopady.mp4">Prevezmite video</a>.

    </video>

                   

  </div>

</body>


Kľúčovými atribútmi značky “video” sú:

·         src: cesta k videosúboru.

·         controls: zobrazenie ovládacích prvkov na prehrávanie videa, ktoré sa zobrazia, pri umiestnení myši nad video. 

Informácie o ďalších atribútoch značky “video” vrátane módu slučky, automatického prehrávania a iných nájdete v IE9 príručke pre vývojárov v odseku Elementy video a audio špecifikácie HTML5”.

Všimnite si textový oznam a hyperlinku v bloku “video”, ktoré sa zobrazia” pri použití prehliadača, ktorý nepodporuje HTML5 “video”.

4.       Úpravy uložte a klávesou F5 aktualizujte okno prehliadača zobrazujúceho “default.html”.

Na stránke sa zobrazí video a pri umiestnení kurzora myši nad neho sa sprístupnia ovládacie prvky na prehratie/pozastavenie prehrávania.

5.       Potvrďte ikonu prehratia videa.

6.       Odsimulujte situáciu, keď sa stránka zobrazí v prehliadači, ktorý nepodporuje HTML5. Potvrďte v prostredí Internet Explorer-a 9 klávesu F12, čím sa prepnete do okna vývojárskych nástrojov.

7.       Zmeňte stlačením kombinácie kláves Alt+8 mód renderovania dokument na “IE8 Standards”.

Tým vnútite prehliadaču renderovanie v štýle IE8, ktoré nepodporuje element “video”. Výsledkom je zobrazenie textu s možnosťou prevzatia videa na lokálny počítač.

Úloha č.2: Viac zdrojových súborov

V predošlej úlohe sme zdrojový súbor špecifikovali v atribúte “src”. Element “video” podporuje viac zdrojových súborov použitím viacerých “source” elementov. Umožňuje vám odkazovať sa na stránke na rôznymi spôsobmi prekódované súbory pre podporu viacerých prehliadačov. Napríklad, ak budete chcieť vyriešiť záložný postup na prehrávanie videa v Opere, jedna deklarácia zdrojového súboru môže smerovať na video kódované v Ogg Vorbis. V doplnkových súboroch pre toto praktické cvičenie je aj  video „vodopady.ogv” , ktoré je kódované vo formáte Ogg Vorbis.

1.       Odstráňte z default.html” atribút “src” a pridajte dva elementy “source” tak, ako je zvýraznené v nasledujúcom kóde:

<body>

  <h1> Vodopády</h1>

  <div class="wrap">

            

    <video class="video" controls>

      <source src="media/vodopady.mp4"

        type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>

      <source src="media/vodopady.ogv"

        type='video/ogg; codecs="theora, vorbis"'>

 

      Značka video nie je týmto prehliadačom podporovaná.

      <a href="media/vodopady.mp4">Prevezmite video</a>.

    </video>

                  

  </div>

</body>

 

Internet Explorer 9 vezme prvý podporovaný formát zo zoznamu,  a ak má dostupný príslušný “kodek”, prehrá k nemu asociovaný zdrojový súbor. Ak nie, pokračuje v zozname ďalším “source” elementom.

2.       Úpravy uložte a klávesou F5 aktualizujte okno prehliadača Internet Explorer 9 so stránkou “default.html”.  Prehliadač bude prehrávať video vo formáte H.264 (MP4). 

3.       Skúste otvoriť stránku “default.html” v prehliadači Opera, ktorý natívne nepodporuje MP4, ale podporuje kodek Ogg, prehráva súbory OGV.

Cvičenie č.3 – Záložný postup pomocou Silverlight-u

Nie každý používateľ si môže nainštalovať najnovší prehliadač podporujúci prehrávanie videa pomocou HTML5. Komfortnejším záložným postupom pre prehrávanie videa v starších prehliadačoch je použitie Silverlight-u.

Úloha č.1: Vloženie videa s prehrávaním v Silverlight-e

1.       Otvorte súbor “default.html”.

2.       Jednoduchú textovú správu s hyperlinkou pre prehliadače nepodporujúce HTML5 video prehrávanie nahraďte značkou “object” pre volanie Silverlight-u. Nižšie zobrazený kód bol vytvorený v Expression Studiu pomocou funkcionality  “Insert Media” (“vložiť multimedia”). Stačí ho jednoducho skopírovať, čím sa do hlavnej stránky pridá aj volanie príslušného javascript súboru.

Kód s textovou správou a hyperlinkou zameňte nasledujúcim zvýrazneným textom:

<body>

  <h1>Vodopády</h1>

  <div class="wrap">

            

    <video class="video" controls>

      <source src="../vodopady.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>

      <source src="../vodopady.ogv" type='video/ogg; codecs="theora, vorbis"'>

 

<div id="silverlightvideocontainer">

  <object data="data:application/x-silverlight-2"

    type="application/x-silverlight-2" width="640" height="480">

    <param name="source"

      value="silverlightvideos/cleantemplate.xap"/>

        <param name="background" value="white" />

        <param name="minRuntimeVersion" value="4.0.50401.0" />

        <param name="autoUpgrade" value="true" />

        <param name="enableHtmlAccess" value="true" />

        <param name="enableGPUAcceleration" value="true" />

        <param name="initparams" value='playerSettings =

        <Playlist>

          <DisplayTimeCode>false</DisplayTimeCode>

          <EnableCachedComposition>true</EnableCachedComposition>

          <EnableCaptions>true</EnableCaptions>

          <EnableOffline>true</EnableOffline>

          <EnablePopOut>true</EnablePopOut>

          <StartMuted>false</StartMuted>

          <StartWithPlaylistShowing>false

            </StartWithPlaylistShowing>

          <StretchNonSquarePixels>NoStretch

            </StretchNonSquarePixels>

              <Items>

                <PlaylistItem>

                  <AudioCodec>WmaProfessional</AudioCodec>

                  <Description></Description>

                  <FileSize>1821576</FileSize>

                  <FrameRate>30.000300003</FrameRate>

                  <Height>480</Height>

                  <IsAdaptiveStreaming>false

                    </IsAdaptiveStreaming>

                  <MediaSource>media/vodopady.mp4</MediaSource>

                  <ThumbSource></ThumbSource>

                  <Title></Title>

                  <VideoCodec>VC1</VideoCodec>

                  <Width>640</Width>

                </PlaylistItem>

             </Items>

            </Playlist>'>

            <a href="http://go2.microsoft.com/fwlink/?LinkID=124807" style="text-decoration: none;">

                  <img src="http://go2.microsoft.com/fwlink/?LinkId=108181"

 alt="Get Microsoft Silverlight" style="border-style: none;"/> </a>

  </object>

  <iframe id="_sl_historyFrame"    

    style='visibility:hidden;height:0;width:0;border:0px;'>

  </iframe>

</div>

 

       </video>               

  </div>

</body>

 

Poznámka: V kóde vygenerovanom Expression Studiom sme vykonali jednu zmenu. Namiesto referencovania WMV súboru v “<MediaSource>silverlightvideos/falls.wmv</MediaSource>”sme použili ako zdroj H.264 video, pretože tento format je podporovaný aj v Silverlight-e. Touto zmenou sme redukovali proces prekódovania videa, pretože sme nemuseli generovať nový WMV videosúbor.

Keďže značka pre Silverlight je vo vnútri bloku HTML5 elementu video, o prehratie sa Silverlight postará až vtedy, keď bude stránka zobrazená v prehliadači bez podpory HTML5 video.

3.       Pre prehrávanie videa v Silverlight-e je ešte potrebné pridať do stránky “default.html” linku na Silverlight JavaScript:

<head>

  <title>Vodopády</title>

  <link href="css/vodopady.css" rel="stylesheet" type="text/css">

 

  <script type='text/javascript'

    src='javascript/silverlight/silverlight.js'>

  </script>

 

</head>

 

4.       Otvorte stránku “default.html” v Internet Explorer-e 9.

Všimnite si, že video je prehrávané cez “video” element podporovaný v HTML5.

5.       Odsimulujte situáciu, keď sa stránka zobrazí v prehliadači, ktorý nepodporuje HTML5. Potvrďte v prostredí Internet Explorer-a 9 klávesu F12, čím sa prepnete do okna vývojárskych nástrojov. Zmeňte stlačením kombinácie kláves Alt+8 mód renderovania dokument na “IE8 Standards”.

Všimnite si, že po zmene renderovania sa video začne prehrávať v Silverlight-e. (Môžete sa o tom presvedčiť tak, že na ploche videa stlačíte pravé tlačidlo myši a zobrazí sa kontextové menu Silverlight.) Stránka je tak upravená na prehrávanie videí pomocou HTML5 elementu “video” ale aj pre prehrávanie videí použitím Silverlight-u na starších prehliadačoch. Rovnakou technikou je možné implementovať záložný postup aj použitím Flash-u.

Cvičenie č.4 – Prekryvný text

Jedným z výhod renderovania videa v prehliadači je jednoduché pridávanie prekryvného textu.

Úloha č.1: Prekryvný text na videu

Pridajte nad videovrstvu text obsahujúci dodatočné informácie.

1.       Do stránky “default.html” pridajte zvýraznený “div” blok s textom:

<body>

  <h1>Vodopády</h1>

  <div class="wrap">

         

    <div class="infoText">Navštívte naše vodopády! Nechajte sa očariť krásami prírody!

    </div>

 

 

2.       Umiestnenie textu na videu špecifikujte pridaním nového štýlu do súboru “css\vodopady.css”.

.infoText

{

  color: White;

  background-color: rgba(0, 0, 0, 0.6);

  position: relative;

  top: 35px;

  text-align: center;

  font-size: 0.85em;

  width: 50%;

  margin: auto;

}

 

3.       Úpravy uložte a klávesou F5 aktualizujte okno prehliadača Internet Explorer 9 so stránkou “default.html”.

Všimnite si, že vo vrstve nad videom je doplňujúci text. Potvrďte tlačidlo  prehrávania, text zostáva viditeľný aj pri prehrávanom videu.

Úloha č.2: Riadenie prehrávania videa použitím javascriptu

Prehrávanie videa môžete riadiť cez JavaScript API. Zmeňme prehrávanie videa do slučky špecifikovaním atribútov element “video”. Naviac pridajme jednoduchý kód v javascript-e na spustenie prehrávania videa, keď nad neho používateľ umiestni kurzor myši a prerušenie  prehrávania, keď kurzor myši opustí plochu videa.

1.       Upravte element “video”v súbore “default.html” vložením atribútu “loop”. Odstráňte atribút “controls”. Pridajte aj jednoduché “handlery” udalostí na spustenie a pozastavenie prehrávania:

<video class="video" loop onmouseover="this.play();"

  onmouseout="this.pause();">

 

2.       Upravte “div” element s triedou “infoText” tak, aby používateľ vedel, že prehrávanie videa môže riadiť umiestňovaním kurzoru myši nad a mimo plochy videa:

<div class="infoText">

  Video sa začne prehrávať, keď nad neho umiestnite kurzor myši.  

</div>

 

3.       Úpravy uložte a klávesou F5 aktualizujte okno prehliadača Internet Explorer 9 so stránkou “default.html”.

Všimnite si, že video sa začne prehrávať až po umiestnení kurzoru myši nad jeho plochu a bude sa prehrávať v slučke až pokým kurzor myši nepriemestnite mimo jeho plochy.

 

Zhrnutie

V tomto praktickom cvičení ste si vyskúšali v prehliadači Internet Explorer 9 podporu HTML5 elementu “video” spolu s vytvorením záložného postupu prehrávania videí pre staršie prehliadače:

·         Prekódovanie videa v nástroji Expression Encoder 4 Pro

·         Použitie HTML5 elementu “video” na natívne prehrávanie videa na stránke

·         Vytvorenie záložného postupu prehrávania videa pre staršie prehliadače použitím Silverlight-u

·         Vkladanie prekryvného textu na vrstvu nad videom

 

Copyright © 2002 - 2011 CHASTIA s.r.o., Igor Stanek
Portál je hostovaný na serveroch firmy Quantasoft - www.qsh.sk.