html指定媒体循环播放的是,HTML5的video和audio

从理论上来说，html5引入的和元素，使用起来和元素一样简单。对于支持html5的浏览器，不再需要使用插件(像flash)来在html文档中嵌入音频和视频：

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

常用媒体事件

和元素最重要的方法是play()和pause()方法，它们用来控制媒体开始和暂停媒体的播放。

以音频为例：

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就等于告诉浏览器需要预加载媒体内容。

常用媒体状态

duration：该属性指定了媒体的时长，单位是秒

played：该属性返回已经播放的时间段。

buffered：该属性返回当前已经缓冲的时间段。

seekable：该属性返回当前播放器需要跳到的时间段。

played，buffered，seekable都是TimeRanges对象。每个对象都有一个length属性以及start()和end()方法，前者表示当前的一个时间段，后者分别返回当前时间段的起始时间点和结束时间点(单位都是秒)。

readyState：该属性返回音频/视频的当前就绪状态

常量

值

描述

HAVE_NOTHING

0

没有关于音频/视频是否就绪的信息

HAVE_METADATA

1

音频/视频已初始化

HAVE_CURRENT_DATA

2

数据已经可以播放(当前位置已经加载) 但没有数据能播放下一帧的内容

HAVE_FUTURE_DATA

3

当前及至少下一帧的数据是可用的(换句话来说至少有两帧的数据)

HAVE_ENOUGH_DATA

4

可用数据足以开始播放-如果网速得到保障 那么视频可以一直播放到底

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

常量

值

描述

NETWORK_EMPTY

0

还没有数据。并且 readyState 的值是 HAVE_NOTHING。

NETWORK_IDLE

1

htmlMediaElement 是有效的并且已经选择了一个资源,，但是还没有使用网络。

NETWORK_LOADING

2

浏览器正在下载 htmlMediaElement 数据。

NETWORK_NO_SOURCE

3

没有找到 htmlMediaElement src。

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

常量

值

描述

MEDIA_ERR_ABORTED

1

用户要求浏览器停止加载媒体内容

MEDIA_ERR_NETWORK

2

媒体类型正确，但是发生了网络错误导致无法加载

MEDIA_ERR_DECODE

3

媒体类型正确，但是由于编码错误导致无法正常解码和播放

MEDIA_ERR__NOT_SUPPORTED

4

通过src属性指定的媒体文件浏览器不支持，无法播放