一、标签介绍1、audio标签属性src音乐的URLpreload预加载autoplay自动播放loop循环播放controls浏览器自带的控制条Html代码audio id”media” src”http://www.abc.com/test.mp3″ controls/audio2、video标签属性src视频的URLposter视频封面没有播放时显示的图片preload预加载autoplay自动播放loop循环播放controls浏览器自带的控制条width视频宽度height视频高度Html代码video id”media” src”http://www.abc.com/test.mp4″ controls width”400px” heigt”400px”/video二、获取HTMLVideoElement和HTMLAudioElement对象Js代码//audio可以直接通过new创建对象Media new Audio(“http://www.abc.com/test.mp3″);//audio和video都可以通过标签获取对象Media document.getElementByIdx_x(“media”);三、Media方法和属性HTMLVideoElement 和 HTMLAudioElement 均继承自 HTMLMediaElementJs代码//错误状态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段区域的结束位置四、事件Js代码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 video标签的出现改变了这一局面可以让用户在不用安装任何插件的情况下轻松的观看视频。vedio和audio的使用技巧基本相同本文仅以vedio作示例。先引用一段别人介绍的vedio标签大多数用户已经安装了Flash插件事实上大概95%的上网用户都装有Flash的某个版本但HTML 5的支持者正在推动一个开放的不需要任何插件的视频标准。这就是HTML 5的新标签带来的构想他提供了一个嵌入视频以及与其交互而不需要类似Flash的私有插件的方法。不幸的是视频并非那么简单。不仅仅是浏览器需要理解标签而且需要一个必要的编码译码器来播放视频。明显的解决方法只能是HTML 5规范的缔造者们选择一个视频编码译码器并且让每一个浏览器制造商执行。总之这就是所推荐的打算。同时这也是引起混乱的导火索。对于各种各样编码译码器的争论就已经很烦杂了但更悲剧的事情是浏览器制造商们还不能就此达成统一。苹果不愿意使用提议的Ogg Theora编码译码器但Opera和Mozilla也不愿意支付由于他们的浏览器装载H.264编码译码器而造成的许可费用。Google同时支持两者微软面对争论远远的置身事外因为他现在根本没有计划去支持HTML 5的视频元素。 面对浏览器制造商的僵持局面HTML 5善意的独裁者Ian Hickson甩了甩他的手并说到去他妈的。所以HTML5规范中没有特别指名或规定的视频编码解码器。”好吧引用到这儿。 如今的情况是微软终于陷进去了但很悲剧的是在IE 9中只支持H.264。同时Googe终于在I/O大会上发布了开源的视频封装格式webM和视频编码格式VP8。Opera、Mozilla、Chrome宣布将完全支持VP8IE宣布部分支持需要装一个插件但如果我没记错的话HTML 5的一个愿景就是脱离浏览器插件微软真是让人觉得悲剧。 苹果决定不支持VP8乔布斯认为VP8在质量或效率方面不如H.264不能满足其产品的要求。另外最新消息表明VP8还有可能牵扯到专利的问题如果真的侵犯专利的话Opera和Firefox估计马上会无视VP8的。 说了这么多其实说到底就是现在如果要在页面中使用video标签需要考虑三种情况支持OggTheora或者VP8如果这玩意儿没出事的话的Opera、Mozilla、Chrome支持H.264的Safari、IE 9、Chrome都不支持的IE6、7、8。好吧现在让我们从技术层面来认识HTML 5的视频包括video标签的使用视频对象可以用到的媒介属性和方法以及媒介事件。我们来看看video标签具体是怎么使用的以及它有哪些属性和方法。使用方法video width320 height240 controlscontrols source srcmovie.ogg typevideo/ogg source srcmovie.mp4 typevideo/mp4 Your browser does not support the video tag. /video各浏览器目前对html5视频格式的支持浏览器 | 影音格式 OggTheora MP4(H.264) WebM Microsoft Internet Explorer9 × √ × Mozilla Firefox5 √ × √ Google Chrome13 √ √ √ Apple Safari5 × √ × Opera11 √ × √属性列表属性 值 描述 autoplay autoplay 如果出现该属性则视频在就绪后马上播放。默认为false controls controls 如果出现该属性则向用户显示控件比如播放按钮。这些控件是由浏览器来提供的样式也可能因为不同浏览器而不一样 height pixels 设置视频播放器的高度。 loop loop 如果出现该属性则当媒介文件完成播放后再次开始播放。 preload none、metadata、auto 如果出现该属性则视频在页面加载时进行加载并预备播放。如果使用autoplay则忽略该属性。 auto - 当页面加载后载入整个视频 meta - 部分预加载。使用此属性值代表页面制作者认为用户不期望此视频但为用户提供一些元数据包括尺寸第一帧曲目列表持续时间等等 none - 不进行预加载。使用此属性值可能是页面制作者认为用户不期望此视频或者减少HTTP请求 src url 要播放的视频的URL。 poster url 预览图媒介属性一般用于js操作属性 可读状态 描述 error 只读 使用media.error返回一个MediaError对象表明当前的错误状态如果没有出错返回null共有4个可能值。 MEDIA_ERR_ABORTED数字值为1媒体资源获取异常 MEDIA_ERR_NETWORK数字值为2网络错误 MEDIA_ERR_DECODE数字值为3媒体解码错误 MEDIA_ERR_SRC_NOT_SUPPORTED数字值为4视频格式被不支持。 currentSrc 只读 返回该媒介标签的src属性值 networkState 只读 返回媒介的网络状态共有4个可能值。 NETWORK_EMPTY数字值为0尚未初始化 NETWORK_IDLE数字值为1加载完成网络空闲 NETWORK_LOADING数字值为2视频加载中 NETWORK_NO_SOURCE数字值为3加载失败。 preload 可读写 可获取或改变媒介标签的preload属性值 buffered 只读 返回一个TimeRanges对象确认浏览器已缓存媒介文件 readyState 只读 返回媒介当前播放位置的就绪状态共有5个可能值。 HAVE_NOTHING数字值为0当前播放位置无有效媒介资源 HAVE_METADATA数字值为1加载中媒介资源确认存在但当前位置没有能够加载到有效媒介数据进行播放 HAVE_CURRENT_DATA数字值为2已获取到当前播放数据但没有足够的数据进行播放 HAVE_FUTURE_DATA数字值为3已获取到后续播放数据可以进行播放 HAVE_ENOUGH_DATA数字值为4可以进行播放且浏览器确认媒体数据以某一种速度进行加载可以保证有足够的后续数据进行播放而不会使浏览器的播放进度赶上加载数据的末端。 seeking 只读 返回一个布尔值表明浏览器是否正在请求数据ture表示浏览器正在请求数据false表示浏览器已停止请求。 seekable 只读 发挥一个TimeRanges对象表明可以对当前媒介资源进行请求。 currentTime 可读写 获取或改变视频的播放位置。单位为秒 startTime 只读 返回媒介文件播放的开始时间通常为0 duration 只读 返回媒介文件总的播放时长 played 只读 返回一个TimeRanges对象标明浏览器已播放的媒介资源范围 paused 只读 返回一个布尔值表明媒介是否暂停播放ture表示媒介暂停播放false表示媒介正在播放。 ended 只读 返回一个布尔值表明媒介是否已结束ture表示媒介已经播放完毕false表示还未播放完毕。 defaultPlaybackRate 可读写 返回媒介默认的播放速率或对其赋值改变媒介的默认播放速率。 playbackRate 可读写 返回当前的媒介播放速率或对其赋值改变当前的媒介播放速率 autoplay 可读写 返回一个布尔值表明当前媒介是否设置了自动播放ture表示当前媒介为自动播放false表示非自动播放或对其赋值设置是否自动播放。 loop 可读写 返回一个布尔值表明当前媒介是否设置了循环播放ture表示当前媒介设置了循环播放false表示没有设置循环播放或对其赋值设置是否循环播放。 controls 可读写 返回一个布尔值表明当前媒介是否使用了浏览器默认的播放控制栏ture表示加载了false表示没有加载或对其赋值设置是否使用浏览器默认的播放控制栏 volume 可读写 返回当前媒介的音量值或对其赋值改变媒介的播放音量范围为0到10相当于静音1为最大音量。 muted 可读写 返回一个布尔值表明当前媒介播放是否开启静音ture表示没有开启静音false表示静音或对其赋值设置播放是否静音。很简单那我们来做一个demo。代码如下!DOCTYPE html html head titlehtml5 视频标签学习/title meta http-equivContent-Type contenttext/html;charsetutf-8; /head body header h1自定义视频播放器/h1 div 当前播放 《span idcurrentMoviemovie1/span》br 当前播放速度 span idcurrentSpeed1X/spanbr 当前声音大小为 span idcurrentVolume100/spanbr /div /header section article video stylefloat:left; idtestVideo preloadmetadata srcmovie.ogg height300 controls 你的浏览器不支持html5视频 /video div stylefloat:left;margin-left:10px; h3播放列表/h3 ul liamovie1/a/li liamovie2/a/li liamovie3/a/li liamovie4/a/li /ul /div /article article styleclear:both; br/ button idplay播放/button button idpause暂停/button button idstop停止/button button idprev前一个/button button idnext后一个/button button idupVolume音量/button button iddownVolume音量-/button button idfastFoward快进/button button idfastBackward快退/button br/ 从input typetext idmin stylewidth:20px; value0/分跳转到input typetext idsec stylewidth:20px; value0/播放 button idlocate确认/button /article section script typetext/javascript var $ function(id){return document.getElementById(id);}; var _video $(testVideo); //视频列表 var playList { current : 0, list : [movie.ogg,war3.ogg,movie.ogv,trailer.webm,trailer.ogv] } var videoUtil { //播放 play : function(){ _video.play(); }, //暂停 pause : function(){ _video.pause(); }, //停止 stop : function(){ _video.currentTime 0; _video.pause(); }, //下一个视频 next : function(){ if(playList.current playList.list.length-1){ playList.current 0; }else{ playList.current; } _video.srcplayList.list[playList.current]; _video.play(); }, //前一个视频 prev : function(){ if(playList.current 0){ playList.current palyList.list.length-1; }else{ playList.current--; } _video.srcplayList.list[playList.current]; _video.play(); }, //加大声音,每次加大1/10 upVolume : function(){ _video.volume 0.1; }, //减小声音每次减小1/10 downVolume : function(){ _video.volume - 0.1; }, //翻倍加快播放速度 fastFoward : function(){ //FF不支持playbackRate if(_video.playbackRate){ _video.playbackRate _video.playbackRate*2; }else{ alert(对不起你的浏览器不支持改变播放速度); } }, //降低播放速度 fastBackward : function(){ if(_video.playbackRate){ _video.playbackRate _video.playbackRate/2; }else{ alert(对不起你的浏览器不支持改变播放速度); } }, //跳转到指定时间点播放 locate : function(){ var min $(min).value; var sec $(sec).value; var time parseInt(min)*60parseInt(sec); _video.currentTime time; _video.play(); }, bindEvent : function(){ var self this; //绑定页面上各个按钮的事件 var btns document.getElementsByTagName(button); for(var i 0 ;i btns.length ; i){ var el btns[i]; el.onclick self[el.id]; } //播放完毕自动播放下一个 _video.onended function(){ var event document.createEvent(HTMLEvents); event.initEvent(click, true, true); $(next).dispatchEvent(event); } //循环检查视频的当前状态 setInterval(function(){ var speed _video.playbackRate||1; var movie movieplayList.current; var volume parseInt(_video.volume*100); $(currentMovie).innerHTML movie; $(currentSpeed).innerHTML speedX; $(currentVolume).innerHTML volume; },200); } }; window.onload function(){ videoUtil.bindEvent(); } /script /body /html
)
