HTML5 added a <autdio> and <video>, can make people do not need Flash and other plug-ins will be able to embed audio and video content in a Web page.
1, usage and property
src: pointing to media files
width: Width setting element
height: set the element height
poster: specified load the video image is displayed URI
controls: display comes with UI controls
Because not every browser supports all media formats, so you can specify multiple media sources, no longer label specified in the src attribute, you can use one or more <source> tag within
<div>
<video id="video" width="500px" height="400px" poster="img/BG.png" controls autoplay="autoplay">
<source src="media/v1.mp4" type="video/mp4" >
不支持视频播放
</video>
<br>
<video src="media/v1.mp4" width="500px" height="400px"></video>
<br>
<audio id="" controls style="height: 100px; width: 500px">
<source src="media/au1.mp3">
</audio>
<br>
<audio src="media/au1.mp3" controls></audio>
</div>
2, <video> and <audio> elements common attributes
autoplay: boolean, get or set the autoplay flag
buffered: the range of events, objects that represent the downloaded buffering range of events
bufferedBytes: byte range indicates a byte range buffered downloaded objects
bufferingRate: integer, the download process received an average number of bits per second
bufferingThrottled: Boolean value that indicates whether the browser has been throttling the buffer
controls: Boolean value, or set the controls to obtain property, to show or hide the browser built-in controls
currentLoop: integer, the number of media files have been circulating
URL string, currently playing file: currentSrc
currentTime: floating-point numbers, the number of seconds to play
defaultPlaybackRate: float, get or set the default playback speed. The default is 1.0 seconds, only developers to modify
duration: floating point, media Total playing time (in seconds)
ended: Boolean value that indicates whether the media file playback completed
loop: Boolean value, whether to acquire or set up media files loop
muted: Boolean value, whether made or set mute
networkState: integer, indicates the current media network connection status: 0 represents null, 1 Loading 2 Loading represents metadata, 3 denotes a first frame has been loaded, loaded 4 represents
He paused: Boolean value that indicates whether the player is suspended
playbackRate: float, get or set the current playback speed. The user can change this value, the media playback speed faster or slower
played: range of events, has so far played a range of events
readyState: integer that indicates whether the media is ready. 0 indicates the data is not available, displaying the current frame represents 1, 2 can start playing, the media may start to finish playing 3 represents
seekable: time, time can search range
seeking: Boolean value that indicates whether the player is moving to a new location in the file
src: String, source media files. Any time you can override this property
start: float, get or set the media file starts playing position, expressed in seconds
totalBytes: integer, the total number of bytes in the current resource
videoHeight: integer, video (not necessarily elements) height for <video>
videoWidth: integer, the video (not necessarily element) width for <video>
volume: float, get or set the current volume, 0.0 to 1.0 jobs
Many properties may be directly disposed directly <audio> and <video> element
3 events
<Audio> and <video> can trigger a lot of events, which monitors changes in different properties, these changes may be the result of a media player, it could be the result of a user operation of the player
| event | Trigger When |
| abort | Download the middle |
| canplay | When play, readyState value 2 |
| canplaythrough | Can play, and should not be interrupted, readyState value is 3 |
| canshowcurrentframe | The current frame has been completed download, readyState value 1 |
| Dtunvalble | Data is not ready, readyState value of 0 |
| durationchange | Duration attribute value change |
| emptied | Network connection is closed |
| empty | Occurred error prevents media download |
| error | A network error occurred during the download |
| load | All media is loaded (repealed) |
| loadeddata | The first frame has been loaded media |
| loadedmetadata | Metadata of the media has been loaded |
| loadstart | Download to begin |
| pause | Play has been suspended |
| play | Play Starts |
| playing | Now Playing |
| progress | downloading |
| ratechange | Playback speed changes |
| seeked | Search ends |
| seeking | We are moving to a new location |
| stalled | The browser tries to download, but no data is received |
| timeupdate | currentTime be unreasonable or accidentally update |
| volumechange | volume property value or attribute value has changed muted |
| waiting | Playback pauses, waiting for more data to download |
4, method
play (): start playing
pause (): Play pause
canPlayType ( mediaType ): detect whether the browser supports a given mime type of media file formats. The return value may be: 'probably' (play), 'Maybe' (generally also may play), "" (the empty string, unplayable).
Possible mime types: audio / mp4, audio / mpeg, audio / ogg, audio / wav, video / mp4, video / ogg, video / webm
<Audio> element also has a native JavaScript constructor Audio, the audio can be played at any time. Can directly create a new instance, and pass the file path after the download is complete, you can call the play () Play
let btn = document.querySelector("#btn");
btn.addEventListener("click",evt => {
var audio = new Audio("media/au1.mp3");
audio.addEventListener("canplaythrough",ev => {
audio.play();
},false);
},false);