根据HTTML5的官方标准,并不需要为任何特定的音频或视频格式提供支持,所以浏览器厂商可以选择他们希望支持的格式。
一、HTML5中播放音频
1. audio元素
HTML5中,使用新增的audio元素来播放声音文件或音频流,支持Ogg Vorbis、MP3和WAV等音频格式。其用法如下
<audio src="sample.mp3" controls="controls"> 您的浏览器不支持audio标签 </audio>
2.播放音频
下面是一段完整的播放音频的代码
<audio controls="controls" autoplay loop> <source src="sample.ogg" type="audio/ogg"> <source src="sample.mp3" type="audio/mpeg"> 您的浏览器不支持audio标签 </audio>
注:
*audio之间的内容是为不支持audio元素的浏览器准备的替换内容;
*src直接指向媒体文件,如果浏览器不支持相关内容或编解码器时,需要用到备用声明,浏览器从这些数据源中进行选择(如上多个source);
*srouce用type声明的媒体属性如果与媒体文件不匹配,浏览器可能拒绝播放,如果不明确type类型,可以省略。
二、HTML5中播放视频
1. video元素
HTML5中,使用新增的video元素来播放视频文件或视频流,支持Ogg、MPEG-4、WebM等视频格式,用法如下:
<video src="sample.mp4" controls="controls"> 您的浏览器不支持HTML5视频 </video>
2. 播放视频
下面是播放视频的一个完整示例,浏览器会选择source列表中第一个可以识别的格式。
<video controls="controls" autoplay> <source src="sample.mp4" type="video/mp4"> <source src="sample.ogg" type="video/ogg"> 您的浏览器不支持HTML5视频 </video>
三、音频&视频相关属性、方法与事件
下面只介绍一些视频、音频相关的
1.相关属性
- autobuffer - 自动缓冲,可读写属性,true/false
- autoplay - 自动播放,可读写属性,true/false
- buffered - 只读属性,返回TimeRanges对象,确认浏览器已经缓存媒体文件
- controls - 为媒体文件提供控制条,可读写属性,controls
- currentSrc - 媒体数据的URL地址,,只读属性,无默认值
- currentTime - 当前播放位置,可读写属性,返回值为时间(单位:秒)
- duration - 媒体的持续时间,只读属性,返回值为时间(单位:秒)
- ended - 是否播放结束,只读属性,返回布尔值
- error - 返回一个MediaError对象表明错误状态,只读属性(MEDIA_ERR_ABORTED媒体资源获取异常,MEDIA_ERR_NETWORK网络错误,MEDIA_ERR_DECODE媒体解码错误,MEDIA_ERR_SRC_NOT_SUPPORTED媒体格式不支持)
- initialTime - 获取最早的可用于回放的位置,只读属性,返回值为时间(单位:秒)
- loop - 播放结束是否重新开始播放,可读写属性
- muted - 播放时是否开启静音,可读写属性,true/false(开启静音/未开启静音)
- networkState - 返回媒体的网络状态,只读属性
- paused - 媒体是否暂停播放,只读属性,true/fase(暂停/正在播放)
- playbackRate - 读取或设置媒体资源播放的当前速率,可读写属性
- played - 媒体在浏览器中已播放的时间范围,只读属性
- preload - 定义视频是否预加载,可读写属性,none/metadata/auto
- readyState - 当前播放位置的就绪状态,只读属性
- seekable - 可以对当前媒体资源进行请求,只读属性
- seeking - 浏览器是否正在请求某一播放位置的的媒体数据,只读属性,true/false
- src - 指定媒体资源的URL位置,可读写属性
- volume - 获取或设置音量,可读写属性,范围0.0~1.0
2.相关方法
- canPlayType - 返回一个字符串以表明客户端是否能够播放指定的媒体,probably/maybe/空字符串
- load - 重置媒体元素并重新载入媒体,方法可宗旨任何正在进行的任务或事件
- pause - 用于暂停媒体的方法,并设置paused属性为true
- play - 播放媒体,并设置paused属性设置为false
3.相关事件
用addEventListener或者直接赋值方式添加事件监听,下面仅列出部分事件:
- canplay - 浏览器能够开始播放媒体数据,但以当前速率不能直接将媒体播放完
- ended - 媒体播放已抵达结尾
- error- 在元素加载期间发生错误
- loadeddata - 已经加载当前播放位置的媒体数据
- pause - 媒体数据暂停播放
- play - 媒体数据简要开始播放
- playing - 媒体数据已经开始播放
- progress - 浏览器正在获取媒体数据
- readystatechange - 就绪状态改变
- stalled - 浏览器获取媒体数据过程中出现异常
- waiting - 媒体已停止播放但打算继续播放
相关推荐
HTML5程序设计-3期(KC014) 单元设计-单元4 HTML5音频与视频.doc 学习资料 复习资料 教学资源
jQuery+html5视频与音频播放器
主要介绍了详解移动端HTML5音频与视频问题及解决方案的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
html5音频视频开发案例,实战例子,此例子来自于html5+css3,适合初学者学习,想了解更多请参考HTML5+CSS3从入门到精通
HTML5音频视频
HTML5多种音频视频播放插件,歌词同步,视频播放等功能!(JPlayer、JWPlayer、VideoJS插件)
HTML5音频 视频代码
内容有:创建HTML5文档,实战HTML5表单,实战HTML5绘画,HTML5音频与视频,Web存储,离线应用,Workers多线程处理,Geolocation地理位置等技术。CSS3部分主要介绍了CSS3概述,CSS选择器,文本、字体与颜色,背景和...
html支持微信浏览器自动播放音频及视频
跨浏览器兼容的HTML5视频音频播放器
主要介绍了使用HTML5在网页中嵌入音频和视频播放的基本方法, 和 标签的使用非常方便,而且使网页视频不再依赖频繁出错的Flash播放器,需要的朋友可以参考下
HTML5 中的新标签。...音频/视频 链接 列表 表格 样式/节 元信息 编程 HTML5 中添加的属性。 属性 描述 = HTML5 中新的事件属性。 Window 事件属性 Form 事件 Keyboard 事件 Mouse 事件 Media 事件
主要介绍了HTML5实现音频和视频嵌入的方法的相关资料,原生的支持音频和视频,为HTML5注入了巨大的发展潜力,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
jPlayer : jQuery的HTML5 音频和视频播放器,使用jPlayer可以在你的网页上轻松加入跨平台的音乐和视频。通过jPlayer的API,你可以构想出具有创意的影音解决方案。
html5视频前端视频上传,手机拍照上传,手机录像上传。HLMT5中input实现多种文件上传,视频上传,图片上传,调用手机摄像头,照相机,相册等功能。
HTML5为video和audio提供了接口方法,具体介绍如下表所示。 视频、音频常用的事件 02 视频、音频常用的事件 事件 描述 play 当执行方法play()时触发。 playing 正在播放时触发。 pause 当执行了方法pause()时触发。 ...
HTML5音频播放器和jQuery全屏图片幻灯片轮播切换 HTML5音频播放器和jQuery全屏图片幻灯片轮播切换