HTML5——多媒体标签＜audio＞和＜video＞

最新推荐文章于 2024-08-13 08:51:52 发布

cb++

最新推荐文章于 2024-08-13 08:51:52 发布

阅读量542

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/weixin_44768794/article/details/115003772

版权

HTML5的多媒体支持

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>

在这里插入图片描述

了解当前媒体的状态

■ 状态错误

属性名	说明
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	返回音频或视频是否定位到指定的时间点

属性名

说明

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>