Web前端技术项目式教程课件 任务六 多媒体嵌入_第1页
Web前端技术项目式教程课件 任务六 多媒体嵌入_第2页
Web前端技术项目式教程课件 任务六 多媒体嵌入_第3页
Web前端技术项目式教程课件 任务六 多媒体嵌入_第4页
Web前端技术项目式教程课件 任务六 多媒体嵌入_第5页
已阅读5页，还剩11页未读， 继续免费阅读

下载本文档

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

文档简介

Web前端技术项目式教程

（HTML5+CSS3+Flex+Bootstrap）任务六

多媒体嵌入知识目标1了解HTML5支持的音频和视频格式。2熟悉HTML5中音频和视频相关属性。能力目标1掌握使用HTML5多媒体元素在网页中播放音频和视频。素质目标1培养学生具备正确的网络伦理和社会责任感。2

培养学生遵守行业标准（如W3C规范）的习惯。思维导图任务描述李明考虑到网站目前只有文字和图像两种形式的内容，想通过增加多媒体元素丰富网站内容。本任务的具体要求如下。

制作“传统节日”页面。

在“传统节日”页面中嵌入音频和视频。知识引入1．音频文件格式2．音频文件嵌入3．视频文件格式4．视频文件嵌入1．音频文件格式在HTML5中嵌入的音频格式主要包括MP3、Wav、Ogg。具体介绍如下：MP3：一个有损数据压缩格式，它的优点是：文件容量小、方便存储/播放。但音质一般。Wav：也称为波形文件，能记录各种单声道或立体声的声音信息，并能保证声音不失真这是它的独特亮点；但同时它有一个非常大的缺点，就是文件占用的内存空间很大。Ogg：同样是一个音频压缩格式，相比于MP3，OGG格式可以提供更好的音质。

2．音频文件嵌入在HTML5中，audio标签用于嵌入音频文件。<body><audiocontrols><sourcesrc="chun.wav"type="audio/wav"><sourcesrc="chun.mp3"type="audio/mp3">

您的浏览器不支持audio元素。

</audio></body>

3．视频文件格式在HTML5中嵌入的视频格式主要包括MP4、WebM和Ogg。具体介绍如下：MP4：目前最广泛支持的视频格式之一，几乎所有的播放器和设备都支持MP4格式。WebM：一种开放、免费的视频格式，特别适合于网页视频。Ogg：一个开源的多媒体容器格式，可以包含视频、音频和元数据。

4．视频文件嵌入在HTML5中，video标签用于嵌入音频文件。<body><videosrc="qm.mp4"width="320"height="240"controls>

您的浏览器不支持video标签。

</video></body>

任务实现：中国传统文化网站“传统节日”页面实现①在站点根目录pages文件夹下新建festival.html文件。②在css文件夹下新建festival.css文件。③在festival.html的头部链接上样式表文件。任务拓展：制作音乐播放器页面

1.任务要求：点击开始按钮音乐播放，同时圆形图片随着音乐播放进行旋转，点击暂停按钮音乐停止播放，同时圆形图片停止旋转。2.动画制作要点分析①使用HTML搭建音乐播放器界面。②使用CSS定位音乐播放器界面内容。③使用JavaScript控制音乐的播放与停止，并且控制圆

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

温馨提示

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

最新文档

评论

0/150

提交评论