第四讲：html5音视频标签介绍.pptVIP

HTML5音/视频标签详解 主讲：丛浩 @LAMP兄弟连丛浩 音视频的发展史 早期：embed+object+文件 问题：不是所有浏览器都支持，而且embed不是标准。 现状：Realplay、window media、Quick Time 、Flash 问题：每个厂商每个标准，网站编码和格式也都不相同，flash的出现解决了面的问题，但是apple在07年决定任何设备将不再支持flash。 HTML5认为浏览器应该原生支持音视频，因为他们现在也是web中的一等公民了！ 视频格式的简单介绍 1、常见的视频格式 视频的组成部分：画面、音频、编码格式 视频编码：H.264、Theora、VP8(google开源) 常见的音频格式 视频编码：ACC、MP3、Vorbis HTML5支持的格式 HTML5能在完全脱离插件的情况下播放音视频 但是不是所有格式都支持。 HTML5支持的视频格式： Ogg =带有Theora视频编码+Vorbis音频编码的Ogg文件 支持的浏览器:F、C、O MEPG4=带有H.264视频编码+AAC音频编码的MPEG4文件 支持的浏览器: S、C WebM=带有VP8视频编码+Vorbis音频编码的WebM格式 支持的浏览器: I、F、C、O Video的使用 video src= controls=controls/video video src=文件地址 controls=controls 您的浏览器暂不支持video标签。播放视频 / video video controls=controls width=300 source src=move.ogg type=video/ogg source src=move.mp4 type=video/mp4 您的浏览器暂不支持video标签。播放视频 / video Video的常见属性 属性 值 描述 Autoplay Autoplay 视频就绪自动播放 controls controls 向用户显示播放控件 Width Pixels(像素) 设置播放器宽度 Height Pixels(像素) 设置播放器高度 Loop Loop 播放完是否继续播放该视频，循环播放 Preload Proload 是否等加载完再播放 Src url 视频url地址 Poster Imgurl 加载等待的画面图片 Autobuffer Autobuffer 设置为浏览器缓冲方式，不设置autoply才有效 Video的API方法 方法 属性 事件 play() currentSrc play pause() currentTime pause load() videoWidth progress canPlayType videoHeight error 全屏 退出全屏 Webkit (Safari5.1 /Chrome 15) element.webkitRequestFullScreen(); document.webkitCancelFullScreen(); Firefox (works in nightly) element.mozRequestFullScreen(); document.mozCancelFullScreen(); W3C 提议 element.requestFullscreen(); document.exitFullscreen(); Video的API属性 属性 说明 audioTracks 返回可用的音轨列表（MultipleTrackList对象） autoplay 媒体加载后自动播放 buffered 返回缓冲部件的时间范围(TimeRanges对象) controller 返回当前的媒体控制器（MediaController对象） controls 显示播控控件 crossOrigin CORS设置 currentSrc 返回当前媒体的URL currentTime 当前播放的时间，单位秒 (快进快退10秒) defaultMuted 缺省是否静音 defaultPlaybackRate 播控的缺省倍速 属性 说明 duration 返回媒体的播放总时长，单位秒 ended 返回当前播放是否结束标志 error 返回当前播放的错误状态 initialTime 返回初始播放的位置 loop 是否循环播放 mediaGroup 当前音视频所属媒体组?(用来链接多个音视频标签) muted 是否静音 networkState 返回当前网络状态 paused 是否暂停 playbackRate 播放的倍速(加速、减速播放) played 当前播放部件已