In theory, HTML5 introduced <audio> and <video> element, and use <img> element as simple. Support for HTML5 browser, eliminating the need for plug-ins (like flash) to embed audio and video in an HTML document:
<audio src="background_music.mp3"'>
<video src="news.mov" width=320 height=240>In fact, when using these elements to be more clever. Due to various browser manufacturers failed to agree on a standard for audio and video encoding support, therefore, often necessary to use <source> element is used to specify different formats of media sources:
<audio id="music">
<source src="music.mp3" type="audio/mpeg">
<source src="music.ogg" type='audio/ogg;codec="vorbis"'>
</audio>
Popular media event
<audio> and <video> element is the most important method play () and pause () methods, which are used to control the media start and pause media playback.
Audio, for example:
<audio id="music">
<source src="music.mp3" type="audio/mpeg">
<source src="music.ogg" type='audio/ogg;codec="vorbis"'>
</audio>
let audio = document.getElementById('music')
//开始播放音频
audio.play()
//暂停播放音频
audio.pause()
//监听暂停播放事件
audio.addEventListener('pause', function (e) {
console.log('暂停播放啦')
})
//监听开始播放事件
audio.addEventListener('pause', function (e) {
console.log('开始播放啦')
})
//监听媒体数据已经加载完成事件
audio.addEventListener('loadedmetadata', function (e) {
console.log('音频时长：'+e.target.duration）
});
//监听currentTime属性发生改变了
audio.addEventListener('timeupdate', function (e) {
console.log('剩余播放时长：'+（e.target.duration - e.target.currentTime)）
}, false);
audio.addEventListener('ended', function (e) {
console.log('播放完成啦')
}, false);
Common media attribute
currentTime: This attribute specifies the player should play skip time (in seconds)
Volume: This attribute indicates the playback volume, between 0 (mute) to 1 (maximum volume)
the muted: This attribute indicates whether set to silent mode. If true it will enter silent mode, if specified before the false will restore the volume to continue playing.
playbackRate: This attribute is used to specify media playback speed. 1.0 represents a normal speed, is greater than 1, it indicates "fast forward", a value between 0 and 1 indicating "slow."
controls: This attribute specifies whether to display the playback controls in the browser. If true then display the controls, otherwise hidden controls.
loop: This property specifies whether the media need to loop playback. If true then expressed the need for loop, on the contrary it means to play to the last stop.
proload: This attribute specifies before the user starts playing the media, whether or how much media content need to pre-load.
“none”：表示不需要预加载数据
“metadata”：表示诸如时长、比特率、帧大小这样的元数据需要加载。（浏览器默认加载这些数据。）
“auto”：浏览器应当预加载它认为适量的媒体内容autoplay: This attribute specifies whether to automatically start playing when enough has been cached media content. The property is set to true, you're telling the browser to preload needs of media content.
Common media state
duration: This property specifies the length of the media, in seconds
played: This property returns the period of time has played.
buffered: This property returns the current period has been buffered.
seekable: This property returns the current time period needed to jump to the player.
played, buffered, seekable are TimeRanges objects. Each object has a length property and start () and end () method, the former representing the current time period, which return the current time period start time point and an end point of time (both in seconds).
readyState: This property returns the audio / video of the current state of readiness
| constant | value | description | |
|---|---|---|---|
| HAVE_NOTHING | 0 | There is no information about audio / video is ready | |
| HAVE_METADATA | 1 | Audio / Video initialized | |
| HAVE_CURRENT_DATA | 2 | Data already playing (has been loaded the current position) but can not play the content data of the next frame | |
| HAVE_FUTURE_DATA | 3 | Current and at least the next frame of data is available (at least two frames of data other words) | |
| HAVE_ENOUGH_DATA | 4 | The available data is sufficient to start playing - if speed is guaranteed then the video may have been playing in the end |
networkState: property acquisition represents the current state of the media on the Web
| constant | value | description |
|---|---|---|
| NETWORK_EMPTY | 0 | No data. And the readyState is HAVE_NOTHING. |
| NETWORK_IDLE | 1 | HTMLMediaElement is valid and has selected a resource ,, but not using the network. |
| NETWORK_LOADING | 2 | HTMLMediaElement browser is downloading data. |
| NETWORK_NO_SOURCE | 3 | I did not find HTMLMediaElement src. |
error: Description Load media player or media error process. If no errors occur, compared with null; on the contrary, was an object contains attributes describing the error code array. At the same time, error description of the object also defines a number of possible error codes constants:
| constant | value | description |
|---|---|---|
| MEDIA_ERR_ABORTED | 1 | User requirements browser to stop loading media content |
| MEDIA_ERR_NETWORK | 2 | Media type correctly, but the network error occurred fails to load |
| MEDIA_ERR_DECODE | 3 | Media type is correct, but due to coding errors can not be properly decoded and played |
| MEDIA_ERR__NOT_SUPPORTED | 4 | Designated by the src attribute of the media file browser does not support can not be played |
To help make learning easy, efficient and free for everyone to share a large number of resources to help you become the front-end engineers, and even the way through the clutter full stack engineers. We are here to recommend a front-end full-stack learning buckle qun: 784783012 Welcome to flow into ××× discussion, learning exchanges and common progress.
When the real beginning of learning will inevitably do not know where to start, leading to inefficiencies affect confidence to continue learning.
But the most important thing is I do not know what needs to master key technologies, frequently stepped pit learning, end up wasting a lot of time, it is effective or necessary resources.