HTML5 media (audio/video), html5 Media Audio and Video

HTML5 media (audio/video), html5 Media Audio and Video
Abstract:

Before HTML5 appeared, most web media was implemented through Flash. This method causes slow file loading and affects website performance. It is difficult to develop, maintain, and expand easily. As a result, HTML5 began to support the media function. HTML5 DOM provides methods, attributes, and events for <audio> and <video> elements.

Browser:

You have supported audio and video tags since IE9.

Audio:

<Audio> tags define sounds, such as music or other audio streams.

Audio Format:

	IE9	Firefox3.5	Opera10.5	Chrome3.0	Safari3.0
Ogg Vorbis		√	√	√
Mp3	√			√	√
Wav		√	√		√

 

Instance:

<Audio src = "song.ogg" controls = "controls">
Your browser does not support the audio tag.
</Audio>

If the browser does not support the audio tag, the text content is displayed. To support various browsers, you can load audio files in multiple formats, and the browser will play the audio files recognized by itself.

<Audio controls> <source src = "song.ogg" type = "audio/ogg"> <source src = "song.mp3" type = "audio/mpeg"> your browser does not support audio label. </Audio>

Attribute:

Attribute	Value	Description
Autoplay	Autoplay	If this attribute appears, the audio will be played immediately after it is ready.
Controls	Controls	If this attribute is displayed, the control, such as the play button, is displayed to the user.
Loop	Loop	If this attribute is displayed, the video is played again whenever the audio ends.
Preload	Preload	If this attribute is displayed, the audio is loaded when the page is loaded and ready for playing. If "autoplay" is used, this attribute is ignored.
Src	Url	The URL of the audio to be played.

Video:

<Video> the tag defines the video file.

Video Format:

	IE9	Firefox3.5	Opera10.5	Chrome5.0	Safari3.0
Ogg		√	√	√
MPEG 4	√			√	√
WebM		√ (4.0)	√ (10.6)	√ (6.0)

Instance:

<Video src = "movie.ogg" controls = "controls">
Your browser does not support video tags.
</Video>

If the browser does not support the audio tag, the text content is displayed. To support various browsers, you can load video files in multiple formats, and the browser will play the recognized video files.

<Video controls = "controls" width = "500" height = "500" autoplay = "autoplay" loop = "loop" poster = "PLMM.jpg">
<Source src = "movie.ogg" type = "video/ogg"/>
<Source src = "movie. webm" type = "video/webm"/>
Your browser does not support video tags.
</Video>

Attribute:

Attribute	Value	Description
Autoplay	Autoplay	If this attribute appears, the video will be played immediately after it is ready.
Controls	Controls	If this attribute is displayed, the control, such as the play button, is displayed to the user.
Height	Pixels	Set the height of the video player.
Loop	Loop	If this attribute is displayed, the media file starts playing again after being played.
Preload	Preload	If this attribute is displayed, the video is loaded when the page is loaded and ready for playing. If "autoplay" is used, this attribute is ignored.
Src	Url	The URL of the video to be played.
Width	Pixels	Set the width of the video player.

Global attributes are also supported.

Event:

Attribute	Value	Description
Onabort	Script	The script that runs when you exit.
Oncanplay	Script	The script that runs when the file is ready to start playing (when the buffer is enough to start ).
Oncanplaythrough	Script	The script that runs when the media can stop playing to the end without buffering.
Ondurationchange	Script	The script that runs when the length of the media changes.
Onemptied	Script	Scripts run when a fault occurs and files are suddenly unavailable (for example, the connection is accidentally disconnected ).
Onended	Script	Scripts that run when the media has reached the end (messages such as "thank you for watching" can be sent ).
Onerror	Script	The script that runs when an error occurs during file loading.
Onloadeddata	Script	The script that runs when media data is loaded.
Onloadedmetadata	Script	The script that runs when metadata (such as resolution and duration) is loaded.
Onloadstart	Script	A script that runs before the file is loaded and no data is actually loaded.
Onpause	Script	The script that runs when the media is paused by the user or program.
Onplay	Script	The script that runs when the media is ready to start playing.
Onplaying	Script	The script that runs when the media starts playing.
Onprogress	Script	The script that runs when the browser is retrieving media data.
Onratechange	Script	The script that runs when the playback speed changes (for example, when the user switches to the slow action or fast forward mode ).
Onreadystatechange	Script	The script that runs when the readiness status changes (the readiness status monitors the status of media data ).
Onseeked	Script	The script that runs when the seeking attribute is set to false (indicating that the position has ended.
Onseeking	Script	The script that runs when the seeking attribute is set to true (indicating that the location is active.
Onstalled	Script	Scripts that run when the Browser fails to retrieve media data for whatever reason.
Onsuspend	Script	The script that runs when retrieving media data is terminated for whatever reason before media data is fully loaded.
Ontimeupdate	Script	Scripts run when the playback position changes (for example, when the user quickly enters a different position in the media.
Onvolumechange	Script	The script that runs when the volume changes (including the volume is set to mute.
Onwaiting	Script	When the media has stopped playing but intends to continue playing (for example, when the media has paused buffering more data), run the script

Demo:

The following example redefined the video pause, playback, fast forward, and fast return methods. For more information, see

1 <! Doctype html> 2 
 
The effect is as follows:

 
Appendix:
 
HTML5 Audio/Video Method

 

 
  
 
   
 
    
Method
 
    
Description
 
   
 
   
 
    
AddTextTrack ()
 
    
Add a new text track to the audio/video
 
   
 
   
 
    
CanPlayType ()
 
    
Checks whether the browser can play the specified audio/video type.
 
   
 
   
 
    
Load ()
 
    
Reload audio/video elements
 
   
 
   
 
    
Play ()
 
    
Start playing audio/video
 
   
 
   
 
    
Pause ()
 
    
Pause the currently played audio/video
 
   
 
  

 
HTML5 Audio/Video attributes

 

 
  
 
   
 
    
Attribute
 
    
Description
 
   
 
   
 
    
AudioTracks
 
    
Returns the AudioTrackList object indicating the available audio tracks.
 
   
 
   
 
    
Autoplay
 
    
Sets or returns whether to play audio/video immediately after loading.
 
   
 
   
 
    
Buffered
 
    
Returns the TimeRanges object indicating the buffer of the audio/video.
 
   
 
   
 
    
Controller
 
    
Returns the MediaController object that represents the current media controller of the audio/video.
 
   
 
   
 
    
Controls
 
    
Sets or returns whether to display audio/video controls (such as playing/pausing)
 
   
 
   
 
    
CrossOrigin
 
    
Set or return CORS settings for Audio/Video
 
   
 
   
 
    
CurrentSrc
 
    
Returns the URL of the current audio/video.
 
   
 
   
 
    
CurrentTime
 
    
Set or return the current playback position in the audio/video (in seconds)
 
   
 
   
 
    
DefaultMuted
 
    
Sets or returns whether the audio/video is muted by default.
 
   
 
   
 
    
DefaultPlaybackRate
 
    
Sets or returns the default playback speed for audio/video.
 
   
 
   
 
    
Duration
 
    
Returns the length of the current audio/video in seconds)
 
   
 
   
 
    
Ended
 
    
Returns whether the audio/video playback has ended.
 
   
 
   
 
    
Error
 
    
Returns the MediaError object indicating the audio/video error status.
 
   
 
   
 
    
Loop
 
    
Set or return whether the audio/video should be played again at the end
 
   
 
   
 
    
MediaGroup
 
    
Sets or returns the combination of audio/video (used to connect multiple audio/video elements)
 
   
 
   
 
    
Muted
 
    
Sets or returns whether the audio/video is muted.
 
   
 
   
 
    
NetworkState
 
    
Returns the current network status of the audio/video.
 
   
 
   
 
    
Paused
 
    
Sets or returns whether the audio/video is paused.
 
   
 
   
 
    
PlaybackRate
 
    
Sets or returns the playback speed of audio/video.
 
   
 
   
 
    
Played
 
    
Returns the TimeRanges object indicating that the audio/video has been played.
 
   
 
   
 
    
Preload
 
    
Set or return whether the audio/video should be loaded after the page is loaded
 
   
 
   
 
    
ReadyState
 
    
Returns the current ready status of the audio/video.
 
   
 
   
 
    
Seekable
 
    
Returns the TimeRanges object that represents the addressable part of the audio/video.
 
   
 
   
 
    
Seeking
 
    
Returns whether the user is searching for audio/video.
 
   
 
   
 
    
Src
 
    
Sets or returns the current source of the audio/video element.
 
   
 
   
 
    
StartDate
 
    
Returns the Date object indicating the current time offset.
 
   
 
   
 
    
TextTracks
 
    
Returns the TextTrackList object indicating available text tracks.
 
   
 
   
 
    
VideoTracks
 
    
Returns the VideoTrackList object indicating available video tracks.
 
   
 
   
 
    
Volume
 
    
Set or return the audio/video volume
 
   
 
  

 
HTML5 Audio/Video events

 

 
  
 
   
 
    
Event
 
    
Description
 
   
 
   
 
    
Abort
 
    
When audio/video loading is abandoned
 
   
 
   
 
    
Canplay
 
    
When the browser can play audio/video
 
   
 
   
 
    
Canplaythrough
 
    
When the browser can pause without buffering
 
   
 
   
 
    
Durationchange
 
    
When the duration of the audio/video has changed
 
   
 
   
 
    
Emptied
 
    
When the current playlist is empty
 
   
 
   
 
    
Ended
 
    
When the current playlist has ended
 
   
 
   
 
    
Error
 
    
When an error occurs during audio/video Loading
 
   
 
   
 
    
Loadeddata
 
    
When the browser has loaded the current frame of the audio/video
 
   
 
   
 
    
Loadedmetadata
 
    
When the browser has loaded the metadata of the audio/video
 
   
 
   
 
    
Loadstart
 
    
When the browser starts searching for Audio/Video
 
   
 
   
 
    
Pause
 
    
When the audio/video is paused
 
   
 
   
 
    
Play
 
    
When the audio/video has started or is no longer paused
 
   
 
   
 
    
Playing
 
    
When the audio/video is paused or stopped due to buffering, It is ready.
 
   
 
   
 
    
SS
 
    
When the browser is downloading audio/video
 
   
 
   
 
    
Ratechange
 
    
When the playback speed of the audio/video has changed
 
   
 
   
 
    
Seeked
 
    
When the user has moved/jumped to a new location in the audio/video
 
   
 
   
 
    
Seeking
 
    
When the user starts to move/jump to a new location in the audio/video
 
   
 
   
 
    
Stalled
 
    
When the browser tries to obtain media data but the data is unavailable
 
   
 
   
 
    
Suspend
 
    
When the browser deliberately does not obtain media data
 
   
 
   
 
    
Timeupdate
 
    
When the current playback position has been changed
 
   
 
   
 
    
Volumechange
 
    
When the volume has changed
 
   
 
   
 
    
Waiting
 
    
When the video stops due to the need to buffer the next frame