HTML5 video Player <video> and audio player <audio> usage-

The new tags audio and video introduced in HTML5 implement native HTML support for video playback and audio playback. With this native HTML5 video player, we no longer need flash technology, the video and audio can be directly embedded into the webpage. HTML5 Video PlayerAnd audio player usage

The new tag andHTML provides native support for video playback and audio playback. With this native HTML5 video player/audio player, we no longer need flash technology, however, videos and audios can be directly embedded into webpages.

How to embed video and audio

The method for embedding HTML5 audio players and video players in webpages is very simple:

 Your browser does not support thevideoelement.

The preceding example shows how to play a video file and displays the video playback control button.

The following example shows how to embed audio in an HTML webpage:

	

		Your browser does not support theaudioelement.
	

The src attribute can be filled with an audio/video URL or a local file.

	

		Your browser does not support theaudioelement
	

AndThe meaning of the control attribute on the two tags:

• Controls: displays the control bar and control button of the standard HTML5 video/audio player.

• Autoplay: Enables automatic playback of files.

• Loop: loop the file.

Here, the preload attribute is used to cache large-volume files. It has three optional values:

• "None" does not cache

• "Auto" cache

• "Metadata" only caches object metadata

To be compatible with the support of various browsers for different media types, we can use multipleElement to provide multiple different media types. For example:

 Your browser does not support thevideoelement.

A browser that supports Ogg video streams can play Ogg files. If not, you can play MPEG-4 files. Check the support of various browsers for various media types.

We can also specify the decoder (codecs) used for playback. This allows the browser to more accurately play the provided video:

 Your browser does not support thevideoelement.

We have specified that the Dirac and Speex decoder must be used for this video. If the browser supports the Ogg format but does not specify a decoder, the video will not be loaded.

If the type attribute is not provided, the browser will ask the server for the media type to see if the media type is supported. If not, the browser will check the next source attribute.

Use JavaScript to control video/audio playback

Once a video file is correctly embedded into an HTML webpage, we can use JavaScript to control its part and obtain its playback information. For example, use JavaScript to start video playback:

var v = document.getElementsByTagName("video")[0];v.play();

You can use JavaScript to control the playback, pause, fast forward, rewind, and volume of an HTML5 video player.

	PlayPauseDecrease volumeIncrease volume

Stop downloading video files

Although we can use the pause () method to stop playing the video file, the browser does not stop downloading the media file unless it reaches a certain cache volume.

The following describes how to stop a browser from downloading video files:

var mediaElement = document.getElementById("myMediaElementID");
mediaElement.pause();
mediaElement.src='';
//or
mediaElement.removeAttribute("src");

By deleting the src attribute (or setting it to a null value), you can stop network download of files.

Set the playback Time Point Location

We can specify that the video starts playing from a certain minute to a certain second, which is achieved by setting the currentTime attribute.

We can use the seekable attribute to obtain a valid video playback time range. It returns a TimeRanges object, which can tell you the effective start time and end time.

var mediaElement = document.getElementById ('mediaElementID');
mediaElement.seekable.start (0); // returns start time (seconds)
mediaElement.seekable.end (0); // returns the end time (seconds)
mediaElement.currentTime = 122; // positioned to play at 122nd second
mediaElement.played.end (0); // returns the length of time (seconds) played

Set the playing range

When a video or audio file is embedded in a webpageThe element allows us to provide additional information to specify the playing time range. The method is to follow the ("#") format information behind the media file.

Its syntax is as follows:

# T = [start time] [, end time]

The time format can be in seconds or in the format of "hour: minute: Second" (for example, 2:05:01 ). /P>

Example:

Www.website.com/video.ogg?t=10, 20

Specifies that the video starts playing in 10 seconds and ends in 20 seconds.

Www.website.com/video.ogg?t=,10.5

Specifies that the video is played from the start to 10.5 seconds.

Www.website.com/video.oggw.tsung

Specifies that the video is played for 2 hours.

Www.website.com/video.ogg?t=60

Specifies that the video starts to play and ends after 60th seconds.

Set the video cover (poster parameter)

When the video is not automatically played, in some browsers, the default UI of the video before playback is blank, Which is meaningless. We can set a cover for the video, use a relatively representative picture in the video as the video cover. Set the video cover parameter to poster:

 Your browser does not support thevideoelement.

Remedy for video loading errors

Sometimes the video resources will expire, load will fail, or the browser will not be able to decode the current video format. In this case, we should take remedial measures to replace the current video resource address, or use other measures to remedy the problem, such as replacing the video object with an image. We can use JavaScript to listen to the "error" event during video loading, for example, for the following video resources:

 

	Click image to play a video demo of dynamic app search

We use the following js Code for remediation:

var v = document.querySelector('video'),
    sources = v.querySelectorAll('source'),
    lastsource = sources[sources.length-1];
lastsource.addEventListener('error', function(ev) {
  var d = document.createElement('p');
  d.innerHTML = v.innerHTML;
  v.parentNode.replaceChild(d, v);
}, false);

The above is the HTML5 video player.For more information about the usage of the audio player, see the PHP Chinese website (www.php1.cn )!