Web前端技术开发（HTML5+CSS3+JavaScript）课件 第七单元 多媒体页面设计

Web前端开发技术第六单元层与区块的页面布局学会HTML5的audio元素，video元素和canvas元素的使用使用audio播放音频文件使用video播放视频文件canvas的使用1HTML5

音频2HTML5视频3

使用DOM控制播放4HTML5的Canvas

HTML音频17.1HTML5音频<audio>标记来完成我们对声音的调用及播放。基本语法：<audiosrc="ring.wav"controls="controls">Yourbrowserdoesnotsupporttheaudiotag.</audio>语法说明：如果不加“controls”在浏览器上不会显示播放器。可以在开始标签和结束标签之间放置文本内容，这样老的浏览器就可以显示出不支持该标签的信息。7.1HTML5音频实例7-1：使用<audio>标记设置音频，必须设置controls="controls"。7.1HTML5音频<audio>标记的其他属性如表7-1所示。属性值描述autoplayautoplay如果出现该属性，则音频在就绪后马上播放。controlscontrols如果出现该属性，则向用户显示控件，比如播放按钮。looploop如果出现该属性，则每当音频结束时重新开始播放。mutedmuted规定视频输出应该被静音。preloadpreload如果出现该属性，则音频在页面加载时进行加载，并预备播放。如果使用"autoplay"，则忽略该属性。srcurl要播放的音频的URL。7.1HTML5视频实例7-2：音频标记的属性设置。

HTML5视频27.2HTML5视频<video>标记来完成对视频的调用及播放。基本语法：<videosrc="sea.mp4"controls="controls">Yourbrowserdoesnotsupportthevideotag.</video>语法说明：如果不加“controls”在浏览器上不会显示播放器。可以在开始标签和结束标签之间放置文本内容，这样老的浏览器就可以显示出不支持该标签的信息。7.2HTML5视频实例7-3：使用<video>标记设置视频，必须设置controls="controls"。7.2HTML5视频<video>标记的其他属性如表所示属性值描述autoplayautoplay如果出现该属性，则视频在就绪后马上播放。controlscontrols如果出现该属性，则向用户显示控件，比如播放按钮。heightpixels设置视频播放器的高度。looploop如果出现该属性，则当媒介文件完成播放后再次开始播放。mutedmuted规定视频的音频输出应该被静音。posterURL规定视频下载时显示的图像，或者在用户点击播放按钮前显示的图像。preloadpreload如果出现该属性，则视频在页面加载时进行加载，并预备播放。如果使用"autoplay"，则忽略该属性。srcurl要播放的视频的URL。widthpixels设置视频播放器的宽度。使用DOM控制播放37.3使用DOM控制播放属性描述currentTime当前播放时长。volume媒体文件播放音量。方法描述load方法用于重新加载待播放的媒体文件。play方法用于播放媒体文件。pause方法用于暂停播放媒体文件。<video>和<audio>元素的方法、属性和事件可以使用JavaScript进行控制。使用JavaScript来操作<video>标记，对<video>做一些简单基本的操作，包括播放器的播放、暂停，音量的读取、设置等相关操作。在HTML5中<video>和<audio>元素拥有一些方法和属性来控制播放。如：它们提供了用于播放、暂停以及加载媒体文件的方法等。以及一些公共的属性（比如时长、音量等）可以被读取或设置。常用属性如表所示。7.3使用DOM控制播放实例7-5：使用DOM控制视频文件7.3使用DOM控制播放实例7-6：使用DOM控制音频文件

HTML5Canvas元素47.4HTML5Canvas元素Canvas就像传统的银幕，可宽，可长，就是不能圆，它是一个矩形，而且只能是一个矩形，类似于Flash的舞台场景。Canvas使用Javascript在Web上绘制各种图像。Canvas区域中的每一个像素都可控，即所谓的像素级操作。Canvas拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。Canvas不需要插件，具有跨平台的先天优势，与Flash、SVG和VML等不同。Canvas具有多种操作函数和方法，比SVG和VML简单易懂。7.4HTML5Canvas元素属性描述height设置canvas的高度，默认值是150像素。width设置canvas的宽度，默认值是300像素。fillStyle设置用于填充一个区域的颜色，例如，fillStyle='rgb(255,0,0)'。strokeStyle设置用于绘制一根直线的颜色，例如，fillStyle='rgb(255,0,