HTML-video

HTML5:ssä videon toistamismenetelmiä on monia.

Esimerkki

<video width="320" height="240" controls="controls">
  <source src="movie.mp4" type="video/mp4" />
  <source src="movie.ogg" type="video/ogg" />
  <source src="movie.webm" type="video/webm" />
  <object data="movie.mp4" width="320" height="240">
    <embed src="movie.swf" width="320" height="240" />
  </object>
</video>

Kokeile itse

Ongelmat, ongelmat ja ratkaisut

HTML5:ssä videon toistaminen ei ole helppoa!

Sinun täytyy hallita paljon taitoja, jotta varmistat, että videofilysi toistuu kaikissa selaimissa (Internet Explorer, Chrome, Firefox, Safari, Opera) ja kaikilla laitteilla (PC, Mac, iPad, iPhone).

Tässä luvussa CodeW3C.com kertoo ongelmista ja ratkaisuista.

Käytä <embed>-tagia

<embed>-tagin tehtävänä on upottaa multimediatyökaluja HTML-sivulle.

Seuraava HTML-koodi näyttää Flash-videon, joka on upotettu verkkosivulle:

Esimerkki

<embed src="movie.swf" height="200" width="200"/>

Kokeile itse

Ongelma

  • HTML4 ei voi tunnistaa <embed>-tagia. Sivusi ei voi olla vahvistettu.
  • Jos selain ei tue Flashia, videoa ei voi toistaa
  • iPad ja iPhone eivät voi näyttää Flash-videota.
  • Jos muutat videota toiseen muotoon, sitä ei voi toistaa kaikissa selaimissa.

Käytä <object>-tagia

<object>-tagin tehtävänä on upottaa multimediatyökaluja HTML-sivulle.

Seuraava HTML-kappale näyttää Flash-videon, joka on upotettu verkkosivulle:

Esimerkki

<object data="movie.swf" height="200" width="200"/>

Kokeile itse

Ongelma

  • Jos selain ei tue Flashia, videoa ei voi toistaa.
  • iPad ja iPhone eivät voi näyttää Flash-videota.
  • Jos muutat videota toiseen muotoon, sitä ei voi toistaa kaikissa selaimissa.

Käytä <video>-tagia

HTML5:ssä on uusi <video>-tagi.

<video>-elementin tehtävänä on upottaa videoelementti HTML-sivulle.

Seuraava HTML-kappale näyttää verkkosivulle upotetun ogg, mp4 tai webm -muodossa olevan videon:

Esimerkki

<video width="320" height="240" controls="controls">
  <source src="movie.mp4" type="video/mp4" />
  <source src="movie.ogg" type="video/ogg" />
  <source src="movie.webm" type="video/webm" />
Selaimesi ei tue video-elementtiä.
</video>

Kokeile itse

Ongelma

  • Sinun täytyy muuntaa video moniin eri muotoihin.
  • <video>-elementti ei toimi vanhoissa selaimissa.
  • <video>-elementti ei voi läpäistä HTML 4 ja XHTML-todennusta.

Paras HTML-ratkaisu

HTML 5 + <object> + <embed>

<video width="320" height="240" controls="controls">
  <source src="movie.mp4" type="video/mp4" />
  <source src="movie.ogg" type="video/ogg" />
  <source src="movie.webm" type="video/webm" />
  <object data="movie.mp4" width="320" height="240">
    <embed src="movie.swf" width="320" height="240" />
  </object>
</video>

Kokeile itse

Esimerkissä käytettiin neljää eri videoformattia. HTML 5 <video>-elementti yrittää toistaa mp4, ogg tai webm -muodossa olevaa videota. Jos kaikki epäonnistuvat, siirrytään <embed>-elementtiin.

Ongelma

  • Sinun täytyy muuntaa video moniin eri muotoihin
  • <video>-elementti ei voi läpäistä HTML 4 ja XHTML-todennusta.
  • <embed>-elementti ei voi läpäistä HTML 4 ja XHTML-todennusta.

Huomautus:Ratkaise ongelmat käyttämällä <!DOCTYPE html> (HTML5).

Youku-ratkaisu

Videojen näyttäminen HTML:ssä on yksinkertaisinta tehdä Youku tai muiden videovierailujen avulla.

Jos haluat toistaa videon verkkosivulla, voit ladata videon Youku tai muille videovierailuille ja sitten lisätä HTML-koodin verkkosivullesi videon toistamiseksi:

<embed src="http://player.youku.com/player.php/sid/XMzI2NTc4NTMy/v.swf" 
width="480" height="400" 
type="application/x-shockwave-flash">
</embed>

Kokeile itse

Hyperlinkkien käyttö

Jos verkkosivu sisältää media-tiedostoihin osoittavan hyperlinkin, useimmat selaimet käyttävät "avustavaa sovellusta" tiedoston toistamiseen.

Seuraava koodipala näyttää AVI-tiedostoon osoittavan linkin. Jos käyttäjä napsauttaa linkkiä, selain käynnistää "avustava sovellus", kuten Windows Media Playerin, AVI-tiedoston toistamiseksi:

Esimerkki

<a href="movie.swf">Toista video-tiedosto</a>

Kokeile itse

Kommentti sisennetystä videosta

Kun video sisällytetään verkkosivulle, sitä kutsutaan sisennetyksi videoksi.

Jos aiot käyttää sisennettyä videota web-sovelluksessa, sinun on tiedostettava, että monet pitävät sisennettyä videota ärsyttävänä.

Samalla huomaa, että käyttäjä saattaa olla sulkenut selaimen sisennetyn videon valinnan.

Parhaana neuvana on sisällyttää ne vain silloin, kun käyttäjä haluaa nähdä sisennetyn videon. Esimerkki: käyttäjä tarvitsee nähdä videon ja klikata linkkiä, joka avaa sivun ja aloittaa videon toistamisen.

HTML 4.01 media-tunnisteet

Tunniste Kuvaus
<applet> Ei suositeltu.Määrittelee sisennetyn appletin.
<embed> Ei suositeltu.Määrittelee sisennetyn objektin (sallittu HTML5:ssä).
<object> Määrittelee sisennetyn objektin.
<param> Määrittelee objektin parametrit.

HTML 5 media-tunnisteet

Tunniste Kuvaus
<video> Tunniste määrittelee äänen, kuten musiikin tai muiden ääniraitojen.
<embed> Tunnisteet määrittelevät sisennetyn sisällön, kuten lisäosat.