HTML5 Audio and video tags

In previous versions of HTML5, if you wanted to insert audio and video into a webpage, you would have to install a plugin, such as the most common flash plugin. A lot of people in the first installation of a browser will encounter the browser is recommended to install Flash plugin, on the mobile side as well. If you want to watch video on the phone must install Flash plug-in, but the phone itself memory is very small this undoubtedly increased the mobile phone processor del pressure so Apple in 2007 years after the Xuancheng of any device will no longer support Flash plug-in, not on Android also followed, Then the HTML tag is used instead.

Inserting a video tag in HTML

<src= ' movie.webm '></video>

Voedo tag is a double label, as with all HTML tags have many properties, SRC is the most basic attribute of the introduction of the video address, the example of the video address format is WEBM, then the HTML support which video format?

• OGG = browser supported by ogg file with Theora video encoded +vorbis audio encoding: F, C, O
• Mepg4= supported browsers for MPEG4 files with H. C Video encoding +AAC audio encoding: S, D
• Webm= supported browsers with WebM format with VP8 video encoding +vorbis audio encoding: I, F, C, O

It seems that which browser supports which format is not uniform, we have to write a so that all the browsers that support HTML5 label display the code needs to use one of its child tag source to supplement the example as follows

<Video>    <Sourcesrc= "MOVIE.WEBM"type= "VIDEO/WEBM" >    <Sourcesrc= "Movie.ogg"type= "Video/ogg" >    <Sourcesrc= "Movie.mp4"type= "Video/mp4" ></Video>

This is good, put three different formats of video together so all the support HTML5 browsing will start from the first to find the format you know, but this is only for the browser that supports HTML5 that is not supported for IE9 browser will display blank, So we're going to have to tell users that this place is a video tag

<Video>    <Sourcesrc= "MOVIE.WEBM"type= "VIDEO/WEBM" >    <Sourcesrc= "Movie.ogg"type= "Video/ogg" >    <Sourcesrc= "Movie.mp4"type= "Video/mp4" >your browser version is too low to support HTML5 video tags</Video>

This will be displayed in browsers that do not support html5video tags, reminding users to change their browsers or upgrade their browsers.

You should consider more complex usage of the video tag when it is displayed properly, and here are the other properties:

Property	Value	Describe
Autoplay	Autoplay	Video Ready Auto Play
Controls	Controls	To display the playback controls to the user
Width	Pixels (pixels)	Set the width of the player
Height	Pixels (pixels)	Set player height
Loop	Loop	Play back to play the video, loop
Preload	Proload	Whether to play again after loading
Src	Url	Video URL Address
Poster	Imgurl	Loading a picture of a waiting picture
Autobuffer	Autobuffer	Set to browser buffering mode, do not set autoply only valid

The API is included in HTML5, so the video tag in JavaScript also has a lot of properties and methods of the APIs provided below is detailed:

Method	Description
Addtexttrack ()	Add a new text track to audio/video
Canplaytype ()	Detects if the browser can play the specified audio/video type
Load ()	Reload Audio/Video elements
Play ()	Start playing audio/video
Pause ()	Pauses the currently playing audio/video

Properties	Description
Audiotracks	Returns the Audiotracklist object that represents the available audio track
AutoPlay	Sets or returns whether audio/video is played after loading is complete
Buffered	Returns the Timeranges object that represents the buffered portion of the audio/video
Controller	Returns the Mediacontroller object that represents the current media controller for audio/video
Controls	Sets or returns whether the audio/video display controls (such as play/pause, etc.)
Crossorigin	Set or return the CORS settings for audio/video
Currentsrc	Returns the current audio/video URL
CurrentTime	Sets or returns the current playback position in the audio/video (in seconds)
defaultmuted	Sets or returns whether 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 that represents the audio/video error status
Loop	Sets or returns whether audio/video should be played back at the end
MediaGroup	Sets or returns the combination of audio/video (used to connect multiple audio/video elements)
Muted	Sets or returns whether audio/video is muted
Networkstate	Returns the current network status of audio/video
Paused	Sets or returns whether audio/video is paused
Playbackrate	Sets or returns the speed of audio/video playback
Played	Returns the Timeranges object that represents the audio/video played part
Preload	Sets or returns whether audio/video should be loaded in a page-loaded backward line
ReadyState	Returns the current ready state of audio/video
Seekable	Returns the Timeranges object that represents the audio/video addressable section
Seeking	Returns whether the user is looking in audio/video
Src	Sets or returns the current source of an audio/video element
StartDate	Returns a Date object that represents the current time offset
Texttracks	Returns a Texttracklist object that represents the available text track
Videotracks	Returns a Videotracklist object that represents the available video tracks
Volume	Sets or returns the audio/video volume

Events	Description
Abort	When the audio/video load has been discarded
Canplay	When the browser can play audio/video
Canplaythrough	When the browser can play without buffering
Durationchange	When the length 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 audio/video
Loadedmetadata	When the browser has loaded audio/video metadata
Loadstart	When the browser starts looking for audio/video
Pause	When audio/video is paused
Play	When audio/video has started or is no longer paused
Playing	When the audio/video is ready after it has been paused or stopped due to buffering
Progress	When the browser is downloading audio/video
Ratechange	When the audio/video playback speed has changed
seeked	When the user has moved/jumped to a new location in audio/video
Seeking	When the user starts to move/jump to a new location in the audio/video
Stalled	When the browser tries to get media data, but the data is not available
Suspend	When the browser deliberately does not get media data
Timeupdate	When the current playback position has changed
Volumechange	When the volume has changed
Waiting	When the video stops because it needs to buffer the next frame

HTML5 Audio and video tags