Common video format
HTML5 supports video format:
1. OGG
OGG file with TheORA video coding+VORBIS audio encoding
Supported browser: F, C, O
2. Mepg4
MPEG4 file with H.264 video encoding+AAC audio encoding
Supported browser: S, C
3, webm
Webm format with VP8 video encoding+VORBIS audio encoding
Supported browser: i, f, c, o
Disadvantages: few videos, almost no transcoders, not good for transcoding
If you want Video, you can automatically fill the size of the slow father DIV, just add style = width = 100%to the VIDEO tag; height = 100%; object-fill: fil
1.2 Tag prototypeSpecify a video format.
<video ID = Media SRC = Examp.mp4 Width = 500 Poster = Examp1.jpg> Your browser does not support Video </video>
Given a variety of video formats, which type of browser chooses to play according to its own degree
Note: Multiple Source tags, browsers will be identified from the first one. If the first one is not recognized, it will continue to identify the second one; if the first identification is successful, it will directly play the first format video<video Controls = Controls> <Source SRC = 1.MP4 Type = Video/Mp4/> // SRC Properties Write in Source tags, to specify the Type type of video, for example, the mp4 is Type = Video/MP4 <Source SRC = 2.GG Type = Video/OGG/> // OGG format <Source src = 3.Webm type = video/webm/> // webm format </video>1.3 Important Video tag attribute
| Attribute (commonly used) | value | Function description |
|---|---|---|
| Controls | Controls | Whether to display the playback control |
| autoplay | autoplay | Set whether to open the browser and play automatically |
| width | Pilex (pixel) | Set the width of the player |
| height | Pilex (pixel) | Set the height of the player |
| loop | loop | Set the video whether to play circularly (that is, continue to be replayed after the playback) |
| preload | preload | Set whether to wait for loading and then play |
| SRC | URL | Set the URL address to play video |
| poster | imgurn | Set the player initially default display image |
| Autobuffer | Autobuffer | Set as a browser buffer method, without setting autoply to be effective |
API attribute
| property | describe |
|---|---|
| Audiotracks | Return to the AudiotrackList object that can be used by the sound rail |
| buffered | Return to indicate the Timeranges object of the buffer part of the audio/video |
| Controller | Return to the MediaController object of the audio/video current media controller |
| Crossorigin | Settings or return audio/video Cors settings |
| Currentsrc | Return to the current audio/video URL |
| currenttime | Set or return the current playback position in the audio/video (in seconds) |
| defaultMutem | Set or return audio/video default whether you are mute |
| defaultPlayBackrate | Set or return the default playback speed of audio/video |
| duration | Return to the length of the current audio/video (in seconds) |
| ended | Whether the playback of the audio/video is over |
| error | Return to the Mediaerror object of audio/video error state |
| MediaGroup | Set or return the combination of audio/video (for connecting multiple audio/video elements) |
| muted | Set or return the audio/video whether it is silent |
| networkState | Return to the current network status of audio/video |
| paused | Set or return the audio/video whether to pause |
| Playbackrate | Set or return audio/video playback speed |
| played | Return to indicate the Timeranges object of the audio/video playback part |
| ReadyState | Return to audio/video currently ready state |
| seekable | Return to the Timeranges object of the audio/video addressable part |
| seeking | Whether the back user is looking for in the audio/video |
| startdate | Return to indicate the Date object of the current time offset |
| texttracks | Return to indicate that the texttracklist object that can be used by text can |
| VideoTracks | Return to VideoTrackList objects that can be used with video tracks |
| volume | Set or return audio/video volume |
1.4.1 Video method
| API | Event description |
|---|---|
| play | video.play (); Play video |
| pause | video.pause (); suspension of video |
| load | video.load (); reply to all attributes to meditate, and the video recovery restart status |
| CanplayType | var support = videoid.canplayType ('video/mp4 ′); Determine whether the browser supports the current type of video format Return value: Empty string: do not support Maybe: may support Probably: fully support |
Common method
1.4.2 Network status
Get Video object
Media = document.GetelementByid (Media);
1.Media.currentsrc;
Back to the URL of the current resource
2.Media.src = Value;
Return or set the URL of the current resource
3.Media.canplayType (Type);
Can you play a certain format resource
4.Media.networkState;
0. This element is not initialized
1. Normal but not using the network
2. Download data
3. No resource
5.Media.load ();
Re -load the resource specified by SRC
6.Media.buffered;
Return to the buffer area, timeranges
7.Media.preload;
None: Not pre -load
Metadata: Pre -load resource information
Auto:
1.4.3 Preparation status
1.Media.readyState
2.Media.Seeking;
Whether you are in Seeking
1.4.4 Play status
1.Media.currenttime = value;
The current play position can be changed to the position
2.Media.starttime;
Generally 0, if it is a stream media or the resource that does not start from 0, it is not 0
3.Media.duration;
The current resource length flow back unlimited
4.Media.paused;
Whether to pause
5.Media.DefaultPlayBackrate = Value;
The default playback speed, you can set up
6.Media.playBackrate = Value;
The current playback speed is changed immediately after setting
7.Media.played;
Return to the area that has been played, timeranges, see the object below about this object
8.Media.seekable;
Return to the area that can Seek
9.Media.nded;
Whether to end
10.Media.autoplay;
Whether to play automatically
11.Media.loop;
Whether to circulate
12.Media.play ();
Play
13.Media.pause ();
pause
1.4.5 Video Control
1.4.6 Related events
1. First of all, you can bind the event through the AddeventListener method in JS
| event | illustrate |
|---|---|
| loadstart | Client starts request data |
| Progress | The client is requesting data |
| Suspend | Delay download |
| abort | The client actively terminates download (not caused by errors) |
| loadstart | Client starts request data |
| Progress | The client is requesting data |
| error | Encountered errors when requesting data |
| Stalled | Network speed st for |
| play | Play () and AutoPlay trigger |
| pause | pause () trigger |
| loadedMetadata | Successfully obtain resource length |
| loadeddata | - |
| waiting | Waiting for data is not wrong |
| play | Start playback |
| Canplay | It can be played, but it may be suspended because of loading |
| Canplaythrough | You can play, the songs are all loaded |
| seeking | Find |
| Seeked | Find out |
| timeupdate | Playing time changes |
| ended | Play end |
| RateChange | Play rate change |
| durationChange | Resource length changes |
| VolumeChange | Volume change |
2. Common events
1.4.7 Others
1. Full screen:
2. Exit the full screen:
1. Common audio format
Audio coding: ACC, MP3, VORBIS
2. HTML5 supports audio format:
| property | Attribute value | Annotation |
|---|---|---|
| SRC | URL | The URL address of the music played (Firefox only supports OGG music, and IE9 only supports MP3 format music .chrome seems to be fully supported) |
| preload | preload | Pre -load (load or buffer audio when the page is loaded). If you use Autoplay, the attribute is invalid. |
| loop | loop | Circular playback |
| Controls | Controls | Whether to display the default control bar (control button) |
| autoplay | autoplay | Automatic playback |
Support for music format
| Audio format | Chrome | Firefox | IE9 | Opera | Safari |
|---|---|---|---|---|---|
| OGG | support | support | support | Not support | Not support |
| MP3 | support | Not support | support | Not support | support |
| WAV | Not support | support | Not support | support | Not support |
Audio can be created by New. You can also obtain it by using documens
//通过new关键字来创建Audio对象var Music = new Audio(test.mp3);//通过document来获取已经存在的Audio对象var Music = document.getElementById(audio);//当然这里也可以使用document Get other methods such as .GetelementsByClassName ('ClassName'). 2.3 Some attributes and methods of AUDIO labels provided by API| property | Annotation |
|---|---|
| duration | Get the total length of the media files, with S as the unit, if it cannot be obtained, return to NAN |
| paused | If the media files are suspended, then the PAUSED attribute returns True, otherwise it will return False |
| ended | If the media file is played, return True |
| muted | Used to obtain or set a mute state. Value Boolean |
| volume | The attribute value of the volume control volume is 0-1; |
| Starttime | Return to the starting time |
| error | Returning the error code is normal when UULL. Otherwise, you can get it through Music.error.Code |
| currenttime | It is used to obtain or control the current playback time, the unit is S. |
| Currentsrc | Returns the file that is being played or loaded in the form of a string |
| function | effect |
|---|---|
| load () | Load audio, video software |
| Play () | Load and play audio, video files or restart the paused audio and video |
| pause () | Audio audio and video files that are paused for playback status |
| CanplayType (obj) | Test whether it supports a given MINI type file |
First of all, you can bind the event through the addeventristener method in JS
| Event name | Event |
|---|---|
| loadstart | Client starts request data |
| Progress | The client is requesting data (or cushioning) |
| play | Play () and AutoPlay when playing |
| pause | When the pause () method is promoted |
| ended | The current playback is over |
| timeupdate | The current playback time changes. The commonly used time processing during playback |
| Canplaythrough | The song has been loaded and completely completed |
| Canplay | Cushion can be played so far. |
In fact, Video's API and Audio are almost consistent. A little different. So basically one of the others will be there
SummarizeThe above is all the contents of this article. I hope that the content of this article will help everyone's learning or work. If you have any questions, you can leave a message to communicate. Thank you for your support for VEVB Wulin.com.