HTML5的多媒体支持

  • audio、video标签
  • 1.1 标签属性
  • 1.2 HTMLAudioElement和HTMLVideoElement 支持的方法
  • 了解当前媒体的状态
  • 1.3 audio和video的事件


audio、video标签

■ 定义声音播放器，比如音乐和其他音频流，支持MP3、WAV、Ogg三种格式
■ 定义视频播放器，比如视频片段或其他视频流，支持MP4、WebM、Ogg三种格式

1.1 标签属性

属性名

说明

src

设置多媒体文件的路径

controls

设置是否使用播放控件 controls 使用 没写就不显示

autoplay

如果设置为autoplay，表示音频和视频加载完成后会自动播放，默认不设置，配合muted使用

loop

如果设置为loop，表示音频和视频播放完成之后会再次重复播放，默认不设置设置

muted

如果设置为muted，表示音频输出为静音

preload

1.auto 表示预加载音频和视频 2.metadata 表示预加载音频和视频的元数据，如时间、大小、第一帧等 3.none 表示不执行预加载

poster

只对有效，设置视频加载完成播放前显示的图片，属性值为图片URL

width

只对有效，设置视频宽度

height

只对有效，设置视频高度

1.2 HTMLAudioElement和HTMLVideoElement 支持的方法

方法名

说明

play()

播放

pause()

暂停

load()

重新加载

canPlayType()

判断支持的type类型，属性值可以是MIME字符串、codes属性，也可以是MIME字符串并带codes属性。他的返回值有以下3种：probably，表示浏览器支持；maybe，表示浏览器可能支持；空字符串，表示浏览器不支持

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <audio id="audio1" controls='controls'>
        <source src="/audio/snow.mp3" type="audio/mp3">
        当前浏览器不支持audio
    </audio>
    <button onclick="playMusic()">播放</button>
    <button onclick="pauseMusic()">暂停</button>
    <button onclick="loadMusic()">重新加载</button>
    <button onclick="showCanPlay()">显示支持的音频格式</button>
    <p id="text"></p>
</body>
<script>
    var player = document.getElementById('audio1');
    function playMusic() {
        player.play();
    }
    function pauseMusic() {
        player.pause();
    }
    function loadMusic() {
        player.load();
    }
    function showCanPlay() {
        var str = player.canPlayType('audio/mp3') + 'MP3格式';
        document.getElementById('text').innerHTML = str;
    }
    
</script>

</html>

audio IOS支持格式的参数_ide

了解当前媒体的状态

■ 状态错误

属性名

说明

error

正常返回null，异常返回MediaError对象

MediaError.code

MEDIA_ERR_ABORTED(数值1)：用户终止 MEDIA_ERR_NETWORK(数值2)：网络错误 MEDIA_ERR_DECODE(数值3)：解码错误 MEDIA_ERR_SRC_NOT_SUPPORTED(数值4)：URL无效

■ 网络状态

属性名

说明

currentSrc

返回当前资源的URL

src

返回或设置当前资源的URL

networkState

返回当前音频和视频的网络状态分别为 NETWORK_EMPTY(数值0)：处于初始状态；NETWORK_IDLE(数值1)：处于空闲状态，还未建立网络连接；NETWORK_LOADING(数值2)：正在加载音频和视频；NETWORK_NO_SOURCE(数值3)：没有找到资源

preload

设置或返回preload属性值

■ 准备状态

属性名

说明

readyState

HAVE_NOTHING(数值0)：还未获取任何数据； HAVE_METADATA(数值1)：已获取音频和视频的元数据，还未获取媒体数据，还不能播放 HAVE_CURRENT_DATA(数值2)：已获取当前位置的媒体数据，还未获取下一位置的媒体数据，或者当前位置已经是最后了 HAVE_FUTRUE_DATA(数值3)：既获取了当前数据，也获取了下一位置的数据 HAVE_ENOUGH_DATA(数值4)：已经获取了足够多位置的媒体数据，播放器可以顺利的向后播放

seeking

返回音频或视频是否定位到指定的时间点

■ 播放状态

属性名

说明

currentTime

返回或设置当前播放的音频和视频所在的时间点，单位为秒

startTime

返回音频和视频开始的时间

duration

返回当前音频和视频的长度，单位为秒，如果未设置，则返回NaN

defaultPlaybackRate

设置或返回音频和视频的默认播放速度

playbackRate

设置或返回音频和视频的的当前播放速度

ended

返回是否结束

autoPlay

返回或设置是否在加载完成后随机播放音频和视频

loop

返回或设置是否循环播放

controls

返回或设置是否有默认控制条

volume

返回或设置音量大小

meted

返回或设置静音，true表示静音，false表示不静音

bufferd

返回TimeRanges区域对象，通过该对象可以获取浏览器已经缓存的媒体数据。缓冲范围指的是已缓冲音频和视频的时间范围，如果用户在音频和视频中跳跃播放，会得到多个缓冲范围

seekable

返回TimeRanges区域对象，用于获取音频和视频可定位的时间段

paused

返回是否暂停，true或false

played

返回已经播放的TimeRanges区域对象

TimeRanges.length

区域对象的段数

TimeRanges.start(index)

返回指定index段的开始时间

TimeRanges.end(index)

返回指定index段的结束时间

1.3 audio和video的事件

事件名

说明

onabort

在还未下载完媒体数据而被中断时触发

oncanplay

在文件就绪可以开始播放时触发，在播放期间可能需要缓冲

oncanplaythrough

当文件就绪可以开始播放时触发，在播放期间不需要缓冲

ondurationchange

当音频和视频的长度发生改变时触发

onemptied

当发生故障或文件不可用时触发，如网络错误、加载错误等

onended

当视频和音频播放时结束时触发

onerror

当文件加载期间发生错误时触发

onloadeddata

当音频和视频媒体数据加载完成时触发

onloadedmatadata

当视频和音频的元数据加载完成时触发

onloadstart

当视频和音频开始加载时触发

onpause

当视频和音频暂停时触发

onplay

当视频和音频播放时触发

onplaying

当视频和音频正在播放时触发

onprogress

当视频和音频正在加载时触发

onratechange

当播放速率发生改变时触发

onreadystatechange

当readystate属性值发生改变时触发

onseeked

当成功定位到视频和音频的指定位置时触且seeking属性值设置为false时触发

onseeking

当seeking元素设置为true时触发

onstalled

当浏览器不论何种原因未能取回音频和视频媒体数据时触发

onsuspend

当视频和音频媒体数据完全加载之前不论何种原因终止取回媒体数据时触发

ontimeupdate

当播放位置发生改变时触发

onvolumechange

当音量发生改变时触发

onwaiting

当视频和音频由于无后面内容正在缓冲而被暂停时触发

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <audio id="audio3" src="/audio/snow.mp3" controls="controls"></audio>
    <p id="text"></p>
</body>
<script>
    var player = document.getElementById('audio3');
    var detail = document.getElementById('text');
    // 播放的同时刷新进度条
    // 事件 当播放位置发生改变时触发 ontimeupdate
    player.ontimeupdate = function() {
        detail.innerHTML = parseInt(player.currentTime) + '秒/' + parseInt(player.duration) + '秒/';
    }
</script>
</html>

audio IOS支持格式的参数_数据_02