html5多媒体Video/Audio
video:
- OGG = 带有Theora视频编码+Vorbis音频编码的ogg文件 浏览器支持:F,C,O
- MPEG4 = 带有H.264视频编码+AAC音频编码的MPEG4文件 浏览器支持:S,C
- WebM = 带有VP8视频格式编码+Vorbis音频编码的WebM格式 浏览器支持:I、F、C、O
<video src="http://www.bigaody.com" controls="controls"></video> <video src="文件地址" controls="controls">
您的浏览器暂不支持video标签。播放视频
</video> <video controls="controls" width="300">
<source src="move.ogg" type='video/ogg; codecs="theora, vorbis"'>
<source src="move.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
<source src="move.webm" type='video/webm; codecs="vp8, vorbis"'> 您的浏览器暂不支持video标签。播放视频
</video>
属性 | 描述 |
---|---|
audioTracks |
返回表示可用音频轨道的 AudioTrackList 对象。 |
autobuffer | 设置为浏览器缓冲方式,不设置autoplay才有效 |
autoplay | 设置或返回是否在就绪(加载完成)后随即播放视频。 |
buffered | 返回表示视频已缓冲部分的 TimeRanges 对象。 |
controller | 返回表示视频当前媒体控制器的 MediaController 对象。 |
controls | 设置或返回视频是否应该显示控件(比如播放/暂停等)。 |
crossOrigin | 设置或返回视频的 CORS 设置。 |
currentSrc | 返回当前视频的 URL。 |
currentTime | 设置或返回视频中的当前播放位置(以秒计)。 |
defaultMuted | 设置或返回视频默认是否静音。 |
defaultPlaybackRate | 设置或返回视频的默认播放速度。 |
duration | 返回视频的长度(以秒计)。 |
ended | 返回视频的播放是否已结束。 |
error | 返回表示视频错误状态的 MediaError 对象。 |
height | 设置或返回视频的 height 属性的值。 |
loop | 设置或返回视频是否应在结束时再次播放。 |
mediaGroup | 设置或返回视频所属媒介组合的名称。 |
muted | 设置或返回是否关闭声音。 |
networkState | 返回视频的当前网络状态。 |
paused | 设置或返回视频是否暂停。 |
playbackRate | 设置或返回视频播放的速度。 |
played | 返回表示视频已播放部分的 TimeRanges 对象。 |
poster | 设置或返回视频的 poster 属性的值。 |
preload | 设置或返回视频的 preload 属性的值。 |
readyState | 返回视频当前的就绪状态。 |
seekable | 返回表示视频可寻址部分的 TimeRanges 对象。 |
seeking | 返回用户当前是否正在视频中进行查找。 |
src | 设置或返回视频的 src 属性的值。 |
startDate | 返回表示当前时间偏移的 Date 对象。 |
textTracks | 返回表示可用文本轨道的 TextTrackList 对象。 |
videoTracks | 返回表示可用视频轨道的 VideoTrackList 对象。 |
volume | 设置或返回视频的音量。 |
width | 设置或返回视频的 width 属性的值。 |
对象方法
方法 | 描述 |
---|---|
addTextTrack() | 向视频添加新的文本轨道。 |
canPlayType() | 检查浏览器是否能够播放指定的视频类型。 |
load() | 重新加载视频元素。 |
play() | 开始播放视频。 |
pause() | 暂停当前播放的视频。 |
audio
当前,audio 元素支持三种音频格式:
IE 9 | Firefox 3.5 | Opera 10.5 | Chrome 3.0 | Safari 3.0 | |
---|---|---|---|---|---|
Ogg Vorbis (免费) | √ | √ | √ | ||
MP3 (收费) | √ | √ | √ | ||
Wav(收费) | √ | √ | √ |
对象属性
属性 | 描述 |
---|---|
audioTracks | 返回表示可用音频轨道的 AudioTrackList 对象。 |
autoplay | 设置或返回是否在就绪(加载完成)后随即播放音频。 |
buffered | 返回表示音频已缓冲部分的 TimeRanges 对象。 |
controller | 返回表示音频当前媒体控制器的 MediaController 对象。 |
controls | 设置或返回音频是否应该显示控件(比如播放/暂停等)。 |
crossOrigin | 设置或返回音频的 CORS 设置。 |
currentSrc | 返回当前音频的 URL。 |
currentTime | 设置或返回音频中的当前播放位置(以秒计)。 |
defaultMuted | 设置或返回音频默认是否静音。 |
defaultPlaybackRate | 设置或返回音频的默认播放速度。 |
duration | 返回音频的长度(以秒计)。 |
ended | 返回音频的播放是否已结束。Boolean类型 |
error | 返回表示音频错误状态的 MediaError 对象。 |
loop | 设置或返回音频是否应在结束时再次播放。Boolean类型 |
mediaGroup | 设置或返回音频所属媒介组合的名称。 |
muted | 设置或返回是否关闭声音。Boolean类型 |
networkState | 返回音频的当前网络状态。 |
paused | 设置或返回音频是否暂停。 |
playbackRate | 设置或返回音频播放的速度。 |
played | 返回表示音频已播放部分的 TimeRanges 对象。 |
preload | 设置或返回音频的 preload 属性的值。音频在页面加载时预加载,并预备播放 |
readyState | 返回音频当前的就绪状态。 |
seekable | 返回表示音频可寻址部分的 TimeRanges 对象。 |
seeking | 返回用户当前是否正在音频中进行查找。 |
src | 设置或返回音频的 src 属性的值。 |
textTracks | 返回表示可用文本轨道的 TextTrackList 对象。(目前主流浏览器都不支持) |
volume | 设置或返回音频的音量。 |
autoplay 当歌曲加载后自动播放,但是只有pc端可以实现 移动端不行(pc端的浏览器要比移动端的完善很多,对有些属性支持也会好很多)
以上是标签内的属性 当然也可以作为对象属性来调取控制auido.*
语法
在 HTML 中:
<audio src="文件地址" controls="controls"></audio>
< audio src="文件地址" controls="controls">
您的浏览器暂不支持audio标签。播放视频
</ audio>
< audio controls="controls" >
<source src="happy.MP3" type="video/mpeg" >
<source src="happy.ogg" type="video/ogg" >
您的浏览器暂不支持audio标签。播放视频
</ audio>
注:controls为Boolean类型,controls="controls"表示true,因为Boolean("controls")
= true,字符串不为空都为true
在JavaScript中
var myAudio = document.getElementById("myAudio");
myAudio.setAttribute("loop",true);
myAudio.play();
audio不单单是个标签 他也是window下的一个对象,对象就有属性和方法,作为对象他有哪些常用的方法呢
11.Audio 对象方法
方法 | 描述 |
---|---|
addTextTrack() | 向音频添加新的文本轨道。 |
canPlayType() | 检查浏览器是否能够播放指定的音频类型。 |
fastSeek() | 在音频播放器中指定播放时间。 |
getStartDate() | 返回新的 Date 对象,表示当前时间线偏移量。 |
load() | 重新加载音频元素。 |
play() | 开始播放音频。 |
pause() | 暂停当前播放的音频。 |
详情: http://www.w3school.com.cn/jsref/dom_obj_audio.asp
音频/视频 DOM 事件
当音频/视频处于加载过程中时,会依次发生以下事件:
loadstart 当浏览器开始寻找指定的音频/视频时,会发生 loadstart 事件。即当加载过程开始时。
durationchange 当指定音频/视频的时长数据发生变化时,发生 durationchange 事件。
当音频/视频加载后,时长将由 "NaN" 变为音频/视频的实际时长。
loadedmetadata 当指定的音频/视频的元数据已加载时,会发生 loadedmetadata 事件。
音频/视频的元数据包括:时长、尺寸(仅视频)以及文本轨道
loadeddata 当当前帧的数据已加载,但没有足够的数据来播放指定音频/视频的下一帧时,会发生 loadeddata 事件。
progress 当浏览器正在下载指定的音频/视频时,会发生 progress 事件。
canplay 当浏览器能够开始播放指定的音频/视频时,会发生 canplay 事件。
canplaythrough 当浏览器预计能够在不停下来进行缓冲的情况下持续播放指定的音频/视频时,会发生 canplaythrough 事件。
注意:所有主流浏览器都支持 progress 事件。但Internet Explorer 8 及之前的版本不支持该事件。
在 HTML 中:
<audio|video onprogress="SomeJavaScriptCode">
在 JavaScript 中:
audio|video.onprogress=SomeJavaScriptCode;
使用 addEventListener():
audio|video.addEventListener("progress", function()
{
//SomeJavaScriptCode
}
);
html5多媒体Video/Audio的更多相关文章
- css总结16:HTML5 多媒体音频(Audio)视频(video )
1 显示嵌入网页中的 MP3 文件: <embed height="50" width="100" src="horse.mp3"&g ...
- 使用HTML5抓取 Audio & Video
原文地址: http://www.html5rocks.com/en/tutorials/getusermedia/intro/ 本地化的文章: http://www.html5rocks.com/z ...
- html5之音频、视频(video&audio)
音频&视频 本篇为本人的学习笔记. 在Html5之前,浏览器对于视频和音频的处理并没有一个标准.因此在网页中看到的视频,都是通过第三插件的方式嵌入的,如:QuickTime.RealPlaye ...
- Html5多媒体相关的API---video
Html5多媒体相关的API---video 在HTML5中,新增了两个元素---video元素与audio元素,其中video元素专门用来播放网络上的视频或电影,而audio元素专门用来播放网络上的 ...
- HTML5 多媒体音视频处理
HTML5 多媒体音视频处理 版权声明:未经博主授权,内容严禁转载 ! 音频处理 - audio HTML5 Audio 音频 目前大多数音频是通过哦插件的形式来播放的. 不同浏览器在网页上播放音频的 ...
- 【HTML5】Web Audio API打造超炫的音乐可视化效果
HTML5真是太多炫酷的东西了,其中Web Audio API算一个,琢磨着弄了个音乐可视化的demo,先上效果图: 项目演示:别说话,点我! 源码已经挂到github上了,有兴趣的同学也可以去st ...
- HTML5的Video标签的属性,方法和事件汇总
<video>标签的属性 src :视频的属性 poster:视频封面,没有播放时显示的图片 preload:预加载 autoplay:自动播放 loop:循环播放 controls:浏览 ...
- HTML5中video 和 ogg
HTML5中 的ogg 从网上学习HTML5之video时看到了下面的代码,不太清楚ogg是什么,于是搜索了一些知识点供了解.
- HTML5外包团队-技术分享【使用HTML5的VIDEO标记播放RTSP视频流】
使用HTML5的VIDEO播放RTSP实时视频流源代码: <!DOCTYPE html> <html><head> <meta http-equiv=&quo ...
随机推荐
- 洛谷 P2824 [HEOI2016/TJOI2016]排序 解题报告
P2824 [HEOI2016/TJOI2016]排序 题意: 有一个长度为\(n\)的1-n的排列\(m\)次操作 \((0,l,r)\)表示序列从\(l\)到\(r\)降序 \((1,l,r)\) ...
- Spark集群基础概念 与 spark架构原理
一.Spark集群基础概念 将DAG划分为多个stage阶段,遵循以下原则: 1.将尽可能多的窄依赖关系的RDD划为同一个stage阶段. 2.当遇到shuffle操作,就意味着上一个stage阶段结 ...
- luoguP5105 不强制在线的动态快速排序
emm 可重集合没用用.直接变成不可重复集合 有若干个区间 每个区间形如[L,R] [L,R]计算的话,就是若干个连续奇数的和.拆位统计1的个数 平衡树维护 加入一个[L,R],把相交的区间合并.之后 ...
- HDU 3480 斜率dp
Division Time Limit: 10000/5000 MS (Java/Others) Memory Limit: 999999/400000 K (Java/Others)Total ...
- jvm容器的关系
jvm实例,tomcat容器,spring容器,在内存中的关系5 1.一个java项目对应一个jvm 吗? 2.tomcat里面加载多个java项目 ,是不是用了一个jvm? 3.java项目中的sp ...
- [吴恩达机器学习笔记]12支持向量机5SVM参数细节
12.支持向量机 觉得有用的话,欢迎一起讨论相互学习~Follow Me 参考资料 斯坦福大学 2014 机器学习教程中文笔记 by 黄海广 12.5 SVM参数细节 标记点选取 标记点(landma ...
- 分块+二分,统计对数 CDOJ
http://acm.uestc.edu.cn/#/problem/show/1157 数列(seq) Time Limit: 3000/1000MS (Java/Others) Memory ...
- 利用ChainMap进行多字典合并
aa = [{105199: 'https://picx0.jpeg'}, {105187: 'https://picx1.jpeg'}, {105170: 'https:picx2.jpeg'}, ...
- hihocoder1415 后缀数组三·重复旋律3
传送门:http://hihocoder.com/problemset/problem/1415 [题解] 考虑求出两串合在一起(中间加分隔符)后缀数组,就是要求任意在两个串中的$i, j$,$\mi ...
- 【CodeForces】915 E. Physical Education Lessons 线段树
[题目]E. Physical Education Lessons [题意]10^9范围的区间覆盖,至多3*10^5次区间询问. [算法]线段树 [题解]每次询问至多增加两段区间,提前括号分段后线段树 ...