HTNL5 -- & lt; video & gt;/& lt; audio & gt; tag essay, htnl5 -- audio

HTNL5 -- <video>/<audio> tag, htnl5 -- audio

WHATWG focuses on web forms and applications, while W3C focuses on XHTML 2.0. In 2006, the two sides decided to cooperate to create a new version of the HTML--HTML5.

Rules for HTML5:

• The new features should be based on HTML, CSS, DOM, and JavaScript.
• Reduce the need for external plug-ins (such as Flash)
• Better error handling
• More replace script Markup
• HTML5 should be independent of devices
• Development process should be transparent to the public

New Features

• Canvas elements used for painting
• Video and audio elements used for media playback
• Better support for local offline storage
• New special content elements, such as article, footer, header, nav, section
• New Form controls, such as calendar, date, time, email, url, and search

1 <video> </video> -- video format

Currently, the video element supports three video formats:

Format	IE	Firefox	Opera	Chrome	Safari
Ogg	No	3.5 +	10.5 +	5.0 +	No
MPEG 4	9.0 +	No	No	5.0 +	3.0 +
WebM	No	4.0 +	10.6 +	6.0 +	No

* Ogg = Ogg file with Theora video encoding and Vorbis Audio Encoding

* MPEG4 = MPEG 4 files with H.264 video encoding and AAC audio encoding

* WebM = A WebM file with VP8 video encoding and Vorbis Audio Encoding

General Usage:

<video src='...' controls>

Your browser does not support the video tag.

</video>

* The control attribute controls playback, pause, and volume. The content in the tag is displayed in a browser that does not support video elements.

For browsers

Internet Explorer 8 does not support video elements. In IE 9, video elements of MPEG4 are supported.

To ensure that the video file is applicable to Safari, the video file must be of the MPEG4 type.

The browser uses the first recognizable video format:

1 <video width="xxx" height="xxx" controls="controls">2     <source src="xxx.ogg" type="video/ogg">3     <source src="xxx.mp4" type="video/mp4">4     Your browser does not support the video tag.5 </video>

The video element allows multiple source elements. The source element can be used to link different video files.

<Video> tag attributes

Attribute	Value	Description
Autoplay	Autoplay	Automatic playback
Controls	Controls	Browser control bar
Height	Pixels	Set the height of the video player.
Loop	Loop	Loop playback
Preload	Preload	(Pre-load) If "autoplay" is used, this attribute is ignored.
Poster		Video cover, no picture displayed during playback
Src	Url	The URL of the video to be played.
Width	Pixels	Set the width of the video player.

<Video>-use DOM for control

The video methods, attributes, and events supported by most browsers are listed below:

Method	Attribute	Event
Play ()[Start playing audio/video]	CurrentSrc	Play
Pause ()[Pause the currently played Audio/Video]	CurrentTime	Pause
Load ()[Reload audio/video elements]	VideoWidth	SS
CanPlayType ()[Checks whether the browser can play the specified audio/video type]	VideoHeight	Error
AddTextTrack ()[Add a new text track to audio/video]	Duration	Timeupdate
	Ended	Ended
	Error	Abort
	Paused	Empty
	Muted	Emptied
	Seeking	Waiting
	Volume	Loadedmetadata
	Height
	Width

Note: Only the videoWidth and videoHeight attributes are available immediately. Other attributes are available only after the video metadata has been loaded. Details

Simple Example:

Html:

<Div style = "text-align: center;"> <button onclick = "playPause ()"> play/pause </button> <button onclick = "makeBig () "> large </button> <button onclick =" makeNormal () "> medium </button> <button onclick =" makeSmall () "> small </button> <br/> <video id =" media "width =" 420 "style =" margin-top: 15px; "> <source src ="/example/html5/mov_bbb.mp4 "type =" video/mp4 "/> <source src ="/example/html5/mov_bbb.ogg "type =" video/ ogg "/> Your browser does not support HTML5 video. </video> </div>

Js:

var myVideo=document.getElementById("media");function playPause(){   if (myVideo.paused)      myVideo.play();   else      myVideo.pause(); } function makeBig(){    myVideo.width=560; } function makeSmall(){    myVideo.width=320; } function makeNormal(){    myVideo.width=420; } 

From w3school.com.cn

2 <audio> </audio> -- audio/audio format

Currently, the audio element supports three audio formats:

	IE 9	Firefox 3.5	Opera 10.5	Google Chrome 3.0	Safari 3.0
Ogg Vorbis		√	√	√
MP3	√			√	√
Wav		√	√		√

General Usage

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

For browsers:

An Ogg file for Firefox, Opera, and Chrome browsers.

To ensure that the audio file is applicable to Safari, it must be MP3 or Wav.

Internet Explorer 8 does not support the audio element. In IE 9, support for audio elements is provided.

The audio element allows multiple source elements. The source element can be used to link different audio files. The browser uses the first recognizable format:

1 <audio controls="controls">2   　　<source src="song.ogg" type="audio/ogg">3  　　 <source src="song.mp3" type="audio/mpeg">4     Your browser does not support the audio tag.5 </audio>

<Audio> tag attributes

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.

 

Obtain HTMLVideoElement and HTMLAudioElement objects

Js Code:

1 // audio can directly create object 2 Media = new Audio ("http://www.abc.com/test.mp3") through new; 3 // both audio and video can get object 4 Media = document through tag. getElementById ("media ");

Media methods and attributes:

Both HTMLVideoElement and HTMLAudioElement inherit from HTMLMediaElement

1 // error status 2 Media. error; // null: normal 3 Media. error. code; // 1. user termination 2. network Error 3. decoding error 4. invalid URL 4 5 // network status 6 Media. currentSrc; // return the URL of the current resource 7 Media. src = value; // return or set the URL of the current resource to 8 Media. canPlayType (type); // whether resources in a certain format can be played 9 Media. networkState; // 0. this element is not initialized. normal but not using network 2. downloading data 3. resource 10 Media not found. load (); // reload the resource 11 Media specified by src. buffered; // return the buffered area, TimeRanges 12 Media. preload; // none: Do not preload metadata: pre-load resource information auto: 13 14 // preparation status 15 Media. readyState; // 1: HAVE_NOTHING 2: HAVE_METADATA 3. HAVE_CURRENT_DATA 4. HAVE_FUTURE_DATA 5. HAVE_ENOUGH_DATA 16 Media. seeking; // whether seeking 17 18 // playback status 19 Media. currentTime = value; // The current playback position. The value can change the position by 20 Media. startTime; // It is generally 0. If it is streaming Media or a resource not starting from 0, it is not 0 21 Media. duration; // The length of the current resource. The stream returns an infinite 22 Media. paused; // whether to pause 23 Media. defaultPlaybackRate = value; // The default playback speed. You can set 24 Media. playbackRate = value; // The current playback speed. The setting immediately changes to 25 Media. played; // return the played area, TimeRanges. For details about this object, see figure 26 Media. seekable; // return the region TimeRanges 27 Media that can be seek. ended; // whether to end 28 Media. autoPlay; // whether to automatically play 29 Media. loop; // whether to play 30 Media streams cyclically. play (); // play 31 Media. pause (); // pause 32 33 // control 34 Media. controls; // whether there is a default control bar 35 Media. volume = value; // volume 36 Media. muted = value; // mute 37 38 // TimeRanges (region) object 39 TimeRanges. length; // The number of segments is 40 TimeRanges. start (index) // start position of the index Segment Area 41 TimeRanges. end (index) // end position of the index segment

View Code event:

1 eventTester = function (e) {2 Media. addEventListener (e, function () {3 console. log (new Date ()). getTime (), e); 4}); 5} 6 7 eventTester ("loadstart"); // The client starts to request data 8 eventTester ("progress "); // The client is requesting data 9 eventTester ("suspend"); // 10 eventTester ("abort"); // The client proactively terminates the download (not due to an error ), 11 eventTester ("error"); // error 12 eventTester ("stalled") when requesting data; // eventTester ("play"); // play () 14 eventTester ("pause") is triggered when autoplay starts playing; // pause () triggers 15 eventTester ("loadedmetadata "); // The resource length is 16 eventTester ("loadeddata"); // 17 eventTester ("waiting"); // wait for data, not 18 eventTester ("playing "); // start to play back 19 eventTester ("canplay"); // you can play back the video, but 20 eventTester ("canplaythrough") may be paused due to loading; // you can play back the video, 21 eventTester ("seeking"); // search for 22 eventTester ("seeked"); // search for 23 eventTester ("timeupdate "); // change the playback time to 24 eventTester ("ended"); // end of playing 25 eventTester ("ratechange"); // change the playback speed to 26 eventTester ("durationchange "); // resource Length Change 27 eventTester ("volumechange"); // volume change

View Code

[Go to http://sailinglee.iteye.com/blog/1331204]