H5--02 video元素、audio元素、js音频事件及API

1.video元素与audio元素

<video>元素，在html5中专门用来播放网络上的视频或电影

<audio>元素，在html5中专门用来播放网络上的音频

使用video和audio元素进行播放时不需要使用其它的插件，只要我们的浏览器支持html5就可以！

浏览器的支持：

safari3以上、firefox4以上、opera10以上、chrome3.0以上的版本都对audio元素的支持。

解决不支持版本的办法：

更新浏览器的提示语句

<video src="./Nike Football- 终极对决_超清.mp4"  width="300" height="200" controls>
    您的浏览器太老，不支持HTML5页面，请更新浏览器！
</video>

属性设置：

Controls布尔类型属性；意为：控制开关；视频中如果使用了controls属性，发现控制开关离视频太远，是我们的高度设的太大；若没有使用，在网页中视频右键即可播放

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1>音乐播放</h1>
<audio src="./不才 - 涉川.mp3" controls></audio>
<h2>视频播放</h2>
<video src="./Nike Football- 终极对决_超清.mp4"  width="300" height="200" controls></video>
<h2>不支持提醒格式</h2>
<video src="./Nike Football- 终极对决_超清.mp4"  width="300" height="200" controls>
    您的浏览器太老，不支持HTML5页面，请更新浏览器！
</video>
<video width="300" height="200" controls>
    <!--type属性的存在是为了指名这个音频的类型，若没有会使浏览器加载一部分来辨别-->
    <source src="./Nike Football- 终极对决_超清.mp4" type="video/mp4">
    <source src="./Nike Football- 终极对决_超清.webm" type="video/webm">
    <source src="./Nike Football- 终极对决_超清.ogg" type="video/ogv">
    <source src="./Nike Football- 终极对决_超清.mp4" >
</video>
</body>
</html>

<script type="text/javascript">
//    发生错误返回的4中错误状态
    var video = document.getElementById('video');
    video.addEventListener("error",function(){
        var error = video.error;
        switch (error.code){
            case 1:
                alert('取回过程被用户中止。');
                break;
            case 2:
                alert('当下载时发生错误。');
                break;
            case 3:
                alert('当解码时发生错误。');
                break;
            case 4:
                alert('媒体不可用或者不支持音频/视频。');
                break;
        }
    },false);
</script>

js音频的事件及方法：

方法	描述
addTextTrack()	向音频/视频添加新的文本轨道
canPlayType()	检测浏览器是否能播放指定的音频/视频类型
load()	重新加载音频/视频元素
play()	开始播放音频/视频
pause()	暂停当前播放的音频/视频

oncanplay 事件在用户可以开始播放视频/音频（audio/video）时触发。

在视频/音频（audio/video）加载过程中，事件的触发顺序如下：

属性：

duration

返回当前音频/视频的长度（以秒计）

ontimeupdate 事件在视频/音频（audio/video）当前的播放位置发送改变时触发。

提示： 该事件通常与 Video 对象的 currentTime 属性一起使用，该属性返回视频/音频（audio/video）的当前播放位置。

currentTime

设置或返回音频/视频中的当前播放位置（以秒计）

HTML5 视频和音频的 DOM 参考手册

HTML5 DOM 为 <audio> 和 <video> 元素提供了方法、属性和事件。

这些方法、属性和事件允许您使用 JavaScript 来操作 <audio> 和 <video> 元素。

HTML5 Audio/Video 方法

方法	描述
addTextTrack()	向音频/视频添加新的文本轨道
canPlayType()	检测浏览器是否能播放指定的音频/视频类型
load()	重新加载音频/视频元素
play()	开始播放音频/视频
pause()	暂停当前播放的音频/视频

HTML5 Audio/Video 属性

属性	描述
audioTracks	返回表示可用音轨的 AudioTrackList 对象
autoplay	设置或返回是否在加载完成后随即播放音频/视频
buffered	返回表示音频/视频已缓冲部分的 TimeRanges 对象
controller	返回表示音频/视频当前媒体控制器的 MediaController 对象
controls	设置或返回音频/视频是否显示控件（比如播放/暂停等）
crossOrigin	设置或返回音频/视频的 CORS 设置
currentSrc	返回当前音频/视频的 URL
currentTime	设置或返回音频/视频中的当前播放位置（以秒计）
defaultMuted	设置或返回音频/视频默认是否静音
defaultPlaybackRate	设置或返回音频/视频的默认播放速度
duration	返回当前音频/视频的长度（以秒计）
ended	返回音频/视频的播放是否已结束
error	返回表示音频/视频错误状态的 MediaError 对象
loop	设置或返回音频/视频是否应在结束时重新播放
mediaGroup	设置或返回音频/视频所属的组合（用于连接多个音频/视频元素）
muted	设置或返回音频/视频是否静音
networkState	返回音频/视频的当前网络状态
paused	设置或返回音频/视频是否暂停
playbackRate	设置或返回音频/视频播放的速度
played	返回表示音频/视频已播放部分的 TimeRanges 对象
preload	设置或返回音频/视频是否应该在页面加载后进行加载
readyState	返回音频/视频当前的就绪状态
seekable	返回表示音频/视频可寻址部分的 TimeRanges 对象
seeking	返回用户是否正在音频/视频中进行查找
src	设置或返回音频/视频元素的当前来源
startDate	返回表示当前时间偏移的 Date 对象
textTracks	返回表示可用文本轨道的 TextTrackList 对象
videoTracks	返回表示可用视频轨道的 VideoTrackList 对象
volume	设置或返回音频/视频的音量

HTML5 Audio/Video 事件

事件	描述
abort	当音频/视频的加载已放弃时
canplay	当浏览器可以播放音频/视频时
canplaythrough	当浏览器可在不因缓冲而停顿的情况下进行播放时
durationchange	当音频/视频的时长已更改时
emptied	当目前的播放列表为空时
ended	当目前的播放列表已结束时
error	当在音频/视频加载期间发生错误时
loadeddata	当浏览器已加载音频/视频的当前帧时
loadedmetadata	当浏览器已加载音频/视频的元数据时
loadstart	当浏览器开始查找音频/视频时
pause	当音频/视频已暂停时
play	当音频/视频已开始或不再暂停时
playing	当音频/视频在已因缓冲而暂停或停止后已就绪时
progress	当浏览器正在下载音频/视频时
ratechange	当音频/视频的播放速度已更改时
seeked	当用户已移动/跳跃到音频/视频中的新位置时
seeking	当用户开始移动/跳跃到音频/视频中的新位置时
stalled	当浏览器尝试获取媒体数据，但数据不可用时
suspend	当浏览器刻意不获取媒体数据时
timeupdate	当目前的播放位置已更改时
volumechange	当音量已更改时
waiting	当视频由于需要缓冲下一帧而停止

若有不足请多多指教！希望给您带来帮助！