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"); //音量改变



目录
相关文章
|
4天前
|
移动开发 HTML5
HTML5 表单属性3
`&lt;input&gt;` 标签的 `formaction`、`formenctype` 和 `formmethod` 属性分别用于指定表单提交的 URL 地址、数据编码类型和提交方法,这些属性可覆盖 `&lt;form&gt;` 标签中的相应属性,并且主要适用于 `type=&quot;submit&quot;` 和 `type=&quot;image&quot;` 的输入类型。
|
26天前
|
搜索推荐 前端开发 UED
哪些 HTML 全局属性在 SEO 优化中比较重要?
【10月更文挑战第27天】这些HTML全局属性通过不同的方式为搜索引擎提供了更丰富、准确的页面信息,有助于提高页面的可索引性、相关性和用户体验,从而在SEO优化中发挥着重要的作用。开发者应充分重视并合理运用这些属性,以提升网站在搜索引擎中的排名和流量。
|
26天前
|
前端开发 搜索推荐 算法
|
26天前
|
前端开发 JavaScript 开发者
HTML 中的全局属性和局部属性是否可以相互覆盖?
【10月更文挑战第27天】HTML中的全局属性和局部属性在正常使用情况下不会相互覆盖,但在涉及CSS样式和JavaScript操作等特殊情况下,可能会出现类似覆盖的效果。开发者需要理解属性的功能、作用域和优先级,遵循最佳实践,以确保HTML文档的结构清晰、功能正常且易于维护。
|
26天前
|
存储 移动开发 前端开发
HTML全局属性
【10月更文挑战第27天】
HTML 属性参考手册
HTML属性参考手册提供了常用的HTML属性列表,包括`class`、`id`、`style`、`title`等,用于定义元素的样式、唯一标识、额外信息等。此外,还包括`href`、`src`、`alt`、`name`、`value`、`target`、`type`和`placeholder`等,分别用于链接、资源路径、替代文本、表单元素名称和值、链接打开方式、表单元素类型及占位符文本的定义。
HTML 属性
HTML属性为元素提供额外信息,格式为name=&quot;value&quot;,置于开始标签内。如&lt;a href=&quot;http://www.runoob.com&quot;&gt;,其中href为属性名,URL为值。属性值应加引号,推荐使用小写。
|
6天前
|
前端开发 JavaScript 搜索推荐
HTML与CSS在Web组件化中的核心作用及前端技术趋势
本文探讨了HTML与CSS在Web组件化中的核心作用及前端技术趋势。从结构定义、语义化到样式封装与布局控制,两者不仅提升了代码复用率和可维护性,还通过响应式设计、动态样式等技术增强了用户体验。面对兼容性、代码复杂度等挑战,文章提出了相应的解决策略,强调了持续创新的重要性,旨在构建高效、灵活的Web应用。
19 6
|
23天前
|
移动开发 前端开发 JavaScript
[HTML、CSS]细节与使用经验
本文总结了前端开发中的一些重要细节和技巧,包括CSS选择器、定位、层级、全局属性、滚轮控制、轮播等。作者以纯文字形式记录,便于读者使用<kbd>Ctrl + F</kbd>快速查找相关内容。文章还提供了示例代码,帮助读者更好地理解和应用这些知识点。
41 1
[HTML、CSS]细节与使用经验