html5中audio属性和方法

简介: <audio> 标签属性:src:音乐的URLpreload:预加载autoplay:自动播放loop:循环播放controls:浏览器自带的控制条

<audio> 标签属性:src:音乐的URLpreload:预加载autoplay:自动播放loop:循环播放controls:浏览器自带的控制条


1

<audioid="media"src="http://www.abc.com/test.mp3"controls></audio>

<video> 标签属性:src:视频的URLposter:视频封面,没有播放时显示的图片preload:预加载autoplay:自动播放loop:循环播放controls:浏览器自带的控制条width:视频宽度height:视频高度


<videoid="media"src="http://www.abc.com/test.mp4"controls width="400px"heigt="400px"></video>

获取HTMLVideoElement和HTMLAudioElement对象

 //audio可以直接通过new创建对象
 Media = newAudio("http://www.abc.com/test.mp3");
 //audio和video都可以通过标签获取对象
 Media = document.getElementById("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 .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((newDate()).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"); //音量改变



目录
相关文章
|
缓存 JavaScript 前端开发
Vue 项目中动态添加 HTML 元素的方法与实践
本文探讨了 Vue 中动态添加 HTML 元素的多种技术方案,包括条件渲染(v-if/v-show)、动态组件(component :is)、手动挂载($mount)及 Vuex 状态管理等方法。通过实例分析,如动态表单生成器与全局模态框服务,展示了这些方案在实际开发中的应用。同时提供了性能优化建议和注意事项,帮助开发者根据需求选择最佳方式,在保持 Vue 响应式特性的同时实现灵活交互。附带代码示例,便于理解和实践。
832 2
|
移动开发 HTML5
HTML5 表单属性3
`&lt;input&gt;` 标签的 `formaction`、`formenctype` 和 `formmethod` 属性分别用于指定表单提交的 URL 地址、数据编码类型和提交方法,这些属性可覆盖 `&lt;form&gt;` 标签中的相应属性,并且主要适用于 `type=&quot;submit&quot;` 和 `type=&quot;image&quot;` 的输入类型。
|
移动开发 JavaScript 前端开发
HTML5 表单属性7
`pattern` 属性使用正则表达式验证 `&lt;input&gt;` 元素的值,适用于 `text`, `search`, `url`, `tel`, `email`, 和 `password` 类型。
|
移动开发 UED HTML5
HTML5 表单属性6
`min`、`max` 和 `step` 属性用于限制 `&lt;input&gt;` 标签中的数值或日期范围。例如,可以设置日期选择器的最早和最晚日期,或限制数字输入框的值范围。`multiple` 属性允许在 `&lt;input&gt;` 中选择多个值,适用于邮箱和文件类型。这些属性增强了表单控件的功能性和用户体验。
|
移动开发 HTML5
HTML5 表单属性4
`formnovalidate` 属性是一个布尔属性,用于 `&lt;input&gt;` 元素,指示该输入在表单提交时不需验证,可覆盖 `&lt;form&gt;` 元素的 `novalidate` 属性,常与 `type=&quot;submit&quot;` 一起使用。示例中展示了如何通过两个提交按钮(一个使用验证,另一个不使用)实现不同的表单提交方式。
|
移动开发 HTML5
HTML5 表单属性5
`height` 和 `width` 属性用于 `&lt;input&gt;` 标签中的 `image` 类型,定义图像的高度和宽度。
|
移动开发 数据安全/隐私保护 HTML5
HTML5 表单属性8
`required`属性确保表单提交前输入框不能为空,适用于多种类型的 `&lt;input&gt;` 标签,如文本、邮箱、密码等。`step`属性则用于指定输入域中合法数值的间隔,常与`max`和`min`属性配合使用,适用于数字、日期等类型。例如,设置`&lt;input type=&quot;number&quot; step=&quot;3&quot;&gt;`可使输入值以3为单位递增或递减。
|
移动开发 前端开发 HTML5
论HTML5 Audio 标签歌词同步的实现
HTML5草案里面其实有原生的字幕标签( Tag)的,但使用的是vtt格式的文件,非常规的字幕(.sub, .srt)或歌词文件(.lrc)。 用法如下(代码来自W3School):  但遗憾的是,使用起来还有不便之处。
2193 0
|
存储 前端开发 JavaScript
仿真银行app下载安装, 银行卡虚拟余额制作app,用html+css+js实现逼真娱乐工具
这是一个简单的银行账户模拟器项目,用于学习前端开发基础。用户可进行存款、取款操作,所有数据存储于浏览器内存中
|
人工智能 程序员 UED
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
1164 21
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子