web前端入门到实战：HTML5的video和audio

从理论上来说，HTML5引入的<audio>和<video>元素，使用起来和<img>元素一样简单。对于支持HTML5的浏览器，不再需要使用插件（像flash）来在HTML文档中嵌入音频和视频：

<audio src="background_music.mp3"‘>
<video src="news.mov" width=320 height=240>

实际上，使用这些元素的时候要更加巧妙。由于各家浏览器制造商未能在对标准音频和视频编码支持上达成一致，因此，通常需要使用<source>元素来为指定不同格式的媒体源：

<audio id="music">
    <source src="music.mp3" type="audio/mpeg">
    <source src="music.ogg" type=‘audio/ogg;codec="vorbis"‘>
</audio>

常用媒体事件
<audio>和<video>元素最重要的方法是play()和pause()方法，它们用来控制媒体开始和暂停媒体的播放。
以音频为例：

web前端开发学习Q-q-u-n： 767273102 ，分享学习的方法和需要注意的小细节，不停更新最新的教程和学习方法（详细的前端项目实战教学视频）
<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);

常用媒体属性
currentTime：该属性指定了播放器应该跳过播放的时间（单位为秒）
volume：该属性表示播放音量，介于0（静音）~1（最大音量）之间
muted：该属性表示是否设置为静音模式。若为true则会进入静音模式，若为false则会恢复之前指定的音量继续播放。
playbackRate：该属性用于指定媒体播放的速度。1.0表示正常速度，大于1则表示“快进”，0~1之间的值则表示“慢放”。
controls：该属性指定是否在浏览器中显示播放控件。若为true则显示控件，反之则隐藏控件。
loop：该属性指定媒体是否需要循环播放。若为true则表示需要循环播放，反之则表示播放到最后就停止。
proload：该属性指定在用户开始播放媒体前，是否或者多少媒体内容需要预加载。

“none”：表示不需要预加载数据
“metadata”：表示诸如时长、比特率、帧大小这样的元数据需要加载。（浏览器默认加载这些数据。）
“auto”：浏览器应当预加载它认为适量的媒体内容

autoplay：该属性指定当已经缓存足够多的媒体内容时是否需要自动开始播放。将该属性设置为true就等于告诉浏览器需要预加载媒体内容。

对web前端这门技术感兴趣的小伙伴可以加入到我们的学习圈来，工作第六个年头了，与大家分享一些学习方法，实战开发需要注意的细节。767-273-102 秋裙。从零基础开始怎么样学好前端。都是一群有梦想的人，我们可能在不同的城市，但我们会一起结伴同行前端前端前端

常用媒体状态

duration：该属性指定了媒体的时长，单位是秒
played：该属性返回已经播放的时间段。
buffered：该属性返回当前已经缓冲的时间段。
seekable：该属性返回当前播放器需要跳到的时间段。
played，buffered，seekable都是TimeRanges对象。每个对象都有一个length属性以及start()和end()方法，前者表示当前的一个时间段，后者分别返回当前时间段的起始时间点和结束时间点（单位都是秒）。
readyState：该属性返回音频/视频的当前就绪状态

networkState ：属性表示在网络上获取媒体的当前状态

error：描述加载媒体或者播放媒体过程中发生的错误。如没有发生错误，则为null；反之，则为一个对象，包含了描述错误的数组code属性。同时，error对象也定义了一些描述可能的错误代码的常量：

原文地址：https://blog.51cto.com/14568129/2442292