HTML video

Der er mange måder at afspille video i HTML på.

Example

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

Try it yourself

Problemer, problemer og løsninger

Det er ikke nemt at afspille video i HTML!

Du skal kende mange færdigheder for at sikre, at dine videofiler kan afspilles i alle browsere (Internet Explorer, Chrome, Firefox, Safari, Opera) og på alle hardware (PC, Mac, iPad, iPhone).

I dette kapitel har CodeW3C.com samlet problemer og løsninger for dig.

Brug af <embed>-tagget

Formålet med <embed>-tagget er at indlejre multimedieelementer i en HTML-side.

Nedenstående HTML-kode viser et indlejret Flash-video på en webside:

Example

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

Try it yourself

Problemer

  • HTML4 kan ikke genkende <embed>-tagget. Din side kan ikke valideres.
  • Hvis browseren ikke understøtter Flash, kan videoen ikke afspilles
  • iPad og iPhone kan ikke vise Flash-videoer.
  • Hvis du konverterer videoen til et andet format, kan den stadig ikke afspilles i alle browsere.

Brug af <object>-tagget

Formålet med <object>-tagget er at indlejre multimedieelementer i en HTML-side.

Nedenstående HTML-fragment viser et indlejret Flash-video på en webside:

Example

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

Try it yourself

Problemer

  • Hvis browseren ikke understøtter Flash, kan videoen ikke afspilles.
  • iPad og iPhone kan ikke vise Flash-videoer.
  • Hvis du konverterer videoen til et andet format, kan den stadig ikke afspilles i alle browsere.

Brug af <video>-tagget

Video er en ny tag i HTML 5.

<video>-tagget bruges til at indlejre videoelementer i HTML-sider.

Følgende HTML-fragment viser et indlejret video i og, mp4 eller webm-format på din hjemmeside:

Example

<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" />
Din browser understøtter ikke video-tagget.
</video>

Try it yourself

Problemer

  • Du skal konvertere videoen til mange forskellige formater.
  • <video>-elementet fungerer ikke i gamle browsere.
  • <video>-elementet kan ikke valideres med HTML 4 og XHTML.

Den bedste HTML-løsning

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>

Try it yourself

I det foregående eksempel blev der brugt 4 forskellige videoformater. HTML 5 <video>-elementet forsøger at afspille videoen i en af følgende formater: mp4, og, eller webm. Hvis alle forsøg fejler, falder det tilbage til <embed>-elementet.

Problemer

  • Du skal konvertere videoen til mange forskellige formater
  • <video>-elementet kan ikke valideres med HTML 4 og XHTML.
  • <embed>-elementet kan ikke valideres med HTML 4 og XHTML.

Bemærk:Brug <!DOCTYPE html> (HTML5) for at løse valideringsproblemer.

Youku-løsning

Den nemmeste måde at vise videoer i HTML er ved at bruge videoportaler som Youku.

Hvis du ønsker at afspille videoer på din hjemmeside, kan du uploade videoen til en videoportal som Youku og derefter indsætte HTML-koden på din hjemmeside for at afspille videoen:

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

Try it yourself

Using Hyperlinks

If a web page contains hyperlinks to media files, most browsers will use 'helper applications' to play the files.

The following code snippet shows a link to an AVI file. If the user clicks on the link, the browser will launch an 'helper application', such as Windows Media Player, to play this AVI file:

Example

<a href="movie.swf">Play a video file</a>

Try it yourself

A note about inline video

When video is included in a web page, it is called inline video.

If you plan to use inline video in a web application, you need to be aware that many people find inline video annoying.

At the same time, please note that the user may have already turned off the inline video option in the browser.

Our best advice is to only include them where the user wants to see inline video. A positive example is when the user needs to see a video and click on a link, the page opens and the video plays.

HTML 4.01 Multimedia Tags

Tag Description
<applet> Not recommended.Define embedded applet.
<embed> Not recommended.Define embedded objects. (Allowed in HTML5)
<object> Define embedded objects.
<param> Define object parameters.

HTML 5 Multimedia Tags

Tag Description
<video> Tags define sound, such as music or other audio streams.
<embed> Tags define embedded content, such as plugins.