USEWebGIS原理与实践3.ppt

点评： canvas标记的引入对基于HTML的前端开发技术是一次大的突破。它将使基于Web的图形图像表现技术更加高效、便捷和专业。 早期基于浏览器的矢量WebGIS大都基于插件技术，标准不统一，技术分化，性能也不是很好。canvas绘图技术必将给WebGIS前端开发技术带来新的思路。 目前，各浏览器对canvas的支持还有差异。google还以VML为基础，针对IE浏览器开发了excanvas.js库，以使IE早期浏览器实现对canvas接口的支持。 HTML5 VIDEO简介  Web 上的视频 HTML5 Video优点 支持的视频格式 视频元素剖析 开发实例 直到现在，仍然不存在一项旨在网页上显示视频的标准。今天，大多数视频是通过插件（比如 Flash）来显示的。然而，并非所有浏览器都拥有同样的插件并且速度也很慢。 HTML5 规定了一种通过 video 元素来包含视频的标准方法。HTML5的出现解决了这一难题。HTML5提供了音频视频的标准接口，实现了无需任何插件支持，只需浏览器支持相应的HTML5标签。 Web 上的视频 视频元素终于成为web的“合法公民”，而不是将它置于object或embed元素中。 可以使用css来样式化，可以使用javascript调整并将其重新显示到canvas上。 开放标准提供的内在可hack功能是完全打开的。在此之前，所有的视频数据都是锁定的，被封装在一个盒子中，使用HTML5 video,数据是自由的，可以任意操作。 HTML5 Video优点 支持的视频格式 Ogg = 带有 Theora 视频编码和 Vorbis 音频编码的 Ogg 文件 MPEG4 = 带有 H.264 视频编码和 AAC 音频编码的 MPEG 4 文件 WebM = 带有 VP8 视频编码和 Vorbis 音频编码的 WebM 文件 视频元素剖析 Autoplay:自动播放视频，即视频在就绪后马上播放。 Controls:向用户显示控件，比如播放按钮。 Poster: 指向一幅图像，在视频播放之前使用它，如果不用，浏览器显示视频的第一帧。 Loop:当媒介文件完成播放后再次开始播放。 Preload:视频在页面加载时进行加载，并预备播放,属性值可以是aoto、none、metadata,如果使用 autoplay，则忽略该属性。 Src:指定要播放的视频的 URL。 height、width:设置视频的高、宽。 videoWidth、videoHeight:返回视频固有的宽度和高度，只读。 开发实例 video src=movie.ogg width=320 height=240 poster=bear.jpg controls Your browser does not support the video tag. please download the video in a href=movie.oggogg/a foamat /video 演示example_1 由于并非所有的浏览器都能够播放同样的格式，HTML5规范要求所有浏览器至少以两种编码器对多媒体有内建的支持，因此可以嵌套两个source元素把多媒体编码两次。 video controls source src=medio.ogg type=‘video/ogg; codecs=“ theora, vorbits” ’ source src=medio.mp4 type=‘video/mp4; codecs=“avc1.42E01E,mp4a.40.2” ’ /video 多个source元素 滚动定制控件 Video元素的javascript API很简单。使用javascript 和新的媒体API，我们可以创建和管理自己的视频播放控件。 如果要创建和管理自己的视频播放控件，需先设置属性为不自动提供控件，或者使用javascript 剥离本地控件，再添加自己的控件。 剥离本地控件 removeAttribute()方法 关键代码： var video=document.getElementsByTagName(video)[0]; video.removeAttribute(controls); 播放、暂停和切换播放 播放：play()方法 暂停：pause()方法 关键代码： var butt=document.getElementById(play); var video=document.getEle