第8章 实现HTML5应用-【千锋教育】HTML5+CSS3+JavaScript 网页设计基础与实战（微课版）

第8章 实现HTML5应用 8.1 添加媒体文件 8.2 实现地理定位 8.3 使用canvas画布 了解HTML5多媒体 掌握<video>视频和<audio>音频的应用 掌握HTML5地理定位的应用 掌握<canvas>画布的应用 学 习 目 标 LEARNING OBJECTIVES 初心至善 匠心育人 引言 HTML5是目前最新的HTML标准，是专门为承载丰富的web内容而设计的，并且无需额外插件。HTML5拥有新的语义、图形以及多媒体元素，如<canvas>、<video>等元素。并且HTML5提供的新元素和新的API，简化了web应用程序的搭建，如通过Geolocation API能更方便的获取到地理信息。 初心至善 匠心育人 8.1 添加媒体文件 <video>视频标签 案例—JS控制视频 DOM操作媒体文件 <audio>音频标签 目录 Contents 初心至善 匠心育人 8.1 添加媒体文件 <video>标签定义视频，比如电影片段或其他视频流。<video>标签是HTML5的新标签，使用<video>标签可以在网页上直接插入视频文件，而不需要任何第三方插件。<video>标签有以下3点优势。 8.1.1 <video>视频标签 跨平台、好升级、好维护，相对于原生APP其开发成本较低。 具有良好的移动支持，比如支持手势，本地存储和视频续播等，通过HTML5可实现网站移动化。 代码更加简洁，交互性更好。 <video>标签的的不足之处是兼容性差，不同的浏览器支持的视频格式会不一样，这就导致了可能在网页上无法播放该视频。 初心至善 匠心育人 8.1 添加媒体文件 <video>标签支持的视频格式有MPEG4、WebM和Ogg，这3种视频格式的说明如下。 8.1.1 <video>视频标签 MPEG4简称MP4，是带有H.264视频编码和AAC音频编码的MPEG4文件。 WebM是带有VP8视频编码和Vorbis音频编码的WebM文件。 Ogg是带有Theora视频编码和Vorbis音频编码的Ogg文件。 视频格式 初心至善 匠心育人 8.1 添加媒体文件 Internet Explorer 9+、Chrome、Firefox、Opera和Safari浏览器支持<video>标签，但部分视频格式不支持。浏览器对视频格式的支持情况如表所示。 8.1.1 <video>视频标签 视频格式 浏览器 格式 Internet Explorer 9+ Chrome Firefox Opera Safari MPEG4 支持 支持 支持 WebM 支持 支持 支持 Ogg 支持 支持 支持 初心至善 匠心育人 8.1 添加媒体文件 <video>标签的语法格式如下所示。 8.1.1 <video>视频标签 语法格式 <video src="视频文件路径"></video> 或者 <video> <source src="视频文件路径" type="视频格式"></source> ...... </video> 初心至善 匠心育人 8.1 添加媒体文件 在上述<video>标签的语法中，src是source的缩写，意思是来源，实际指视频的路径。<source>标签为媒体元素（比如<video>视频和<audio>音频）定义媒介资源，src属性规定媒体文件的URL地址，type属性规定资源的媒体类型。 source标签可以写多个，这是为了兼容各个浏览器，但里面只能有一个src属性说明文件路径，指定type属性兼容不同浏览器解码支持，type属性的属性值有video/ogg、video/mp4和video/webm，例如，<source src="happy.mp4" type="video/mp4"></source>。 8.1.1 <video>视频标签 语法格式 初心至善 匠心育人 8.1 添加媒体文件 <video>标签的常用属性有controls、autoplay、loop、muted、poster、preload、width、height等，这些属性的具体说明如表所示。 8.1.1 <video>视频标签 <video>标签属性 属性 值 说明 controls controls 如果出现该属性，则向用户显示控件，比如播放按钮 autoplay autoplay 如果出现该属性，则视频在就绪后马上播放。注意，HTML中布尔属性的值不是true和false。正确的用法是，在标签中使用此属性表示true，在标签中不使用此属性则表示false loop loop 如果出现该属性，则当媒介文件完成播放后再次开始播放 muted muted 规定视频的音频输出应该被静音