HTML5 Audio and video

1. Audio and video

Video on the Web
Until now, there is still no standard for displaying video on a Web page.
Today, most videos are displayed via plugins (such as Flash). However, not all browsers have the same plugin.
HTML5 provides a standard way to include video through the visual element.

Video Format
Currently, the video element supports three types of videos:
Format IE Firefox Opera Chrome Safari
Ogg no 3.5+ 10.5+ 5.0+ No
MPEG4 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 file with H + video encoding and AAC audio encoding
WebM = WebM file with VP8 video encoding and Vorbis audio encoding

Audio on the Web
Until now, there is still no standard for playing audio on a Web page.
Today, most audio is played through plugins (such as Flash). However, not all browsers have the same plugin.
HTML5 provides a standard way to include audio through the sound element.
The audio element can play a sound file or audio stream.

Audio Format
Currently, the audio element supports three formats:
IE 9 Firefox 3.5 Opera 10.5 Chrome 3.0 Safari 3.0
Ogg vorbis√√√
Mp3√√√
Wav√√√

Simple video element creation

<src= "Http://www.w3school.com.cn/example/html5/mov_bbb.ogg"  controls  >         Your browser does not support video elements </video>

The default size of the video is 300*150
CONTROLS: Displays the default control of the video

Use of the video tag (with caption file)

<Videosrc= "Http://www.w3school.com.cn/example/html5/mov_bbb.ogg">         <!--Add caption file here -        < Tracklabel= "中文版"Kind= "Subtitles"Srclang= "en"src= "./test.vtt"default>your browser does not support HTML5 video</Video> 

<!-- the format of the subtitle file is as follows:  -    < Pre >         WEBVTT        1        00:00:00.240--00:00:04.130        Hello, everyone. Visual Studio 2013 has recently made some updates        2        00:00:04.140---00:00:08.110 Let's go        to Twmvc's Dino today to        introduce us to this update's section on SASS Editor        3        00:00:18.120--    00:00:19.280</pre>

Audio element creation

<controls src= "Http://www.w3school.com.cn/i/song.mp3"></  audio>

CONTROLS: Displays common user controls, including start, stop, skip, and volume control

Audio source Element

<controls>        <src= "/http" Www.w3school.com.cn/i/song.mp3 ">        <src="/http Www.w3school.com.cn/i/song.ogg ">    </audio>    

Source provides multiple audio elements that are automatically selected for the browser's own playback capability, and if one is not, the browser chooses the first source.

Automatic playback of Media Control

<AutoPlay controls>        <src= "/http" Www.w3school.com.cn/i/song.mp3 ">         Your browser does not support audio    </  Audio>

AutoPlay: Set Audio autoplay

2. Video and audio with script session

Determine the browser support situation

    The simplest way to determine whether the browser supports audio or video elements is to create it dynamically with a script and then detect if a particular function        exists var hasvideo =!! (Document.createelement (' Video '). Canplaytype);    

The built-in method of controlling audio or video in JS

Load () Loads audio or video files to prepare for playback. 　　　　　　 Typically no calls are required, except for dynamically created elements that are used to load the        play () load before playback (if it is not already loaded) and to play audio or video files, unless the audio or video is paused elsewhere,       pause () from the beginning Pauses a video or audio file in play        Canplaytype (type)  the test video element supports a file of the given MIME type

JS controls the built-in read-only properties of audio or video

Duration the duration of the     entire media file, in S, if you cannot get the length of time returned Nan        paused        If the media file is currently paused, returns true if playback has not started and returns true        ended        If the media file has finished playing. Returns True        startTime    returns the earliest playback start time, typically 0. 0, unless it's from a buffered file, and part of it is no longer in the buffer! Error        code returned when an error occurred        CURRENTSRC    returns the currently playing or loaded file as a string, corresponding to the file that the browser is the source selected

Features of some media elements that can be modified by script and affect playback in JS

AutoPlay        Set the media file to play automatically after creation, or if the query has been set AutoPlay        loop            Returns True if the media file has been played back, or the media file is set to loop playback        CurrentTime Returns the time it takes to        play from start to current, during playback, set CurrentTime to search, and navigate to media file-specific location        controls        Show or hide the user control interface, or query whether the user control interface is currently visible        volume            Set the value of the audio volume before 0.0 to 1.0, or query the relative value of the current volume        muted            mute or mute the audio file, Or detects whether the current mute        Autobuffer        notifies the player whether to buffer loading before the media file starts playing, and if the media file is set AutoPlay, the property is ignored

Additional features of the video element

Poster the                    URL address of the picture that represents the video content before the video is loaded, the property is readable and writable, and you can modify the        width,height             or set the display size as you wish. If the width of the setting does not match the size of the video itself, it can cause black areas to appear around the        videowidth,videoheight   return the video's intrinsic width and height, read-only

3. HTML5 capture video through Canvas (example demo)

<!doctype html><meta charset= "Utf-8" >varUpdatainterval = 100;//time interval for grabbing frames        varframewidth = 1920;//dimensions of frames in time series        varFrameheight = 758; //total number of frames in time series        varFramerows = 4; varFramecolumns = 4; varFramegrid = framerows*Framecolumns;
       //Current Frame        varFramecount = 0; //Cancel Timer finishes playing        varIntervalid; varVideostart =false; //Add Updateframe function        functionUpdateframe () {varVideo = document.getElementById (' movies ');            Console.log (Video.videowidth);            Console.log (Video.videoheight); varTimeline = document.getElementById (' timeline ')); varCXT = Timeline.getcontext (' 2d '); //calculates the current playback position based on the number of frames            //then draw the image with the video as the input parameter            varFramepos = framecount%Framegrid; varFrameX = (framepos%framecolumns) *Framewidth; varFramey = (framepos%framerows) *Frameheight; Cxt.drawimage (Video,0,0,1920,758, Framex,framey,framewidth,frameheight); Framecount++; }        functionStartvideo () {if(Videostart) {return; } Videostart=true;            Updateframe (); Intervalid=setinterval (Updateframe,updatainterval); }        //Handling User Input        varTimeLine = document.getElementById (' TimeLine ')); Timeline.onclick=function(evt) {varOFFX = Evt.layerx-Timeline.offsetleft; varOffy = Evt.layery-Timeline.offsettop; varClickedframe = Math.floor (offy/frameheight) *framerows; Clickedframe + = Math.floor (offx/framewidth);varSeekedframed = (((Math.floor (Framecount/framegrid) *framegrid) + clickedframe);if(Clickedframe > (framecount%16) ) {seekedframed=Framegrid; }            if(Seekedframed < 0){                return; }            varVideo = document.getElementById (' movies '); Video.currenttime= seekedframed*updatainterval/1000; Framecount =seekedframed; }        functionStoptimeline () {clearinterval (intervalid); }    </script>
The introduction of the audio and video elements of the HTML5 allows the HTML5 to play video files in the media selection without the need to introduce plug-ins, in addition to audio and video integrated API methods that enable us to control audio and video!
HTML5 Audio and video