HTML-video

HTMLissä 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

HTMLissä videon toistaminen ei ole helppoa!

Sinun on hallittava suuri määrä taitoja, jotta varmistetaan, että videoasi voidaan toistaa kaikissa selaimissa (Internet Explorer, Chrome, Firefox, Safari, Opera) ja kaikilla laitteilla (PC, Mac, iPad, iPhone).

Tässä luvussa CodeW3C.com kootaan ongelmat ja ratkaisut.

Käytä <embed>-merkkiä

<embed>-merkin tehtävänä on sisällyttää multimediatuotteita HTML-sivulle.

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

Esimerkki

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

Kokeile itse

Ongelma

  • HTML4 ei tunnista <embed>-merkkiä. Sivusi ei voi läpäistä tarkistusta.
  • Jos selain ei tue Flashia, videoa ei voida toistaa
  • iPad ja iPhone eivät voi näyttää Flash-videota.
  • Jos muutat videota toiseen muotoon, sitä ei välttämättä voida toistaa kaikissa selaimissa.

Käytä <object>-merkkiä

<object>-merkin tehtävänä on sisällyttää multimediatuotteita HTML-sivulle.

Seuraava HTML-osa näyttää Flash-videon, joka on sisällytetty verkkosivulle:

Esimerkki

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

Kokeile itse

Ongelma

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

Käytä <video>-merkkiä

HTML5:ssa uusi merkki.

<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

Simpiein tapa näyttää video HTML:ssä on käyttää Youku tai muita videovierailuja.

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

<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 sivulla on linkki media-tiedostoon, useimmat selaimet käyttävät "avustavaa sovellusta" tiedoston toistamiseen.

Seuraava koodinpätkä näyttää AVI-tiedoston osoitteen. 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 tiedostoa</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 täytyy olla tietoinen siitä, että monet pitävät sisennettyä videota ärsyttävänä.

Huomaa myös, että käyttäjä saattaa jo olla sulkenut selaimen sisennetyn videon asetuksen.

Parhaan suosituksenamme 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 jota linkkiä, joka avaa sivun ja toistaa videon.

HTML 4.01 Multimediatagit

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

HTML 5 Multimediatagit

Tagi Kuvaus
<video> Määrittää äänen, kuten musiikin tai muiden äänirajojen.
<embed> Määrittää sisennetyn sisällön, kuten lisäosat.