Audio & Video

HTML4 == Plugins

  • Silverlight™
  • Quicktime™
  • Flash™
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" 
 codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,16,0" 
 width="320" height="400">
      <param name="movie" value="movie.swf">
      <param name="quality" value="high">
      <param name="menu" value="true">
      <param name="LOOP" value="false">
    </object>

Codecs

CODEC == COmpressor/DECompressor

Audio Example

<audio id="audio" src="sound.ogg" controls></audio>

Ode to IE6

var clip = document.getElementById('audio-clip');
clip.muted = false;
clip.play();
clip.pause();
clip.addEventListener('ended', OnAudioFinished, false);

function OnAudioFinished() {
  audioPlayButton.disabled = false;
  audioPauseButton.disabled = true;
}

Video Example

<video id="video" src="movie.webm" autoplay controls></video>

Nyan Cat from Saranj00n

Hide Native Controls

document.getElementById("video").play();
function MuteUnMute() {
  document.getElementById('mute').value = videoClip.muted ? 'Mute' : 'Unmute';
  videoClip.muted = videoClip.muted ? false : true;
}
  

<audio>

Attributes

  • autoplay
  • preload = none | metadata | auto
  • controls
  • loop
  • mediagroup = string
  • src (required!)
  • muted?
  • buffer?

Children

  • <track>
www.westciv.com

<video>

Attributes

  • autoplay
  • preload = none | metadata | auto
  • controls
  • loop
  • poster
  • height
  • width
  • muted
  • mediagroup = string
  • src (required!)
  • autobuffer?
  • buffer?

Children

  • <track>

<video> example code

<video src="movie.ogg"></video>

<video> example code

<video src="movie.ogg" loop autoplay controls autobuffer 
   preload="metadata" poster="poster.jpg">
   <track kind="caption" src="captions.srt"/>
      Alternative Text explaining content of video
</video>

<video> example code

<video loop autoplay controls autobuffer 
      preload="metadata" poster="poster.jpg">
<source src="movie.ogg"  type='video/ogg; codecs="theora, vorbis"'>
<source src="movie.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
<source src="movie.webm" type='video/webm; codecs="vorbis,vp8"'>
    <track kind="caption" src="captions.srt"/>
</video>

<video> example code

<video loop autoplay controls autobuffer 
      preload="metadata" poster="poster.jpg">
<source src="movie.ogg"  type='video/ogg; codecs="theora, vorbis"'>
<source src="movie.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
<source src="movie.webm" type='video/webm; codecs="vorbis,vp8"'>
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,16,0" width="320" height="400">
      <param name="movie" value="movie.swf">
      <param name="quality" value="high">
      <param name="menu" value="true">
      <param name="LOOP" value="false">
        What browser are you using?
    </object>
    <track kind="caption" src="captions.srt"/>
</video>
www.westciv.com

<track>

<track>

  • child of a <video> or <audio>
  • links to a timed track or time-based data.
  • kind = subtitles| captions| descriptions| chapters | metadata,
  • Accessibility
<track kind=captions src=captions.srt>

Video/Audio Codecs And Browser Support

Feature Chrome Firefox IE Opera Safari
Basic Support 3 3.5 9 10.50 3.1
Audio
WAVE, PCM   YES     YES
WebM, Vorbis YES YES 4.0   YES If installed
Ogg, Vorbis YES YES   YES If installed
MPEG 4, MP3, AAC     YES   YES
Video
WebM, VP8, Vorbis YES YES 4.0 If installed YES If installed
Ogg, Theora, Vorbis YES YES   YES If installed
MPEG 4, H.264, MP3     YES   YES

Events

play
fired when the media is played
pause
fired when the media is paused
timeupdate
fired when the current playback position has changed
volumechange
fired when the volume of the media has changed
ratechange
fired when the playback rate of the media has changed
ended
fired when the media has finished playing
seeking
fired when the end user is seeking in the media
seeked
fired when the seeking attribute has changed to fals

Full list of Events

Fired on media elements

  • loadstart
  • progress
  • suspend
  • abort
  • error
  • emptied
  • stalled
  • loadedmetadata
  • loadeddata
  • canplay
  • canplaythrough
  • playing
  • waiting
  • seeking
  • seeked
  • ended
  • durationchange
  • timeupdate
  • play
  • pause
  • ratechange
  • volumechange

Fired on media controllers:

  • emptied
  • loadedmetadata
  • loadeddata
  • canplay
  • canplaythrough
  • playing
  • ended
  • waiting
  • ended
  • durationchange
  • timeupdate
  • play
  • pause
  • ratechange
  • volumechange

Methods & Properties

play()
Play the media
pause()
pause the media
canPlayType()
Check if browser can play media resource type
Use to capacity check
document.getElementById("audio").muted = false;
document.getElementById("video").play(); 

Controller Methods and Properties

controller = new MediaController()

Returns a new MediaController object.

media.controller [ = controller ]

Returns the current MediaController for the media element, if any; returns null otherwise. Can be set, to set an explicit MediaController. Doing so removes the mediagroup attribute, if any.

buffered

Returns a TimeRanges object that represents the intersection of the time ranges for which the user agent has all relevant media data for all the slaved media elements.

seekable

Returns a TimeRanges object that represents the intersection of the time ranges into which the user agent can seek for all the slaved media elements.

duration

Returns the difference between the earliest playable moment and the latest playable moment (not considering whether the data in question is actually buffered or directly seekable, but not including time in the future for infinite streams). Will return zero if there is no media.

currentTime [ = value ]

Returns the current playback position, in seconds, as a position between zero time and the current duration. Can be set, to seek to the given time.

paused

Returns true if playback is paused; false otherwise. When this attribute is true, any media element slaved to this controller will be stopped.

play()

Sets the paused attribute to false.

pause()

Sets the paused attribute to true.

played

Returns a TimeRanges object that represents the union of the time ranges in all the slaved media elements that have been played.

defaultPlaybackRate [ = value ]

Returns the default rate of playback. Can be set, to change the default rate of playback. This default rate has no direct effect on playback, but if the user switches to a fast-forward mode, when they return to the normal playback mode the playbackRate will return to this default rate.

playbackRate [ = value ]

Returns the current rate of playback. Can be set, to change the rate of playback.

volume [ = value ]

Returns the current playback volume multiplier, as a number in the range 0.0 to 1.0, where 0.0 is the quietest and 1.0 the loudest. Throws an IndexSizeError if the new value is not in the range 0.0 .. 1.0.

muted [ = boolean ]

Returns true if all audio is muted (regardless of other attributes either on the controller or on any media elements slaved to this controller), and false otherwise. Can be set, to change whether the audio is muted or not.

Customizing Audio/Video Controls

var audioClip = document.getElementById('audio-clip');
var audioPlayButton = document.getElementById('audio-play-button');
var audioPauseButton = document.getElementById('audio-pause-button');
audioClip.addEventListener('ended', OnAudioFinished, false);

function PlayAudio() {
  audioClip.play();
  audioPlayButton.disabled = true;
  audioPauseButton.disabled = false;
}
function PauseAudio() {
  audioClip.pause();
  audioPlayButton.disabled = false;
  audioPauseButton.disabled = true;
}
function MuteUnMuteAudio() {
  document.getElementById('audio-mute').value = audioClip.muted ? 'Mute' : 'Unmute';
  audioClip.muted = audioClip.muted ? false : true;
}
function OnAudioFinished() {
  audioPlayButton.disabled = false;
  audioPauseButton.disabled = true;
}

<canvas>

Next ➹