HTML-video

There are many ways to play video in HTML.

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

Problems, problems, and solutions

Playing video in HTML is not easy!

You need to master a lot of skills to ensure that your video files can play on all browsers (Internet Explorer, Chrome, Firefox, Safari, Opera) and all hardware (PC, Mac, iPad, iPhone).

In this chapter, CodeW3C.com summarizes the problems and solutions for you.

Use the <embed> tag

The <embed> tag is used to embed multimedia elements in an HTML page.

The following HTML code shows a Flash video embedded in a web page:

Esimerkki

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

Kokeile itse

Ongelma

  • HTML4 cannot recognize the <embed> tag. Your page cannot be validated.
  • If the browser does not support Flash, the video cannot be played
  • iPad and iPhone cannot display Flash videos.
  • If you convert the video to another format, it may still not play in all browsers.

Use the <object> tag

The <object> tag is used to embed multimedia elements in an HTML page.

The following HTML snippet shows a Flash video embedded in a web page:

Esimerkki

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

Kokeile itse

Ongelma

  • If the browser does not support Flash, the video cannot be played.
  • iPad and iPhone cannot display Flash videos.
  • If you convert the video to another format, it may still not play in all browsers.

Use the <video> tag

Video on demand (VOD) is a new tag in HTML 5.

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

Seuraava HTML-osa näyttää verkkosivulle upotetun ogg, mp4 tai webm -formaatin 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-tekstiä.
</video>

Kokeile itse

Ongelma

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

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 videota mp4, ogg tai webm -formaatista. 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 -validointia.
  • <embed>-elementti ei voi läpäistä HTML 4 ja XHTML -validointia.

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

Youku-ratkaisu

Videon näyttäminen HTML:ssä on yksinkertaisinta tehdä Youku tai muilla videoviestintäverkkosivustoilla.

Jos haluat toistaa videon verkkosivulla, voit ladata videon Youku tai muille videoviestintäverkkosivustoille 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 sivulla on hyperlinkki media-tiedostoon, useimmat selaimet käyttävät "avustavaa sovellusta" tiedoston toistamiseen.

Seuraava koodinpätkä näyttää AVI-tiedoston viittauksen. Jos käyttäjä napsauttaa tätä 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 verkkosovelluksessa, 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 on, kun käyttäjä tarvitsee nähdä videon ja napsauttaa linkkiä, joka avaa sivun ja aloittaa videon toistamisen.

HTML 4.01 Multimediataulut

Tunniste 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 Multimediataulut

Tunniste Kuvaus
<video> Tunniste määrittää äänen, kuten musiikin tai muiden äänirajojen.
<embed> Tunniste määrittää sisennetyn sisällön, kuten lisäosan.