《网页设计制作》课件——项目7.pptxVIP

《网页设计制作》项目7

7.1音视频标签7.2CSS过渡7.3CSS变换7.4CSS动画目录

7.1音视频标签在HTML5出现之前并没有将视频和音频嵌入到页面的标准方式，多媒体内容在大多数情况下都是通过第三方插件或集成在Web浏览器的应用程序置于页面中。复杂冗长运用HTML5中新增的video标签和audio标签可以避免这样的问题。

运用HTML5的video和audio标签可以在页面中嵌入视频或音频文件，如果想要这些文件在页面中加载播放，还需要设置正确的多媒体格式。视频格式视频格式包含视频编码、音频编码和容器格式。音频格式音频格式是指要在计算机内播放或是处理音频文件。7.1音视频标签

使用video嵌入视频基本语法格式：videosrc=视频文件路径controls=controls/videobodyvideosrc=video/pian.mp4controls=controls浏览器不支持video标签/video/body例如：使用video标签来嵌入视频7.1音视频标签

使用video嵌入视频浏览器添加的视频控件，用于控制视频播放的状态播放进度条声音全屏7.1音视频标签

属性值描述autoplayautoplay当页面载入完成后自动播放视频。looploop视频结束时重新开始播放。preloadpreload如果出现该属性，则视频在页面加载时进行加载，并预备播放。如果使用autoplay，则忽略该属性。posterurl当视频缓冲不足时，该属性值链接一个图像，并将该图像按照一定的比例显示出来。Video元素的其他属性7.1音视频标签

HTML5支持的视频格式oggmpeg4webm7.1音视频标签

使用audio嵌入音频基本语法格式如下：audiosrc=音频文件路径controls=controls/audiobodyaudiosrc=music/1.mp3controls=controls浏览器不支持audio标签/audio/body例如：使用audio标签来嵌入音频7.1音视频标签

使用audio嵌入音频音频控件，用于控制音频文件的播放状态播放进度条声音7.1音视频标签

audio元素的其他属性属性值描述autoplayautoplay当页面载入完成后自动播放音频。looploop音频结束时重新开始播放。preloadpreload如果出现该属性，则音频在页面加载时进行加载，并预备播放。如果使用autoplay，则忽略该属性。注意：以上列举的audio元素的属性和video元素是相同的，这些相同的属性在嵌入音视频时是通用的。7.1音视频标签

HTML5支持的音频格式oggmp3wav7.1音视频标签

视频音频文件的兼容性问题虽然html5支持ogg、mpeg4和webm的视频格式以及ogg、mp3和wav的音频格式，但各浏览器对这些格式却不完全支持。视频格式格式IE9Firefox4.0Opera10.6Chrome6.0Safari3.0ogg?×支持支持支持?×mpeg4支持?×?×支持支持webm?×支持支持支持?×音频格式ogg?×支持支持支持?×mp3支持?×?×支持支持wav?×支持支持?×支持7.1音视频标签

在HTML5中，运用source元素可以为video元素或audio元素提供多个备用文件。基本语法格式audiocontrols=controls sourcesrc=音频文件地址type=媒体文件类型/格式 sourcesrc=音频文件地址type=媒体文件类型/格式 ……/audiosrc用于指定媒体文件的URL地址。type指定媒体文件的类型。浏览器对音视频文件的兼容性7.1音视频标签

多学一招：调用网页多媒体文件一种是调用本地多媒体文件（见教材），另一种是调用指定url地址的互联网多媒体文件。例如：videosrc=/i/movie.oggcontrols=controls调用网络视频文件/video【总结】7.1音视频标签

控制视频的宽高在HTML5中，经常会通过为video元素添加宽高的方式给视频预留一定的空间，这样浏览器在加载页面时就会预先确定视频的尺寸，为其保留合适的空间，使页面的布局不产生变化。注意：通过width和height属性来缩放视频，这样的视频即使在页面上看起来很小，但它的原始大小依然没变，因此在实际工作中要运用视频处理软件（如“格式工厂”）对视频进行压缩。7.1音视频标签

7.1音视频标签7.2CSS过渡7.3CSS变换7.4CSS动画目录

7.2过渡什么是过渡？

生活中处处可见的动画过渡到底是什么？认识过渡7.2过渡

过渡效果可以让元素从一种状态慢