<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 Audio/Video 标签、属性、方法、事件 HTML5 中的 Audio/Video 标签是多媒体内容的基础组件,用于在网页中播放音频和视频内容。今天,我们将深入探讨 HTML5 Audio/Video 标签的各种属性、方法和事件。 ...
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.
使用JS正则表达式,选取video元素的src属性的值,利用jQuery选取元素
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 ...
HTML5标签和属性列表 HTML5是一种基于XML的标记语言,用于创建网页的结构和内容。 HTML5新增了许多新的标签和属性,提高了网页的可读性、可访问性和互操作性。本文档将对 HTML5 中的标签和属性进行详细的介绍。 ...
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
HTML5+CSS3 插入视频或音频 HTML5 中的音频视频播放一直是一...使用 video 标签和 audio 标签是 HTML5 中插入视频或音频文件的最好方法,可以提高用户体验,减少开发者的开发难度。但是,需要注意浏览器的兼容性问题。
利用jq简单控制h5视频播放进度条,让使用者不能快进,可以后退。原理是每500毫秒记录一次进度条时间,如果下一个500毫秒的进度减去上一个500毫秒的进度大于1秒,那么就让视频返回到上一个进度,因项目开发中对于视频...
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