第12章在网页中插入多媒体元素要点.ppt

随着HTML5的发展和推广，HTMl5在网页中的应用越来越多，在网页中通过使用HTML5可以实现许多特效。Adobe公司顺应网页发展的趋势，推出了HTML5动画可视化开发软件Adobe Edge Animate，通过使用该软件，可以不需要编写繁琐的代码即可开发出基于HTML5的动画。 Dreamweaver CC为了适应HTML5的发展趋势，在“插入”面板的“媒体”选项卡中新增了“插入Edge Animate作品”按钮，通过使用该功能可以轻松的将使用Adobe Edge Animate软件开发的HTML5动画插入到网页中。 课堂案例——制作广告展示页面 课堂案例：制作广告展示页面 最终文件：光盘\最终文件\第12章\12-1.html 视频：光盘\视频\第12章\12-1.swf 12.2.1　HTML 5所支持的视频文件格式 目前，HTML 5新增的HTML Video元素所支持的视频格式主要是MPEG4、WebM和Ogg， 12.2.2　插入HTML 5 Video 视频标签的出现无疑是HTML5的一大亮点，但是旧的浏览器不支持HTML5 Video，并且，涉及到视频文件的格式问题，Firefox、Safari和Chrome的支持方式并不相同，所以，在现阶段要想使用HTML 5的视频功能，浏览器兼容性是一个不得不考虑的问题。 将光标置于网页中需要插入HTML5 Video的位置，单击“插入”面板“媒体”选项卡中的HTML 5 Video按钮，即可在网页中光标所在位置插入HTML 5视频，所插入的HTML 5视频以图标的形式显示，转换到代码视图中，可以看到所插入的HTML 5视频的HTML代码。 以前在网页中插入视频都是通过插件的方式或者是插入Flash Video，Flash Video视频需要浏览器安装Flash播放插件才可以正常播放。在HTML 5中新增了video标签，通过使用video标签，可以直接在网页中嵌入视频文件不需要任何的插件。 课堂案例——制作HTML5视频页面 课堂案例：制作HTML5视频页面 最终文件：光盘\最终文件\第12章\12-2-2.html 视频：光盘\视频\第12章\12-2-2.swf 12.2.3　设置HTML 5 Video属性 单击选中在网页中插入的HTML 5 Video图标，在“属性”面板中可以对HTML 5 Video的相关属性进行设置。 ID：该选项用于设置HTML 5 Video元素的id名称。 Class：在该选项的下拉列表中可以选择相应的类CSS样式为其应用。 W和H：W属性用于设置HTML 5 Video的宽度。H属性用于设置HTML5 Video的高度。 源：该选项用于设置HTML 5 Video元素的源视频文件，可以单击该选项文本框后的“浏览”按钮，在弹出的对话框中选择所需要的视频文件。 Poster：该选项用于设置在视频开始播放之前需要显示的图像，可以单击该选项文本框之后的“浏览”按钮，选择相应的图像设置为视频播放之前所显示的图像。 Title：该选项用于设置HTML 5 Video在浏览器中当鼠标移至该对象上时所显示的提示文字。 回退文本：该选项用于设置当浏览器不支持HTML 5 Video元素时所显示的文字内容。 Controls：选中该复选项，可以在网页中显示视频播放控件。 Loop：选中该复选框，可以设置视频循环播放。 AutoPlay：选中该复选框，可以在打开网页的同时自动播放该视频。 Muted：选中该复选框，可以设置视频在默认情况下静音。 Preload：该属性用于设置是否在打开网页时自动加载视频，如果选中Autoplay复选框，则忽略该选项设置。在该选项的下拉列表中包含3个选项，分别是none、auto和metadata， 如果设置Preload选项为none，则当页面加载后不载入视频。如果设置Preload选项为auto，则当页面加载后载入整个视频；如果设置Preload选项为metadata，则当页面加载后只需载入视频元数据。 网络上有许多不同格式的音频文件，但HTML标签所支持的音乐格式并不是很多，并且不同的浏览器支持的格式也不相同。HTML 5针对这种情况，新增了audio标签来统一网页音频格式，可以直接使用该标签在网页中添加相应格式的音乐。 12.3.1　HTML5所支持的音频文件格式 目前，HTML5新增的HTML Audio元素所支持的音频格式主要是MP3、Wav和Ogg。 12.3.2　插入HTML5 Audio 将光标置于网页中需要插入HTML 5 Audio的位置，单击“插入”面板“媒体”选项卡中的HTML 5 Audio按钮，即可在网页中光标所在位置插入HTML 5音频，所插入的HTML 5音频以图标的形式显示，