网页制作案例教程HTML5+CSS3 课件 项目7 多媒体元素_第1页
网页制作案例教程HTML5+CSS3 课件 项目7 多媒体元素_第2页
网页制作案例教程HTML5+CSS3 课件 项目7 多媒体元素_第3页
网页制作案例教程HTML5+CSS3 课件 项目7 多媒体元素_第4页
网页制作案例教程HTML5+CSS3 课件 项目7 多媒体元素_第5页
已阅读5页，还剩21页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

HTML5CSS3项目7多媒体元素网页制作案例教程（HTML5+CSS3）教学目标了解HTML5支持的音频和视频格式1了解掌握熟练2掌握HTML5中音频的相关属性能够使用音频、视频标签在页面中添加音视频4掌握3掌握HTML5中视频的相关属性1audio标记2video标记3source标记4制作“改革开放四十周年”网页任务分解01audio标记PART01audio标记音频<audio>是音频标记，用于在网页中添加音频，支持和实现音频文件的直接播放，支持缓冲预载和多种音频媒体格式，可以使用的音频格式有MP3、Wav、Ogg等。基本语法格式<audio属性名=“属性值”></audio>audio标记属性名功能src音频的路径controls显示播放控件autoplay自动播放loop循环播放muted静音播放在<audio>标记中，常用的属性有src、controls、autoplay、loop等，其主要功能如表所示：audio标记<body><audiosrc="./music/一起向未来.mp3"controls="controls"autoplay="autoplay"></audio></body>动手实践demo1audio标记背景音乐<audiosrc="./music/一起向未来.mp3"autoplay="autoplay"loop="loop"></audio>如果在导入音频时，不使用controls属性显示播放控件，只使用autoplay和loop属性实现自动循环播放，此时导入的音频类似于背景音乐，在网页打开后不显示播放控件，自动播放音频。02video标记网页制作案例教程（HTML5+CSS3）PART02video标记视频<video>是视频标记，用于在网页中添加视频，支持和实现视频文件的直接播放，支持缓冲预载和多种视频媒体格式，可以使用的视频格式有MP4、WebM、Ogg等。基本语法格式如下：基本语法格式<video属性名=“属性值”></video>video标记属性名功能src视频的路径controls显示播放控件autoplay自动播放loop循环播放muted静音播放在video标记中，常用的属性有src、controls、autoplay、loop等，其主要功能如表所示：video标记<body><videosrc="./video/一起向未来.mp4"controls="controls"autoplay="autoplay"

muted="muted"loop="loop"

></video></body>页面插入视频效果动手实践demo203source标记PART03source标记不同浏览器对音频的支持浏览器MP3WavOggInternetExplorerYESNONOChromeYESYESYESFirefoxYESYESYESSafariYESYESNOOperaYESYESYESsource标记浏览器MP4WebMOggInternetExplorerYESNONOChromeYESYESYESFirefoxYESYESYESSafariYESNONOOperaYESYESYES不同浏览器对视频的支持source标记source<source>标记为媒体元素（比如<video>和<audio>）定义媒体资源。<source>标签允许规定两个视频/音频文件供浏览器根据它对媒体类型或者编解码器的支持进行选择。基本语法格式<audio属性名=“属性值”><source属性名=“属性值”><source属性名=“属性值”></audio><video属性名=“属性值”><source属性名=”属性值”><source属性名=“属性值”></video>source标记属性名功能src音/视频的路径type用于说明src属性指定媒体的类型，帮助浏览器在获取媒体前判断是否支持此类别的媒体格式在<source>标记中，常用的属性有src、type等，其主要功能如表所示：source标记<body><videocontrols><sourcesrc="./video/一起向未来.webm"type="video/webm"><sourcesrc="./video/一起向未来.mp4"type="video/mp4"></video></body>动手实践demo304制作“西北之旅”网页网页制作案例教程（HTML5+CSS3）PART04制作“西北之旅”网页祖国的大西北并非寸草不生，这里的浪漫从未停止，是烈阳，是黄土，是雪山，是草原，是大漠孤烟，是长河落日……一路走过山河湖泊，跨过戈壁沙漠，见到丹霞地貌，感受大自然的鬼斧神工，也目睹了千年莫高窟和万里长城的终点，惊叹于古人的智慧，从丝绸之路起点经过河西走廊再到敦煌，真实感受到中国版图辽阔和历史文化的厚重感，是春风已度玉门关，是不破楼兰终不还！下面我们要制作“西北之旅”页面。制作“西北之旅”网页网页分析制作“西北之旅”网页制作步骤输入网页标题和内容0403新建文本文件，生成网页基本代码02打开VScode，打开项目文件夹01新建项目文件夹，准备素材制作“西北之旅”网页<body><divid="content"> <h2>西北之旅</h2> <audioautoplay="autoplay"loop="loop"> <sourcesrc="./music/背景音乐1.mp3"type="audio/mp3"> <sourcesrc="./music/背景音乐2.wav"type="audio/wav"> </audio> <videocontrols="controls"> <sourcesrc="./video/视频1.mp4"type="video/mp4"> <sourcesrc="./video/视频2.webm"type="video/webm"></video> <p>祖国的大西北并非寸草不生，这里的浪漫从未停止</p>

<p>祖是烈阳，是黄土，是雪山，是草原，是大漠孤烟，是长河落日……</p><p>一路走过山河湖泊</p><p>跨过戈壁沙漠</p>以下省略7个段落</div></body>网页内容制作“西北之旅”网页<style>*{margin:0px;padding:0px;

box-sizing:border-box;}

body{

font-size:1em;

font-family:"微软雅黑";}

#content{

width:1000px;

margin:0auto;

}#contenth2{text-align:center;line-height:60px;}#contentvideo{margin:0auto;display:block;width:500px;margin-bottom:5

人人文库> 全部分类> 教育资料 > 课件下载

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论