TP14 视频播放器.ppt

视频播放器 视频格式的简单介绍 HTML5视频标签video属性 HTML5视频API控件 制作一个HTML5视频播放器 目录 HTML5 视频播放事件属性与API控件 1、视频格式的简单介绍 视频格式：avi、rmvb、wmv、mpeg4、ogg、webm 视频主要有三部分组成：视频、音频、编码格式 在过去，我们如果想在Web上播放视频，也是都是通过Flash来播放，同样并不是所有的浏览器都安装了Flash播放器插件，而现在我们在HTML5中，就能完全脱离Flash或其他的插件来播放视频了 HTML5支持的格式： Ogg = 带有 Theora 视频编码和 Vorbis 音频编码的 Ogg 文件[开源] MPEG4 = 带有 H.264 视频编码和 AAC 音频编码的 MPEG 4 文件 WebM = 带有 VP8 视频编码和 Vorbis 音频编码的 WebM 文件 视频编码：H.264、Theora、VP8(google开源) 音频格式: ACC、MP3、Vorbis HTML5 视频播放事件属性与API控件 2、HTML5视频标签video属性 video src=movie.mp4 controls=controls /video video src=movie.mp4 controls=controls 浏览器不支持HTML5的视频播放功能 /video video width=300 controls=controls … source src=movie.ogg type=video/ogg source src=movie.mp4 type=video/mp4 /video 1 2 3 HTML5 视频播放事件属性与API控件 2、HTML5视频标签video属性 属性 值 描述 autoplay autoplay 如果出现该属性，则视频在就绪后马上播放。 controls controls 如果出现该属性，则向用户显示控件，比如播放按钮。 height pixels 设置视频播放器的高度。 loop loop 如果出现该属性，则当媒介文件完成播放后再次开始播放。 preload preload 如果出现该属性，则视频没加载完不播放。建议不使用. 如果使用 autoplay，则忽略该属性。 src url 要播放的视频的 URL。 width pixels 设置视频播放器的宽度。 poster Imgurl 加载等待的画面图片 autobuffer Autobuffer 设置为浏览器缓冲方式，不设置autoply才有效 HTML5 视频播放事件属性与API控件 3、HTML5视频API控件 HTML5 视频播放事件属性与API控件 3、HTML5视频API控件 获得video标签，这里是DOM对象var video = document.getElementById(videoID); 载入视频：load() ， 播放视频：play() ， 暂停：pause() ， 快进10秒：currentTime+=10 播放速度增加：playbackRate++ 播放速度增加0.1：playbackRate+=0.1 音量增加：volume+=0.1 静音：muted=true 全屏:webkitEnterFullscreen(); mozRequestFullScreen(); 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(); Audio(音频) HTML5 提供了播放音频文件的标准。 直到现在，仍然不存在一项旨在网页上播放音频的标准。今天，大多数音频是通过插件（比如 Flash）来播放的。然而，并非所有浏览器都拥有同样的插件。HTML5 规定了在网页上嵌入音频元素的标准，即使用 audio 元素。 示例：audio control