HTML5 Multimedia-related Api---video

In HTML5, there are two additional elements---the video element and the audio element, which is dedicated to playing videos or movies on the network, while the audio element is dedicated to playing audio data on the network.

Let's take a look at the relevant knowledge points of the video element first.

One: HTML5 in the Video label Support 3 a popular video format:

1,Ogg = Ogg file with Theora video encoding and Vorbis audio coding;

2,MPEG4 = MPEG 4 files with H.264 video encoding and AAC audio coding;

3,WebM = WebM file with VP8 video encoding and Vorbis audio encoding.

Browser support: safari3+,firefox4+,opera10+,chrome3+,ie9+ and so on.

But we know that a lot of video on the network is not the above three formats, most of the FLV format or WAV format, and so on, if we use this format directly, then in the standard browser is not supported in the use of videos, so now we need to convert to HTML5 support format, We can download a conversion format tool on the Internet conversion, I now download is: Freemake Video Converter Download address is: http://www.freemake.com/free_video_converter/the following interface

The conversion will automatically survive the three formats supported in HTML5, and then we can use this on the page:

<video id=xx Controls width=640 height=360 autoplay> <source "src=" A/A.OGV "type="
    Theora, Vorbis "/> <source src=" A/A.WEBM "type=" VIDEO/WEBM "
    >
    <source src=" A/a.mp4 "type=" video/ MP4 ">
</video>

Traditional video Use methods are: <video width= "" height= "" src= "" ></VIDEO>

the use of audio is as follows: <audio src= "" ></audio>

However, we can specify multiple playback formats and encodings for the same media data through the source element above to ensure that the browser can choose a playback format that it supports, and the order in which the browser chooses is the order in which the code is written, judging from the top down, whether or not it supports the playback format, Until you select the playback format that you support.

Source has several properties, the SRC attribute refers to the URL address of the playback media, type represents the media type, and its property value is the MIME type of the playback file, and the code parameter in the property represents the encoding format of the media used. The type attribute is optional, but it is best not to omit the type attribute, otherwise the browser will not be able to determine if it can play and then download a small piece of video (or audio) data from the top down, which may waste bandwidth and time.

Let's look at the browser support for the encoding format;

IE9

1. Supports H.264 video encoding format and VP8 video encoding format.
2. Supports MP3 audio encoding format and WAV audio encoding format.

firefox4+

1. Supports OGG Theora video encoding format and VP8 video encoding format.
2. Supports Ogg Vorbis audio encoding format and WAV audio encoding format.

opera10+

1. Supports OGG Theora video encoding format and VP8 video encoding format.
2. Supports Ogg Vorbis audio encoding format and WAV audio encoding format.

chrome6+

1. Support H.264 video encoding format, OGG theora video encoding format, VP8 video encoding format.
2. Supports Ogg Vorbis audio encoding format and MP3 audio encoding format.

The new properties for the video label are as follows:

description tr>

value
src	; URL	autoplay	& nbsp: Media autoplay
controls	whether to add video or audio control bars that the browser has brought with it, play, pause, and so on in the control bar
height (Video Exclusive)	pixels< /td>	the height of the video
loop	Do you want to loop the video or audio
none,metadata,auto, the default value is auto	none: Do not preload. metadata: Only the metadata of the preloaded media (number of media bytes, first frame, playlist, duration, etc.). Auto: Preload all videos or audio
width (video Exclusive)	pixels	poster (Video Exclusive)		video is unavailable, you can use this element to show users an alternate picture

Error property: During normal reading, the error property of the video element or audio element is null during the use of the media data, but the error property returns a Mediaerror object whenever there are errors. The object's code returns the corresponding error state with a total of 4 possible values:

1. media_err_aborted (numeric value is 1), the download process for the media data was terminated because of the user's operation.
2. Media_err_network (A numeric value of 2) confirms that the media resource is available, but the download of the media data is aborted when a network error has occurred on the download.
3. Media_err_decode (A numeric value of 3) confirms that the media resource is available, but an error occurred while decoding.
4. media_err_src_not_supported (numeric value is 4), media resources are unavailable or media formats are not supported.

The code is as follows:

 <video src= "" id= "Videoelement" ></VIDEO> 
 var video = document.getElementById ("videoelement"); 
 Video.addeventlistener ("Error", function () {
     var error = Video.error; 
     SWICTH (error.code) {
         Case 1: 
             alert ("Video download Process aborted"); 
         break; 
 
         Case 2: 
             Alert ("Network failure, video download process aborted"); 
         break; 
 
         Case 3: 
             alert ("Decoding failed"); 
         break; 
 
         Case 4: 
             alert ("Media resource unavailable or media format not supported"); 
         break; 
    } 
},false); 

networkstate Property

The current network state can be read using the Networkstate property of a video element or audio element during media data loading, with a total of 4 possible values;

1. Network_empty (numeric value is 0): element is in the initial state.

2. Network_idle (numeric value is 1), the browser has chosen what encoding format to play the media, but has not established a network connection.

3. Network_loading (numeric value is 2): In Media data loading

4. Network_no_source (numeric value is 3), no supported encoding format, do not perform load.

currenttime Attributes and Duration Property

1. The CurrentTime property of a video element or audio element to read the current playback position (in s) of the media, or modify the CurrentTime property to modify the current playback position, and if no media data is available at the modified location, it will be thrown invalid_ State_err Anomaly;
2. The Duration property of the video element or audio element to read the total playback time of the media file.

We can do the demo as follows:

The HTML code is as follows:

<video id= "Video" Controls width=640 height=360 autoplay>
<source src= "WILDLIFE/WILDLIFE.OGV" type= "VIDEO/OGG; Codecs= "Theora, Vorbis" "/>
<source src= "WILDLIFE/WILDLIFE.WEBM" type= "VIDEO/WEBM" >
<source src= "Wildlife/wildlife.mp4" type= "Video/mp4" >
<p>video isn't visible, most likely your browser does not support HTML5 video</p>
</video>
<button onclick= "Getcurtime ()" type= "button" > get the current time position </button>
<button onclick= "Setcurtime ()" type= "button" > Set time position to 5 sec </button>
<button onclick= "duration ()" type= "button" > read the total playback time of media files </button>

The JS code is as follows:

var Myvid=document.getelementbyid ("video");
function Getcurtime () {
Get the current video or audio time position
alert (myvid.currenttime);
}
function Setcurtime () {
Set the 5s time position for the current video or audio
myvid.currenttime=5;
}
function Duration () {
The total playback time unit for reading media files is s
alert (myvid.duration);
}

We can copy the code, change a video address can see the effect of ~;

played Properties, paused attributes and ended Property

played :The played property of a video element or audio element to return a Timeranges object from which you can read the time period of the playback portion of the media file. The start time is the start time for the played part, and the end time is the end time of the played part.

paused Properties: Returns a Boolean value using the Paused property of a video element or audio element to indicate whether the media is paused, and true indicates that the media is playing;

ended Properties: Returns a Boolean value using the ended property of a video element or audio element to indicate whether the playback is complete, and true indicates that the media has finished playing and false indicates that the media has not finished playing.

The HTML code is as follows:

<video id= "Video" Controls width=640 height=360 AutoPlay
<source src= "WILDLIFE/WILDLIFE.OGV" type= "VIDEO/OGG; Codecs= "Theora, Vorbis" "/>
<source src= "WILDLIFE/WILDLIFE.WEBM" type= "VIDEO/WEBM" >
<source src= "Wildlife/wildlife.mp4" type= "Video/mp4" >
<p>video isn't visible, most likely your browser does not support HTML5 video</p>
</video>
<button onclick= "played ()" Type= "button" > time period to read the played portion of the media file </button>
<button onclick= "paused ()" type= "button" > is paused for playback </button>
<button onclick= "ended ()" type= "button" > play completed </button>

The JS code is as follows:

var Myvid=document.getelementbyid ("video");
Function played () {
Time period to read the playback portion of a media file
Console.log (myvid.played);
}
Function paused () {
is on pause playback
alert (myvid.paused);
}
function ended () {
is playback complete
alert (myvid.ended);
}

Onsole.log (myvid.played), printed as follows:

defaultplaybackrate Attributes and Playbackrate Property

Defaultplaybackrate Property: You can use the video element or the Defaultplaybackrate property of the audio element to read or modify the media default playback rate.

Playbackrate Property: You can use the video element or the Playbackrate property of the audio element to read or modify the current playback rate of the media.

Volume attributes and muted Property

Volume property: Reads or modifies the playback volume of the media using the volume property of the video element or audio element, ranging from 0 to 1,0 mute and 1 to the maximum volume.

Muted property: Reads or modifies the mute state of the media using the muted property of the video element or audio element, which is a Boolean value, true to mute, and false to a non mute state.

The HTML code is as follows:

<video id= "Video" Controls width=640 height=360 AutoPlay
<source src= "WILDLIFE/WILDLIFE.OGV" type= "VIDEO/OGG; Codecs= "Theora, Vorbis" "/>
<source src= "WILDLIFE/WILDLIFE.WEBM" type= "VIDEO/WEBM" >
<source src= "Wildlife/wildlife.mp4" type= "Video/mp4" >
<p>video isn't visible, most likely your browser does not support HTML5 video</p>
</video>
<button onclick= "Volume ()" Type= "button" > read or modify the playback volume of the media </button>
<button onclick= "muted ()" type= "button" > read or modify the current mute state of the media </button>

The JS code is as follows:

var Myvid=document.getelementbyid ("video");
function Volume () {
Read or modify the playback volume of the media
Myvid.volume = 0.1;
}
function muted () {
Read or modify the current mute state of the media
Myvid.muted = true;
}

You can use, when I click on the "read or modify the media playback Volume" button, the sound will become very small, when I click the "read or modify the current mute state of the Media" button, the video completely without sound.

Two: Methods

The video element and the audio element have the following four kinds of methods;

1. Play method : Use the plays method to playback the media, automatically change the value of the element's paused property to false.
2. Pause Method : Use the Pause method to pause playback and automatically change the value of the element's paused property to true.
3. The load method, which uses the Load method to reload the media for playback, automatically changes the value of the element's Playbackrate property to the value of the Defaultplaybackrate property and automatically converts the value of the element's error to null.

Here is the demo of the play and pause as follows:

<video id= "Video" Controls width=640 height=360>
<source src= "WILDLIFE/WILDLIFE.OGV" type= "VIDEO/OGG; Codecs= "Theora, Vorbis" "/>
<source src= "WILDLIFE/WILDLIFE.WEBM" type= "VIDEO/WEBM" >
<source src= "Wildlife/wildlife.mp4" type= "Video/mp4" >
<p>video isn't visible, most likely your browser does not support HTML5 video</p>
</video>
<button onclick= "Play ()" > Playback </button>
<button onclick= "Pause ()" > Pause </button>

JS The code is as follows:

var Myvid=document.getelementbyid ("video");
//Monitor events at end of video playback
Myvid.addeventlistener ("ended", function () {
    alert ("Play End");
},true) ;
//Error occurred
Myvid.addeventlistener ("Error", function () {
    switch (myVid.error.code) {
        Case 1:
          Alert ("The download process of the video is aborted");
        break;

        Case 2:
               Alert ("Network failure, video download process aborted");
        break;

        Case 3:
               alert ("Decoding failed");
        break;

        Case 4:
              alert ("Unsupported video format for playback");
        break;

        Default:
               Alert ("Unknown error occurred");
       }
},false);

Function Play () {
   //playing video
    Myvid.play ();
}
Function Pause () {
   //Pause play
    myvid.pause ();
}

As on the code, the default is not automatically play, when I click the Play button, on the play, when I click on the pause button to stop the current playback.

4. Canplaytype method: Use the Canplaytype method to test whether the browser supports the specified media type, which is defined as the following: var support = Videoelement.canplaytype (type);

Videoelement represents a video element or audio element on a page that uses a parameter type that is the same as the specified method of the source element's type parameter, and is specified with the MIME type of the playback file. You can add a codes parameter that represents the media encoding format in the specified string.

The value that the method might return is as follows:

1. Empty string: Indicates that the browser does not support this type of media.
2. Maybe: Indicates that the browser may support this type of media.
3. Probably: Indicates that the browser is determined to support this type of media.

The HTML code is as follows:

<video id= "Video" Controls width=640 height=360>
<source src= "WILDLIFE/WILDLIFE.OGV" type= "VIDEO/OGG; Codecs= "Theora, Vorbis" "/>
<source src= "WILDLIFE/WILDLIFE.WEBM" type= "VIDEO/WEBM" >
<source src= "Wildlife/wildlife.mp4" type= "Video/mp4" >
<p>video isn't visible, most likely your browser does not support HTML5 video</p>
</video>
<button onclick= "Canplaytype ()" >canplaytype method </button>

JS The code is as follows:

var Myvid=document.getelementbyid ("video");
function Canplaytype () {
var support = Myvid.canplaytype ("VIDEO/WEBM");
Console.log (support); Maybe

var support = Myvid.canplaytype ("Video/ogg; Codecs= "Theora, Vorbis");
Console.log (support); Probably
}

III: Events

1. event handling mode

There are 2 ways to use a video element or audio element, the first of which is listening, using the AddEventListener method of the video element or the audio element to listen for the occurrence of the event, which is defined as follows:

Videoelement.addeventlistener (type,listener,usercapture);

As on the listening mode and our JS listening way, do not do detailed introduction, we take a look at the second type of event listener is a common way to get event handles in JavaScript scripts, as follows:

<video id= "" src= "onplay=" Begin () "></video>

Function begin () {}

2. Introduction to Events

Video Elements and Audio related events for elements

Events	Description
Loadstart	Browsers start looking for media data on the web
Progress	The browser is getting media data
Suspend	Browser paused to get media data, but did not end properly during download
Abort	The browser aborts the acquisition of media data before downloading full media data, but it is not caused by an error
Error	Error during getting media data
Emptied	No consideration, you can see online
Stalled	Browser attempt to get media data failed
Play	is about to start playing, triggered when the play method is executed, or the element is set to AutoPlay after the data is downloaded
Pause	Playback paused when the Pause method is executed
Loadedmetadata	The length and number of bytes that the browser has finished getting media
Loadeddata	The browser has finished loading the media data for the current playback location, ready to play
Waiting	Can not see
Playing	is playing
Canplay	The browser is able to play the media, but it is estimated that the current playback rate does not directly finish the media, during playback needs buffering
Canplaythrough	The browser can play the media, but it is estimated that the current playback rate will be able to finish the media, no longer need buffering
Seeking	Seeking becomes true, indicating that the browser is requesting data
seeked	Seeking property to false, surface browser stops requesting data
Timeupdate	The current playback position changes, may be a natural change in the playback process, may also be artificial change, or due to playback can not occur in a continuous jump.
Ended	Stop playback after playback ends
Ratechange	The Defaultplaybackrate property or Playbackrate property has changed
Durationchange	Playback length Changes
Volumechange	The volume property or muted property has changed

Here we look at a demo, in the playback process will often trigger timeupdate events to inform the current playback position changes, we look at the following Timeupdate events to show the current playback progress.

The HTML code is as follows:

<video id= "Videos" Controls width=640 height=360 AutoPlay "loop" ></video>
<br/> video Address loop= Input type= "text" id= "Videourl"/> <input id= "PlayButton"
type= "button" onclick= "Playorpausevideo ()" value= "Play"/>
<span id= "Time" ></span>

JS code is as follows

function Playorpausevideo () {
    var videourl = document.getElementById ("Videourl "). Value;
    var video = document.getElementById ("video");
   //Use event listener mode to catch events
    video.addeventlistener ("Timeupdate", function () {
        var timedisplay = document.getElementById ("Time");
       //Use seconds to display current playback progress
        timedisplay.innerhtml = Math.floor (video.currenttime) + "/" + Math.floor (video.duration) + "(sec)";
       },false);
    if (video.paused) {
        if (videourl!= video.src) {
            video.src = Videourl;
            video.load ();
&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBsp; }else {
            video.play ();
        }
        document.getElementById (" PlayButton "). Value =" Paused ";
       }else {
             Video.pause ();
            document.getElementById ("PlayButton"). Value = "Play";
       }
   }

The demo is as follows: