This article mainly explains the built-in and elements in HTML5, which can be easily embedded into multimedia pages.
Embedded Media
It is very convenient to use HTML5 to write web pages and embed media in your web pages:
Your browser does not support the video element.
This example is to load a video in a webpage. Here is an example of embedding audio in your HTML document:
Your browser does not support the audio element.
The src attribute can be the remote URL address of an audio file or the local address of your website.
Your browser does not support the audio element
This code example uses the attributes of the element:
Controls: Whether to display the audio standard HTML5 control on the web page. Autoplay: whether to automatically play loop: the number of cycles, which is only played once by default, is set to a negative number for infinite cycles.
The preload attribute is used to buffer media files and provides three parameters.
"None" does not buffer files "auto" buffers the media file "metadata" buffers only the metadata for the file
Multiple source files can use components to provide provisions for encoding video or audio in different formats in different browsers. For example:
Your browser does not support the video element.
This ogg file needs the browser to support Ogg format. If the browser does not support ogg, the browser uses MPEG-4 files. See Media Format Support for Audio and Video Elements in Different Browsers.
You can also specify the media file requirements of the codec; This allows browsers to make more informed decisions:
Your browser does not support the video element.
Here, the video we specify uses Dirac and Speedx codecs. If the browser supports ogg, but no codec is specified, the video will not be loaded.
If the type attribute is not specified, the media type can be retrieved from the server and viewed by the browser. If it is not recognized, the next file source will be checked. If the specified source element is unavailable, an error event will be sent to the video element.
Control the play of media
Once you use new elements for media embedded in your HTML document, you can programmatically control them from JavaScript code. For example, to start (or stop) playback, you can do this:
var myVideo = document.getElementsByTagName("video")[0]; v.play();
The first line of code obtains the video element, and the second line of code controls its playback.
Control an HTML5 audio player to play, pause, increase and decrease the volume is directly using some JavaScript.
Play the AudioPause the AudioIncrease VolumeDecrease Volume
Stop Media Download
While stopping media playback is easy to call the pause () method of the element, and the browser will continue to download the media to the media element settings through garbage collection.
Here is a trick to stop a download:
var mediaElement = document.getElementById("myMediaElementID"); mediaElement.pause(); mediaElement.src=;// ormediaElement.removeAttribute("src");
By deleting the src attribute of the media element (or setting it to an empty string, which may depend on the browser), you remove the component's internal decoder, which stops the network download.
Set playback time
The media file supports providing the current playing position, which is achieved by setting the value of the media file playing time. It is a simple setting.
You can use the searchable attribute of an element to determine the range of currently available media. This is the listening time range of timeranges of an object returned:
var mediaElement = document.getElementById(mediaElementID); mediaElement.seekable.start();// Returns the starting time (in seconds)mediaElement.seekable.end();// Returns the ending time (in seconds)mediaElement.currentTime =122;// Seek to 122 secondsmediaElement.played.end();// Returns the number of seconds the browser has played
Specify playback range
When the URI of the specified media is and, you can choose to include additional information to specify the part of the media to play. A hash tag # is attached for this purpose, followed by the description of the media fragment.
One is to use the time range specified by the syntax:
#t=[starttime][,endtime]
Time can be specified as a number of seconds (as a floating point value) or as a colon of an hour/minute/second interval (such as 2:05:012 hours, 5 minutes, 1 second). Several examples:
//www.wenjiangs.com/wp-content/uploads/madagascar3.mp4#t=10 ,20Specifies that the video should play the range 10 seconds through 20 seconds. Specifies that the video should play from the beginning through 10.5 seconds. //www.wenjiangs.com/wp-content/uploads/madagascar3.mp4#t= ,02:00:00Specifies that the video should play from the beginning through two hours. Specifies that the video should start playing at 60 seconds and play through the end of the video.
The part of the media element's URI specification playing range is added to Gecko 9.0. At this time, this is the only part of Gecko implemented by the media element's URI specification. It can only be used to specify the source of the media element, not in the address bar.
Alternatives
HTML includes, for example, the start tag and end tag of media elements are handled by media that the browser does not support HTML5. You can use this fact to provide alternative media for browsers.
This section provides two alternatives to video. In each case, if the browser supports HTML5 video, HTML5 playback mode will be used. If HTML5 video is not supported, other compatibility schemes will be used instead.
Using Flash
You can play movies in Flash format when the element does not support Flash:
Please note that you should not include an object tag that is more compatible than other Internet Explorer browsers.
Using Java Applet to Play OGG Format Video
There is no so-called Java Applet, and the video that can be used plays OGG format. The fallback in the browser is that there is special Java support, which supports HTML5 video
You need to install Java to play this file.
If you do not create a sub element element of the cutting object, such as the handle of a video device such as Firefox v3.5 or above, but Java natively does not install an incorrect notification to users, they will need to install a plug-in to view the content page.
error handling
Starting with Gecko 2.0, error handling is the latest version of the modified HTML5 specification matching. The opposite error event is dispatched to the media element itself, which is now transported to the corresponding error generating source child element.
This allows you to discover which resources failed to load, which may be useful. Consider this HTML:
Since Firefox doesnt support MP4 and 3GP due to their patent-encumbered nature, the elements with the IDs "mp4src" and "3gpsrc" will receive error events before the Ogg resource is loaded. The sources are tried in the order in which they appear, and once one loads successfully, the remaining sources arent tried at all.
Passive loading during detection
To detect that all child elements have failed to load, check the value of the media elements networkState attribute. If this is HTMLMediaElement. NETWORKNOSOURCE, you know that all the sources failed to load.
If at that point you add another source by inserting a new element as a child of the media element, Gecko attempts to load the specified resource.
No source can decode when displaying content
Another way to show the fallback content of a video when none of the sources could be decoded in the current browser is to add an error handler on the last source element. Then you can replace the video with its fallback content:
Click image to play a video demo of dynamic app search
var v = document.querySelector(video),sources = v.querySelectorAll(source),lastsource = sources[sources.length-1]; lastsource.addEventListener(error, function(ev){var d = document.createElement(div);d.innerHTML = v.innerHTML;v.parentNode.replaceChild(d, v);}, false);
