Web前端开发案例教程 第2版 课件2.6 多媒体标签_第1页
Web前端开发案例教程 第2版 课件2.6 多媒体标签_第2页
Web前端开发案例教程 第2版 课件2.6 多媒体标签_第3页
Web前端开发案例教程 第2版 课件2.6 多媒体标签_第4页
Web前端开发案例教程 第2版 课件2.6 多媒体标签_第5页
已阅读5页，还剩4页未读， 继续免费阅读

下载本文档

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

文档简介

单元二新闻页制作—HTML5常用标签软件技术专业SoftwareTechnologyWeb前端设计与开发

常见的网页中主要包含图片、文字、超链接。这些内容均是使用HTML5标签实现，本单元开始学习HTML的各类标签，掌握网页设计中的相关元素。主要包括：2.1文本标签2.2列表标签2.3分隔线标签2.4图片标签2.5超链接标签2.6多媒体标签-Web页面音视频播放2.7标签类型2.8meta标签课程导学知识点实战举例课程导学单元总结学习目标1.知识目标（1）掌握并熟练应用HTML文本标签；（2）掌握并熟练应用列表标签；（3）掌握并熟练应用图片标签；（4）掌握并熟练应用超链接标签；（5）掌握并熟练应用多媒体标签；（6）掌握并熟练应用头部标签。2.能力目标（1）能熟练使用HTML文本标签、列表标签、图片标签、超链接标签、多媒体标签和头部标签搭建基本静态网页；（2）能使用HTML语言设计一个网页并运行。3.素质目标（1）具有质量意识、安全意识、工匠精神和创新思维；（2）具有集体意识和团队合作精神；（3）具有界面设计审美和人文素养；（4）熟悉软件开发流程和规范，具有良好的编程习惯。课程导学知识点实战举例课程导学单元总结课程导学知识点实战举例2.6多媒体标签-Web页面音视频播放单元总结Web上的多媒体指的是音效、音乐、视频和动画。现代网络浏览器已支持很多多媒体格式。在HTML5之前，如果想在网页上播放音频和视频，则需要安装第三方插件，常用的是Flash。使用插件有以下几方面缺点：第一，比较繁琐；第二，容易出现安全性问题；第三，大部分情况下只能在计算机上使用。HTML5的出现改变了这种现状，用以下两个元素处理音频和视频。2.6.1audio音频标签-音频播放课程导学知识点实战举例2.6多媒体标签-Web页面音视频播放单元总结<audio>元素用于播放音频，它的使用语法格式如下：<audiosrc="./xxx.mp3"autoplay="autoplay"loop="-1"controls="controls">你的浏览器不支持该标签，请更换最新的浏览器</audio>src：用于指定所要播放音频的资源路径。autoplay：设置了该属性以后，在打开页面后音频会自动播放（请注意此属性在HTML5中已经弃用）。loop：设置音频播放的循环次数，设置2，就循环播放两次，如果设置为-1，则表示无限循环播放。controls：如果不设置这个标签，那么在页面中无法看到具体的音频图标，但是如果设置了这个标签，在页面中就能看到一块界面区域，可以控制音频的前进，后退，播放/暂停，音量等。。audio中设置的文字，表示用户的浏览器如果不支持audio，则会显示出该文字；如果用户的浏览器支持该标签，那么不会显示这段文字，音频使用正常。audio中使用source表示可以更大限度的支持各个不同格式的音频，如果mp3不支持，那么就跳到下一行查看是否支持ogg格式音频。2.6.1audio音频标签-音频播放<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>播放音乐</title></head><body><audiosrc="我爱你祖国.mp3"controls="controls">亲，您的浏览器不支持HTML5的audio标签</audio></body></html>课程导学知识点实战举例2.6多媒体标签-Web页面音视频播放单元总结2.6.2video视频标签-视频播放课程导学知识点实战举例2.6多媒体标签-Web页面音视频播放单元总结<video>元素用于播放视频，它的使用语法格式如下：<videosrc="./xxx.mp4"height=””muted=“muted”autoplay="autoplay"loop="-1"controls="controls">你的浏览器不支持该标签，请更换最新的浏览器</video><video>属性的取值及其说明如表2-6。属性值描述srcurl要播放的视频的URL。heightpixels设置视频播放器的高度。widthpixels设置视频播放器的宽度。mutedmuted规定视频的音频输出应该被静音。autoplayautoplay如果出现该属性，则视频在就绪后马上播放。新版本谷歌、火狐浏览器拒绝自动播放looploop如果出现该属性，则当媒介文件完成播放后再次开始播放。controlscontrols如果出现该属性，则向用户显示控件，比如播放按钮。posterURL规定视频下载时显示的图像，或者在用户点击播放按钮前显示的图像。preloadpreload如果出现该属性，则视频在页面加载时进行加载，并预备播放。如果使用"autoplay"，则忽略该属性。2.6.1audio音频标签-音频播放<!DOCTYPE

html><html

lang="en"><head>

<meta

charset="UTF-8">

<title>播放视频</title></head><body>

<videowidth="512"height="384"src="video/北京欢迎你.mp4"controls="controls">亲，您的浏览器不支持HTML5的video标

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

温馨提示

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

最新文档

评论

0/150

提交评论