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

文章目录

• 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 音频 / 视频 方法

HTML 音频 / 视频属性

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>Documenttitle>
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>Documenttitle>
head>
body>
    
    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+ 🌈🌈 🌈🌈 🌈 √ 🌈🌈 🌈🌈 🌈🌈 ×🌈🌈 🌈🌈 🌈🌈 √