HTML5之音频audio知识（部分vedio）
2024-05-16 23:42:56
2019独角兽企业重金招聘Python工程师标准>>> 
HTML总结（二）【HTML5之音频】
HTML5重点知识之音频
audio标签兼容性：
Internet Explorer 9+, Firefox, Opera, Chrome 以及 Safari 支持 <audio> 标签。
注释：Internet Explorer 8 以及更早的版本不支持 <audio> 标签。audio的常用属性：
src：音乐的URL
preload：预加载
autoplay：自动播放
loop：循环播放
controls：浏览器自带的控制条
duration： 返回媒体的播放总时长，单位秒
currentTime： 当前播放的时间，单位秒
buffered： 返回缓冲部件的时间范围(TimeRanges对象)
loop： 是否循环播放
volume： 音量值audio继承media的属性
audioTracks 返回可用的音轨列表（MultipleTrackList对象）
autoplay 媒体加载后自动播放
controller 返回当前的媒体控制器（MediaController对象）
controls 显示播控控件
crossOrigin CORS设置
currentSrc 返回当前媒体的URL
defaultMuted 缺省是否静音
defaultPlaybackRate 播控的缺省倍速
ended 返回当前播放是否结束标志
error 返回当前播放的错误状态
initialTime 返回初始播放的位置
mediaGroup 当前音视频所属媒体组 (用来链接多个音视频标签)
muted 是否静音
networkState 返回当前网络状态
paused 是否暂停
playbackRate 播放的倍速
played 当前播放部件已经播放的时间范围(TimeRanges对象)
preload 页面加载时是否同时加载音视频
readyState 返回当前的准备状态
seekable 返回当前可跳转部件的时间范围(TimeRanges对象)
seeking 返回用户是否做了跳转操作
startOffsetTime 返回当前的时间偏移(Date对象)
textTracks 返回可用的文本轨迹(TextTrackList对象)
videoTracks 返回可用的视频轨迹(VideoTrackList对象)audio的方法：
load(); //加载
play();//播放
pause();//暂停
stop();//暂停audio的事件(点击具体事件可查看案例)：
当音频/视频处于加载过程中时，会依次发生以下事件：loadstart>durationchange>loadedmetadata>loadeddata>progress>canplay>canplaythrough
注： audio和video同属于media所以很多事件都相同，所以使用同一个案例每次刷新的时候，触发加载过程中的七种事件代码来源于http://www.w3school.com.cn/tiy/t.asp?f=html5_av_event_canplay【修改了少部分】javascript监听audio事件的三种方法
第一种：<audio|video onloadstart="SomeJavaScriptCode">
第二种：audio|video.onloadstart=SomeJavaScriptCode;
第三种：使用 addEventListener()：
audio|video.addEventListener("loadstart", function(){//SomeJavaScriptCode}
);loadstart 当浏览器开始加载媒介数据时运行脚本
<html>
<body>
<video id="video1" controls="controls"><source src="http://www.w3school.com.cn/example/html5/mov_bbb.mp4" type="video/mp4"><source src="http://www.w3school.com.cn/example/html5/mov_bbb.ogg" type="video/ogg">原因一：博客插入视频/音频方法不对或者不支持。原因二你的浏览器不支持audio标签
</video>
<script>
myVid=document.getElementById("video1");
myVid.onloadstart=alert("视频已经加载完毕触发loadstart事件！但是因为alert中断而没有播放，当你点击alert确认键或者关闭alert时候，视频就会开始播放。");
</script>
</body>
</html>原因一：博客插入视频/音频方法不对或者不支持。原因二你的浏览器不支持audio标签
durationchange 当媒介长度改变时运行脚本
<html>
<body>
<video id="video1" controls="controls"><source src="http://www.w3school.com.cn/example/html5/mov_bbb.mp4" type="video/mp4"><source src="http://www.w3school.com.cn/example/html5/mov_bbb.ogg" type="video/ogg">
原因一：博客插入视频/音频方法不对或者不支持。原因二你的浏览器不支持audio标签
</video>
<script>
myVid=document.getElementById("video1");
myVid.ondurationchange=alert("视频已经加载完毕触发durationchange事件！但是因为alert中断而没有播放，当你点击alert确认键或者关闭alert时候，视频就会开始播放。");
</script>
</body>
</html>原因一：博客插入视频/音频方法不对或者不支持。原因二你的浏览器不支持audio标签
loadedmetadata 当媒介元素的持续时间以及其他媒介数据已加载时运行脚本
具体案例请复制loadstart或者canplay事件，重复性工作不再累赘书写onloadeddata 当加载媒介数据时运行脚本
具体案例请复制loadstart或者canplay事件，重复性工作不再累赘书写progress 当浏览器正在取媒介数据时运行脚本
具体案例请复制loadstart或者canplay事件，重复性工作不再累赘书写canplay 当媒介能够开始播放但可能因缓冲而需要停止时运行脚本
<html>
<body>
<video id="video1" controls="controls"><source src="http://www.w3school.com.cn/example/html5/mov_bbb.mp4" type="video/mp4"><source src="http://www.w3school.com.cn/example/html5/mov_bbb.ogg" type="video/ogg">原因一：博客插入视频/音频方法不对或者不支持。原因二你的浏览器不支持audio标签
</video>
<script>
myVid=document.getElementById("video1");
myVid.oncanplay=function(){alert("视频已经加载完毕触发canplay事件！但是因为alert中断而没有播放，当你点击alert确认键或者关闭alert时候，视频就会开始播放。");}
</script>
</body>
</html>
注意：因为前面依次触发了三个事件，所以这里时间段里已经不需要缓冲停止，这个事件不被触发，如果要测试请单独测试这个功能。原因一：博客插入视频/音频方法不对或者不支持。原因二你的浏览器不支持audio标签
canplaythrough 当媒介能够无需因缓冲而停止即可播放至结尾时运行脚本
具体案例请复制loadstart或者canplay事件，重复性工作不再累赘书写
emptied 当媒介资源元素突然为空时（网络错误、加载错误等）运行脚本
emptied这个事件不常用，如果遇到异常可以用其他事件代替。
ended 当媒介已抵达结尾时运行脚本
<html>
<body>
<div>当视频播放完以后触发alert事件"这个视频播放结束！"</div>
<video id="video_ended" controls="controls"><source src="http://www.w3school.com.cn/example/html5/mov_bbb.mp4" type="video/mp4"><source src="http://www.w3school.com.cn/example/html5/mov_bbb.ogg" type="video/ogg">Your browser does not support HTML5 video.
</video>
<script>
myVid=document.getElementById("video_ended");
myVid.addEventListener("ended", function(){alert("这个视频播放结束！");}
);
</script>
</body>
</html>当视频播放完以后触发alert事件"这个视频播放结束！"
Your browser does not support HTML5 video.
error 当在元素加载期间发生错误时运行脚本
浏览器支持：只有 Internet Explorer 9 支持 error 属性。
audio|video.error.code
MediaError 对象的 code 属性返回一个数字值，它表示音频/视频的错误状态：
1 = MEDIA_ERR_ABORTED - 取回过程被用户中止
2 = MEDIA_ERR_NETWORK - 当下载时发生错误
3 = MEDIA_ERR_DECODE - 当解码时发生错误
4 = MEDIA_ERR_SRC_NOT_SUPPORTED - 不支持音频/视频
<html>
<body>
<button onclick="getError()" type="button">获得错误状态</button>
<br />
<br />
<video id="video1" controls="controls" autoplay="autoplay"><source src="/example/html5/mov_broken.mp4" type="video/mp4"><source src="/example/html5/mov_broken.ogg" type="video/ogg">Your browser does not support HTML5 video.
</video>
<script>
myVid=document.getElementById("video1");
function getError(){ alert(myVid.error.code);}
</script>
</body>
</html>pause 当媒介数据暂停时运行脚本
这个很简单，就是发生暂停事件被触发。在pause()方法被执行的时候触发起来比较容易。
例如：一下的pauseBtn被点击的时候触发了pause事件，执行 alert("音频暂停播放");
<audio id="myAudio" controls="controls" autoplay="autoplay">
<button id ="pauseBtn">暂停audio</button>
var aud = document.getElementById("myAudio");
pauseBtn.onclick = function(){
aud.pause();
}
aud.onpause = function() {alert("音频暂停播放");
};play 当媒介数据将要开始播放时运行脚本
案例参照pause事件，不再累赘书写。playing 当媒介数据已开始播放时运行脚本
案例参照loadstart事件，不再累赘书写。ratechange 当媒介数据的播放速率改变时运行脚本
一般来说是当用户切换到慢动作或快进模式时候触发。readystatechange 当就绪状态（ready-state）改变时运行脚本
就绪状态监测媒介数据的状态seeked 当媒介元素的定位属性 [1] 不再为真且定位已结束时运行脚本
seeking 当媒介元素的定位属性为真且定位已开始时运行脚本
stalled 当取回媒介数据过程中（延迟）存在错误时运行脚本
suspend 当浏览器已在取媒介数据但在取回整个媒介文件之前停止时运行脚本
timeupdate 当媒介改变其播放位置时运行脚本
volumechange 当媒介改变音量亦或当音量被设置为静音时运行脚本
当音量变化的时候触发该事件waiting 当媒介已停止播放但打算继续播放时运行脚本
转载于:https://my.oschina.net/ramosyWeb/blog/490445
HTML5之音频audio知识（部分vedio）相关推荐
- html5audio音频自动缓冲,HTML5网络音频卡住了（缓冲问题？）(HTML5 web audio getting stuck (buffering issue?))...
HTML5网络音频卡住了(缓冲问题?)(HTML5 web audio getting stuck (buffering issue?)) 我正在制作一个(每周广播节目)音频网站,我一直遇到同样的问题 ...
- HTML5 Video(视频)，HTML 音频(Audio)
HTML5 Video(视频), 很多站点都会使用到视频. HTML5 提供了展示视频的标准. 检测您的浏览器是否支持 HTML5 视频: 检测 Web站点上的视频 直到现在,仍然不存在一项旨在网页上 ...
- 平凡前端之路_03.HTML5的音频视频多媒体
文章目录 HTML5音频视频 HTML5音频 HTML5视频 HTML5音频视频常用属性 HTML5音频视频常用方法 HTML5音频视频常用事件 HTML5音频视频特殊属性 浏览器不支持音频视频自动播 ...
- AAC音频基础知识及码流解析
AAC音频基础知识及码流解析 目录 AAC简介 AAC规格简介 AAC特点 AAC音频文件格式及代码解析 AAC元素信息 AAC文件处理流程 AAC解码流程 技术解析 1. AAC简介 AAC是高级音 ...
- HTML5新增音频标签（HTML5）
HTML5新增音频标签(HTML5) <!DOCTYPE html> <html lang="en"><head><meta charse ...
- Android音视频学习系列(五) — 掌握音频基础知识并使用AudioTrack、OpenSL ES渲染PCM数据
系列文章 Android音视频学习系列(一) - JNI从入门到精通 Android音视频学习系列(二) - 交叉编译动态库.静态库的入门 Android音视频学习系列(三) - Shell脚本入门 ...
- 音频基础知识 - PCM 浅析
PCM浅析 最近有个需求:对音频裁剪时,裁剪条的纵坐标必须是音频音量,以帮助用户更好的选择音频区域,所以就需要快速准确的提取出音频的音量列表.本文主要介绍下从mp4文件中提取音轨音量的方式,以及相关的 ...
- Android音频开发（1）：音频相关知识
Android 音频开发 目录 Android音频开发(1):音频相关知识 Android音频开发(2):使用AudioRecord录制pcm格式音频 Android音频开发(3):使用AudioRe ...
- # 蓝牙音频相关知识
蓝牙音频相关知识 文章目录 蓝牙音频相关知识 1 音频源 2 蓝牙音频编解码器 3 一些标准 4 蓝牙音频其他相关知识 4.1 蓝牙版本 4.2 ANC(主动降噪) 4.3 音响相关参数 4.4 音质 ...
最新文章
- 程序员：你真的该养生了
- 前端学习（1977）vue之电商管理系统电商系统之按钮与文本框的切换
- ASP.NET MVC 重点教程一周年版 第八回 Helper之演化
- egg extend ts_电竞5.21日王者荣耀KPL分析：DYG冲击西部榜首，TS战队能否虐菜？
- LPTSTR、LPCSTR、LPCTSTR、LPSTR的意义
- PyTorch 模型训练实用教程(附代码)
- 熵编码之哈夫曼树(五)
- CSS3 transform 旋转、偏移、缩放属性，CSS3 filter 滤镜，实现图像特效
- Ansible基本配置以及使用示例
- 从时间中提取年月(MySQL中extract函数用法)
- 【Unity3D插件】Dialogue System for Unity插件分享《对话系统插件》
- 一峰说：SpringCloud的基础了解和使用
- 浙江大学2019年数学分析考研试题
- Nofollow标签的写法以及nofollow使用介绍
- 前端性能优化（四）01-页面性能优化之优化原则——尽量减少HTTP请求 使用内容传送网络CDN 避免空src或空href值 启用gzip压缩 CSS放顶部，JS放底部 减少DNS查找
- 计算机与宽带路由的连接步骤,电脑路由器连接图文教程
- mvcnn代码详解_使用colab运行tensorflow版本的faster-rcnn
- PXE和Cobble实现自动装机
- 利用k8s集群部署第一个容器化应用
- 10个必须掌握的SQL常用语句
热门文章
- php imap_open效率低,求救，为什么 imap 连接这么慢
- java随机产生100个大小写字母_Java生成固定长度的随机字符串(以大小写字母和数字)...
- java 发送邮件 菜鸟_Java发送邮件的方法
- 大学毕业想要转行学软件测试，怎样入门比较好？
- android afinal 图片,android中使用afinal一行代码显示网络图片
- java奇怪的问题_一个奇怪的Java集合问题
- cloning java_深入浅出Java中的clone克隆方法，写得太棒了！
- 教程：16、信号机制与信号处理
- PHP+XML留言板
- android 星星流逝动画,Android Loading动画分析--续集