首页 前端知识 HTML5 Audio/Video 标签、属性、方法、事件汇总

HTML5 Audio/Video 标签、属性、方法、事件汇总

2024-05-08 10:05:23 前端知识 前端哥 249 830 我要收藏

文章目录

  • HTML 音频/视频 方法
  • HTML 音频/视频属性
  • HTML 音频/视频事件
  • 示例代码
    • 事件代码:

audio用于播放网络上的音频文件,video用于播放网络上的视频文件。audio和video

标签的属性、方法和事件大部分都是共通的。在不同的浏览器中,它们会有不同的样式。

audio 基本语法

src 指定当前播放的音频文件,controls播放控制器,loop歌曲循环,autoplay自动播放 (chrome66之后被禁止)主流浏览器已经关闭了自动播放,需要js触发才行,preload 预加载,如果使用了autoplay这个属性preload就失效了。

<audio src="xxxx.mp3" controls="controls" loop="loop" autoplay="autoplay">
 您的浏览器不支持html5的audio标签
</audio>

video基本语法:

src源,controls播放控制器,loop 循环播放,autoplay 自动播放,height,width,宽度和高度,在Audio里面不能指定,但是在Video里面是可以的,muted 静音,poster 预览图(当视频没有播放或者正在加载时展示给用户的一张图片,为了交互的友好性),preload 预加载,和autoplay一块时失效。

<video
 src="xxxx.mp4"
 controls="controls"
 loop="loop"
 autoplay="autoplay">
 您的浏览器不支持html5的video标签
</video>

HTML 音频/视频 方法

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

HTML 音频/视频属性

属性描述
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设置或返回音频/视频的音量。

HTML 音频/视频事件

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

示例代码

添加音频

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <audio controls autoplay loop muted>
        <source src="./media/music.mp3">
        <source src="./media/music.ogg">
    </audio>
</body>
</html>

添加视频

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 
        controls:控制播放暂停的按钮 
        autoplay:自动播放
        loop:无限循环
        muted:静音
		poster:视频封面
    -->
    <video width="500" height="300" controls loop autoplay muted poster="./media/rt.jpg">
        <source src="./media/explore_promo.mp4">
        <source src="./media/video.mp4">
    </video>
</body>
</html>

效果演示:
在这里插入图片描述

Js代码

 //错误状态  
       Media.error; //null:正常  
       Media.error.code; //1.用户终止 2.网络错误 3.解码错误 4.URL无效  
      
    //网络状态  
       Media.currentSrc; //返回当前资源的URL  
       Media.src = value; //返回或设置当前资源的URL  
       Media.canPlayType(type); //是否能播放某种格式的资源  
       Media.networkState; //0.此元素未初始化  1.正常但没有使用网络  2.正在下载数据  3.没有找到资源  
       Media.load(); //重新加载src指定的资源  
       Media.buffered; //返回已缓冲区域,TimeRanges  
       Media.preload; //none:不预载 metadata:预载资源信息 auto:  
      
    //准备状态  
       Media.readyState;    //1:HAVE_NOTHING 2:HAVE_METADATA 3.HAVE_CURRENT_DATA 4.HAVE_FUTURE_DATA 5.HAVE_ENOUGH_DATA  
       Media.seeking; //是否正在seeking  
      
    //回放状态  
       Media.currentTime = value; //当前播放的位置,赋值可改变位置  
       Media.startTime; //一般为0,如果为流媒体或者不从0开始的资源,则不为0  
       Media.duration; //当前资源长度 流返回无限  
       Media.paused; //是否暂停  
       Media.defaultPlaybackRate = value;//默认的回放速度,可以设置  
       Media.playbackRate = value;//当前播放速度,设置后马上改变  
       Media.played; //返回已经播放的区域,TimeRanges,关于此对象见下文  
       Media.seekable; //返回可以seek的区域 TimeRanges  
       Media.ended; //是否结束  
       Media.autoPlay;  //是否自动播放  
       Media.loop;  //是否循环播放  
       Media.play();    //播放  
       Media.pause();   //暂停  
      
    //控制  
       Media.controls;//是否有默认控制条  
       Media.volume = value; //音量  
       Media.muted = value; //静音  
      
       //TimeRanges(区域)对象  
       TimeRanges.length; //区域段数  
       TimeRanges.start(index) //第index段区域的开始位置  
       TimeRanges.end(index) //第index段区域的结束位置  

事件代码:

     eventTester = function(e){  
    Media.addEventListener(e,function(){  
        console.log((new Date()).getTime(),e);  
    });  
}  
  
eventTester(“loadstart”);   //客户端开始请求数据  
eventTester(“progress”);    //客户端正在请求数据  
eventTester(“suspend”);     //延迟下载  
eventTester(“abort”);       //客户端主动终止下载(不是因为错误引起),  
eventTester(“error”);       //请求数据时遇到错误  
eventTester(“stalled”);     //网速失速  
eventTester(“play”);        //play()和autoplay开始播放时触发  
eventTester(“pause”);       //pause()触发  
eventTester(“loadedmetadata”);  //成功获取资源长度  
eventTester(“loadeddata”);  //  
eventTester(“waiting”);     //等待数据,并非错误  
eventTester(“playing”);     //开始回放  
eventTester(“canplay”);     //可以播放,但中途可能因为加载而暂停  
eventTester(“canplaythrough”); //可以播放,歌曲全部加载完毕  
eventTester(“seeking”);     //寻找中  
eventTester(“seeked”);      //寻找完毕  
eventTester(“timeupdate”);  //播放时间改变  
eventTester(“ended”);       //播放结束  
eventTester(“ratechange”);  //播放速率改变  
eventTester(“durationchange”);  //资源长度改变  
eventTester(“volumechange”);    //音量改变  

各浏览器目前对html5视频格式的支持:

浏览器 影音格式 🌈🌈 🌈🌈 Ogg Theora 🌈🌈 MP4(H.264) 🌈🌈 WebM
Microsoft Internet Explorer9 🌈 ×🌈🌈🌈🌈 🌈🌈 √🌈🌈 🌈🌈🌈 ×
Mozilla Firefox5+ 🌈🌈 🌈🌈 √ 🌈🌈 🌈🌈 🌈🌈 × 🌈🌈 🌈🌈 🌈√
Google Chrome13+ 🌈🌈 🌈√🌈🌈 🌈🌈 🌈🌈 √🌈🌈 🌈🌈 🌈🌈 √
Apple Safari5+ 🌈🌈 🌈🌈 × 🌈🌈 🌈🌈 🌈🌈 √ 🌈🌈 🌈🌈 🌈🌈 ×
Opera11+ 🌈🌈 🌈🌈 🌈 √ 🌈🌈 🌈🌈 🌈🌈 ×🌈🌈 🌈🌈 🌈🌈 √

转载请注明出处或者链接地址:https://www.qianduange.cn//article/7539.html
标签
评论
发布的文章

Unity读取Json的几种方法

2024-05-12 17:05:57

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!