工信版（中职）Web前端设计基础 项目四-2电子课件.pptx

《工信版（中职）Web前端设计基础 项目四-2电子课件.pptx》由会员分享，可在线阅读，更多相关《工信版（中职）Web前端设计基础 项目四-2电子课件.pptx（18页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、YCF（中职）Web前端设计基础 项目四-2电子课件网页中的多媒体项目四授课教师：姓名WEB前端设计基础Contents1.项目描述2.知识准备3.项目实施4.项目拓展5.项目小结6.技能训练三 项目实施通过此项目的学习，学习到HTML 5网页中超链接、音频、视频等标签元素，下面通过制作HTML 5音乐播放器来应用这些网页元素，效果如图所示。制作HTML 5音乐播放器三 项目实施启动Sublime程序，新建并保存文件名称为4-9.html。第一步第二步Head标签内的代码输入如下：HTML5音乐播放器 a:hovertext-decoration:none;font-size:14px;col

2、or:red;三 项目实施第三步body标签内的代码输入如下：歌曲欣赏祖国万岁我爱你中国感恩祖国共和国的日子var audio=document.getElementById(audio);function one()audio.src=media/01.mp3;audio.play();function two()audio.src=media/02.mp3;audio.play();function three()audio.src=media/03.mp3;audio.play();function four()audio.src=media/04.mp3;audio.play();使用

3、audio标签插入音频播放器，设置src为空、id为audio（设置id的作用是下面的代码通过使用getElementById()来访问元素）。JavaScript代码，功能是给audio标签的src赋值，当单击上面的超链接时播放相对应的歌曲。分别通过设置audio对象的src的值来实现不同音频源文件的准备，接下来使用audio对象的play()方法来播放音频文件。三 项目实施再次保存文件后，在页面中右击，从弹出的快捷菜单中选择“在浏览器中打开”命令，效果如图所示。第四步四 项目拓展此项目拓展创建视频播放器，效果如图所示。四 项目拓展用Sublime编辑器新建并保存文件4-10.html。第一

4、步第二步Head标签内的代码输入如下：HTML5视频播放器 pwidth:680px;四 项目拓展第三步 HTML5视频播放器 亲，您的浏览器不支持html5的video标签！播放 暂停 快进10秒 快退10秒 无声 加速播放 减速播放 正常播放 调高嗓门 调低嗓门 body标签内的代码输入如下：使用video标签插入视频播放器，设置src为空、id为video（设置id的作用是为了下面的JavaScript代码获得video元素）。设置controls的值，在HTML 5中规定用controls属性来控制视频文件的播放、暂停、停止和调节音量等操作。controls是一个布尔属性，一旦添加了此

5、属性，等于高速浏览器需要显示播放控制并允许用户进行操作。为button按钮添加了onclick属性，onclick属性是由元素上的鼠标点击触发。四 项目拓展第三步 var video=document.getElementById(video);/播放 function bofang()video.play();/暂停 function zanting()video.pause();/快进10秒 function kuaijin()video.currentTime +=10;/快退10秒 function kuaitui()video.currentTime-=10;/有声和无声 即静音和不

6、静音 function shutup(obj)if(video.muted)obj.innerHTML=无声;video.muted=false;else obj.innerHTML=有声;video.muted=true;function speedup()video.playbackRate=3;function speeddown()video.playbackRate=1/3;function normal()video.playbackRate=1;function upper()video.volume+=0.1;/声音值得范围是0-1 function lower()video.

7、volume-=0.1;JavaScript代码，功能是单击button按钮来改变视频播放器video对象的属性和方法，从而产生不同的效果。使用了video对象的play()方法来控制视频的播放。使用了video对象的pause()方法来控制视频的暂停。分别通过设置video对象属性的值，来改变快进、快退、有声、无声、加速播放、减速播放、正常播放、增加音量和降低音量操作。四 项目拓展再次保存文件后，在页面中右击，从弹出的快捷菜单中选择“在浏览器中打开”命令，效果如图所示。第四步五 项目小结本项目通过项目实施和项目拓展制作了HTML 5音频和视频播放器两个案例，学习了在网页中添加超链接、音频、视

8、频和控制音视频对象的属性和方法，掌握了、等标签的使用方法。五 项目小结本项目主要知识点总结如表所示。多媒体标签格式总结标签或属性标签或属性格式或用法格式或用法说明说明标签标签超链接文字超链接标签href属性属性表示链接地址，链接地址所指向的链接类型包括图片文件、网站地址、FTP地址、电子邮件等标签属性target属性属性控制浏览器窗口的打开方式，target属性值有四个：_self、_blank、_top、_parent标标 签签 和和标签标签创建热点区域标签name属性属性为区域命名，设置值必须与标签的usemap属性值相同创建热点区域属性usemap属性属性建立图片热点区域时，必须插入图片

9、且为图片增加usemap属性，属性值必须以“#”开头，加上名称shape属性属性rect（矩形）circle（圆形）poly（多边形）coords属性属性coords=x1,y1,x2,y2coords=x,y,rcoords=x1,y1,x2,y2,x3,y3标签标签添加音频标签五 项目小结本项目主要知识点总结如表所示。多媒体标签格式总结标签或属性标签或属性格式或用法格式或用法说明说明src属性属性定义要播放的音频地址标签的常见属性controls属性属性提供添加播放、暂停和音量控件的属性autoplay属性属性出现该属性，音频在就绪后马上播放loop属性属性出现该属性，每当音频结束时重新开

10、始播放preload属性属性出现该属性，音频在页面加载时进行加载，并预备播放。如果使用autoplay，则忽略该属性。preload属性值有三种：auto、meta、none标签标签添加视频标签src属性属性定义要播放的视频地址标签的常见属性controls属性属性提供添加播放、暂停和音量控件的属性autoplay属性属性出现该属性，视频在就绪后马上播放height属性属性设置视频播放器的高度width属性属性设置视频播放器的宽度loop属性属性出现该属性，媒介文件完成播放后再次开始播放preload属性属性出现该属性，视频在页面加载时进行加载，并预备播放。如果使用autoplay，则忽略该属

11、性。preload属性值有三种：auto、meta、nonemuted属性属性设置视频的音频输出应该被静音poster属性属性设置视频下载时显示的图像，或在用户点击播放按钮前显示的图像六 技能训练通过测试练习环节，对本项目涉及的英文单词进行重复练习，既可以熟悉html标签的单词组合，也可以提高代码输入的速度和正确率。在浏览器中打开素材中的Exercise4.html文件，单击“开始测试按钮”，在文本框输入上面的单词，输入完成后，单击“结束/计算速度”按钮即可显示所用时间、错误数量和输入速度等信息。作业一、上机实训1.上机完成项目实施中音乐播放器的实例操作。2.上机完成项目拓展中视频播放器的实例操作。二、技能训练对本项目涉及的英文单词进行重复练习，既可以熟悉html标签的单词组合，也可以提高代码输入的速度和正确率。End