HTML video

Der er mange måder at afspille videoer 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 videoer i HTML!

Du skal være fortrolig med 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 spørgsmål og løsninger for dig.

Brug af <embed>-tagget

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

Følgende HTML-kode viser et indlejret Flash-video på websiden:

Example

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

Try it yourself

Problemer

  • HTML4 kan ikke genkende <embed>-tagget. Din side kan ikke godkendes.
  • 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 HTML-sider.

Følgende HTML-segment viser et indlejret Flash-video på websiden:

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 en HTML-side.

Følgende HTML-fragment viser et indlejret video i formatet og webm, der er indlejret i en 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 formaterne mp4, og webm. Hvis det mislykkes, 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 enkleste måde at vise en video i HTML er ved at bruge videoportaler som Youku.

Hvis du ønsker at afspille en video 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 the video and click on a link, the page will open and the video will play.

HTML 4.01 multimedia tags

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

HTML 5 multimedia tags

Tag Description
<video> The tag defines audio, such as music or other audio streams.
<embed> The tag defines embedded content, such as plugins.