网页设计与制作课件 第7章 HTML网页中的音频和视频.pptx

HTML5网页中的音频与视频PowerPointdesign

CONTNETScontents目录添加音频01添加视频02

添加音频Part01

（1）新建一个记事本文档，在文档中输入代码。（2）将代码保存为HTML文件，效果如图。课堂案例——插入音频文件

audio标签定义声音，比如音乐或其他音频流，其基本语法如下：audiosrc=music.mp3/audioaudio的相关属性如下。? src=filename：设定音乐文件的路径。? autoplay：音乐文件加载完就自动播放。? controls：显示播放控件。? loop：设定无限次播放。? muted：静音效果，音频即使在播放的时候，也是没有声音，除非用户手动调整控制面板的音量。? width/height”：设定控制面板的大小。? hidden=true：隐藏控制面板。audio标签属性

添加自动播放的音频文件需要用到audio标签的autoplay属性，代码如下：htmlheadtitle自动播放音乐/title/headbodyaudiosrc=1.mp3autoplay/audio/body/html添加自动播放的音频文件

添加带有控件的音频文件需要用到audio标签的controls属性，代码如下：htmlheadtitle自动播放音乐/title/headbodyaudiosrc=1.mp3controls/audio/body/html添加带有控件的音频文件

添加循环播放的音频文件需要用到audio标签的loop属性，代码如下：htmlheadtitle自动播放音乐/title/headbodyaudiosrc=1.mp3loopcontrols/audio/body/html添加循环播放的音频文件

添加视频Part02

（1）新建一个记事本文档，在文档中输入代码。（2）在body与/body标签之间输入代码。（3）将以上代码保存为HTML文件，打开网页。课堂案例——插入视频文件

video标签定义视频，比如电影片段或者其他视频，其基本语法如下：videosrc=视频.mp4/videovideo的相关属性如下。? src：设定视频文件的路径。? autoplay：视频文件加载完就自动播放。? controls：显示播放控件。? loop：设定无限次播放。? muted：静音效果，视频即使在播放的时候，也是没有声音，除非用户手动调整控制面板的音量。? width/height”：设定控制面板的大小。? poster：规定视频下载时显示的图像，或者在用户点击播放按钮前显示的图像。video标签的属性

添加自动播放的视频文件需要用到video标签的autoplay属性，代码如下：htmlheadtitle自动播放视频/title/headbodyvideosrc=视频.mp4autoplay/video/body/html添加自动播放的视频文件

添加带有控件的视频文件需要用到video标签的controls属性，代码如下：htmlheadtitle播放视频/title/headbodyvideosrc=视频.mp4autoplaycontrols/video/body/html添加带有控件的视频文件

添加循环播放的视频文件需要用到video标签的loop属性，代码如下：htmlheadtitle循环播放视频/title/headbodyvideosrc=视频.mp4autoplayloopcontrols/video/body/html添加循环播放的视频文件

为视频添加封面需要用到video标签的poster属性，代码如下：htmlheadtitle为视频添加封面/title/headbodyvideosrc=sp.mp4poster=spfmtx.jpgwidth=610height=400controls/video/body/html将以上代码保存为HTML文件，然后使用浏览器浏览。视频添加了封面，单击播放按钮后，视频就进行播放。为视频添加封面

第1步：新建一个记事本文档，在文档中插入一个表格，并在表格中插入图像。第2步：接下来继续插入表格、图像，添加文字，在/table标签后输入代码。第3步：在单元格中添加音频文件。第4步：继续插入表格和图像。练习案例——制作音乐网页

第1步：在网页中插入2行1列的表格，在第1行单元格中插入图像，在第2行单元格中插入视频。第2步：继续插入表格和图像，在/table下方输入以下代码。第3步：为网页设置背景颜色，在head与/head之间输入如下代码。第4步：保存文件并浏