basics of website design banner photo

HTML

HTML 5

CSS 2.1

CSS 3

Reference

HTML5 <video> Element

The <video> element is used to contain a video player for a video media resource.

<video> Attributes

  • HTML5 GLOBAL ATTRIBUTES
  • src - a URI giving the location of the video.
  • poster - a URI giving the location of an image to display while no video data is available.
  • preload - this attribute can be used by web authors to set whether the video file is preloaded by the browser and can have one of these values:
    1. none - indicates to the browser that video file does not need downloading automatically due to not being needed or to save bandwidth.
    2. metadata - indicates the browser can download the information about the video track such as duration, title etc.
    3. auto - indicates the browser can download the entire track plus metadata as it will be needed.
    4. "" - an empty string - the same as auto.
    5. empty - ie. <video preload> - the same effect as auto.
  • autoplay - the video starts playing automatically if this attribute is present and plays to the end:
    1. autoplay - <video autoplay="autoplay">
    2. "" - an empty string. ie. <video autoplay="">
    3. empty - ie. <video autoplay>
  • muted - used to give the default audio state of the video, can have the following values:
    1. muted - the audio is muted - <video muted="muted">
    2. "" - an empty string. ie. <video muted="">
    3. empty - ie. <video muted>
  • mediagroup - used to link multiple media elements together - a string.
  • loop - same as repeat - the video plays on a loop starting again when it reaches the end. Can have the following values:
    1. loop - <video loop="loop">
    2. "" - an empty string. ie. <video loop="">
    3. empty - ie. <video loop>
  • controls - when set this instructs the browser to supply playback controls - indicates that the designer hasn't included any scripted controls. Can be set as follows:
    1. controls - <video controls="controls">
    2. "" - an empty string. ie. <video controls="">
    3. empty - ie. <video controls>
  • width - the width of the <video> element given in CSS pixels.
  • height - the height of the <video> element given in CSS pixels.

New HTML5 Elements