<audio> 标签属性:
- src:音乐的URL
- preload:预加载
- autoplay:自动播放
- loop:循环播放
- controls:浏览器自带的控制条
- <audio id=”media” src=”http://www.abc.com/test.mp3″ controls></audio>
<video> 标签属性:
- src:视频的URL
- poster:视频封面,没有播放时显示的图片
- preload:预加载
- autoplay:自动播放
- loop:循环播放
- controls:浏览器自带的控制条
- width:视频宽度
- height:视频高度
- <video id=”media” src=”http://www.abc.com/test.mp4″ controls width=”400px” heigt=”400px”></video>
获取HTMLVideoElement和HTMLAudioElement对象
- //audio可以直接通过new创建对象
- Media = new Audio(“http://www.abc.com/test.mp3″);
- //audio和video都可以通过标签获取对象
- Media = document.getElementByIdx_x(“media”);
Media方法和属性:
HTMLVideoElement 和 HTMLAudioElement 均继承自 HTMLMediaElement
- //错误状态
- 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 AudioVideo 标签,属性,方法,事件
This profile defines the requirements for Bluetooth™ devices necessary for the support of the Audio/Video Remote Control usage case. The requirements are expressed in terms of end-user services, and ...
HTML5新增加的audio和video标签让我们增加了很多惊喜,可以让我们更方便的在网页中播放音频和视频。但目前很多浏览器不支持,无法在旧版的IE浏览器中使用。html5media.min.js却是一个能让这两个标签在各种新旧版IE...
RTP: Audio and Video for the Internet By Colin Perkins Publisher : Addison Wesley Pub Date : June 12, 2003 ISBN : 0-672-32249-8 Pages : 432 The Real-time Transport Protocol (RTP) provides ...
浏览器HTML5标签video和audio支持 包含其相应支持的格式
If you embed audio or video in your website, you should use HTML5.
A&EM Alarm & Event Management 告警与事件管理 A&VE Audio / Video Editor 音频/视频编辑器 A-A Analog-Analog 模模 A-D Analog-Digital 模数 A/D Analog / Digital 模拟/数字 A/V Audio / Video 音频/视频 A...
html5 audio demo【修复拖动进度条bug】 html5 audio demo【修复拖动进度条bug
A jQuery plugin, jPlayer allows you to rapidly weave cross platform audio and video into your web pages. jPlayer's comprehensive API allows you to create innovative media solutions while support and ...
简单的html5 audio和video标签的用法,还不错哦,供小白参考
A&VE Audio / Video Editor 音频/视频编辑器 A-A Analog-Analog 模模 A-D Analog-Digital 模数 A/D Analog / Digital 模拟/数字 A/V Audio / Video 音频/视频 A/VP Audio / Video Panel 音频视频面板 AA ...
The Real-time Transport Protocol (RTP) provides a framework for delivery of audio and video across IP networks and unprecedented quality and reliability.
标签可以在HTML5浏览器中播放音频文件。 <audio>默认提供一个控制面板,但是有些时候我们只需要播放声音,控制面板由我们自己来定义其显示的状态。 这里我们可以使用JS来进行控制,代码如下: 复制代码代码...
An ASP.NET Gallery for Sharing Photos, Video, Audio and Other Media
CKEditor 添加Video插件(MP4)并且兼容HTML5 Video插件 1:把video文件复制到ckeditor/plugins/下面 2:ckeditor/config.js 中添加如下: a:在toolbar中['Image','Flash','Video'],配置加入“Video” 项。 b:配置 ...
html5入门代码大全(源码) 包含audio、video、canvas 、communication、forms、geolocation、intro、offline、storage、websocket、workers
html5 audio自定义样式以及播放控制demo。
本应用是利用HTML5提供的Audio标签搭配JQuery开发完成的音乐播放
Web-前端html+css从入门到精通 119. video标签与audio标签.zip
RTP Audio and Video for the Internet