河南中医药大学：《Web前端开发》课程教学实验指导（2014）实验四：在网页中使用表单和多媒体

《Web前端开发》实验教学指导/实验四:在网页中使用表单和多媒体 《Web前端开发》实验教学指导 实验四:在网页中使用表单和多媒体 、实验目的 掌握常用的表单元素及使用方法: 2、掌握在网页中使用多媒体的具体方法; 3、了解多媒体编码的基本原理 二、实验环境 1、 Windows XP/windows7操作系统 2、安装有 Adobe dreamweaver CS6软件的计算机一台 3、局域网网络环境,并且使用固定IP地址 三、实验要求 1、熟悉常用的表单,并掌握其基本的使用方法 2、掌握在网页中使用本地和远程多媒体文件的方法。 四、实验原理 1、表单元素的使用方法; 2、多媒体元素的使用方法 五、实验步骤 1、简单的用户登录界面 编写简单的用户登录界面,效果如图4-1所示 用户登录界面 用户名: 密码 提交」重置 图4-1用户登录界面 参考代码 tte用户登录 河南中医学院互联网应用技术研究 本讲共计12页|当前第1页

《Web 前端开发》实验教学指导 / 实验四：在网页中使用表单和多媒体 河南中医学院互联网应用技术研究所 本讲共计 12 页 | 当前第 1 页 《Web 前端开发》实验教学指导 实验四：在网页中使用表单和多媒体 一、实验目的 1、掌握常用的表单元素及使用方法； 2、掌握在网页中使用多媒体的具体方法； 3、了解多媒体编码的基本原理。 二、实验环境 1、Windows XP/Windows 7 操作系统； 2、安装有 Adobe Dreamweaver CS6 软件的计算机一台； 3、局域网网络环境，并且使用固定 IP 地址。 三、实验要求 1、熟悉常用的表单，并掌握其基本的使用方法； 2、掌握在网页中使用本地和远程多媒体文件的方法。 四、实验原理 1、表单元素的使用方法； 2、多媒体元素的使用方法 五、实验步骤 1、简单的用户登录界面 编写简单的用户登录界面，效果如图 4-1 所示。； 参考代码： 用户登录 图 4-1 用户登录界面

Wcb前端开发》实验教学指导/实验四:在网页中使用表单和多媒体2 用户登录界面 td> type="password" name="username" style="width: 150px tte>个人信息修改<rtte 河南中医学院互联网应用技术研究 本讲共计12页|当前第2页

《Web 前端开发》实验教学指导 / 实验四：在网页中使用表单和多媒体 河南中医学院互联网应用技术研究所 本讲共计 12 页 | 当前第 2 页 用户登录界面 用户名： 密码： 2、使用简单的表单选择个人信息 编写简单表单实现的个人信息修改，效果如图 4-2 所示。 参考代码： 个人信息修改 图 4-2 个人信息选择

Wdb前端开发》实验教学指导/实验四:在网页中使用表单和多媒体3 able cellspacing="0" cellpadding=0" style="margin: 50px; padding: 20px; background-color #6CF; text-align: left;"> 个人信息修改 性别: # label for="woman">sr 兴趣爱好: input type=" checkbox"name=" hobbies" value="1">体育运动 娱乐休闲 所在地区: select style="width: 150px, "name="select 香港 澳门 option value="4">台湾 style="margin-left: 20px; 7 3、用户详细信息 河南中医学院互联网应用技术研究 本讲共计12页|当前第3页

《Web 前端开发》实验教学指导 / 实验四：在网页中使用表单和多媒体 河南中医学院互联网应用技术研究所 本讲共计 12 页 | 当前第 3 页 个人信息修改 性别： 男 女 兴趣爱好： 体育运动 娱乐休闲 所在地区： 大陆 香港 澳门 台湾 3、用户详细信息

Wcb前端开发》实验教学指导/实验四:在网页中使用表单和多媒体4 (1)撰写用户详细信息的填写页面,效果如图4-3所示 用户详细信息 姓名 性别 出生日期 联系电话: 常用邮箱: 兴趣爱好:国体育运 动口娱 乐休闲 科学技术音乐影视 教育水平:研究生 所在地区:大 人介绍 交]重 图4-3用户信息信息 (2)请使用最简方法实现该页面。 参考代码 用户详细信息 性别:男 <label 河南中医学院互联网应用技术研究 本讲共计12页|当前第4页

《Web 前端开发》实验教学指导 / 实验四：在网页中使用表单和多媒体 河南中医学院互联网应用技术研究所 本讲共计 12 页 | 当前第 4 页 （1）撰写用户详细信息的填写页面，效果如图 4-3 所示； （2）请使用最简方法实现该页面。 参考代码： 用户详细信息 用户详细信息 姓名： 性别： 男 女 图 4-3 用户信息信息

Wcb前端开发》实验教学指导/实验四:在网页中使用表单和多媒体5 出生日期: &nbsp; F &nbsp; H &nbsp; 联系电话: 常用邮箱: 兴趣爱好:体育运动 娱乐休闲 科学技术 input type=" checkbox"name=" hobbies"vaue="4">音乐影视 ctd height="30>教育水平: option value="1">研究生 大学 高中 ption value="4">初中 小学所在地区: 大陆 ption value="2">香港 澳门 台湾</ option 河南中医学院互联网应用技术研究 本讲共计12页|当前第5页

《Web 前端开发》实验教学指导 / 实验四：在网页中使用表单和多媒体 河南中医学院互联网应用技术研究所 本讲共计 12 页 | 当前第 5 页 出生日期： &nbsp;年 &nbsp;月 &nbsp;日 联系电话： 常用邮箱： 兴趣爱好： 体育运动 娱乐休闲 科学技术 音乐影视 教育水平： 研究生 大学 高中 初中 小学 所在地区： 大陆 香港 澳门 台湾

Wdb前端开发》实验教学指导/实验四:在网页中使用表单和多媒体6 个人介绍: 要求 请将上述三个案例的代码使用更加优化的方式实现,并将代码填写到实验报告册中。 请考虑,除了使用表格布局进行表单制作外,还有那些实现方式?将这些方式进行总结,并对 比其优缺点后,填写到实验报告册中 4、多媒体的播放 (1)熟悉html5中多媒体播放所用到的标签,掌握标签中控制多媒体的一些属性: (2)编写视频播放器,实现“播放停”和“静音”功能; (3)播放的效果如图4-4所示 视频播放 高清 暂停)(暂时静音 图4-4视频播放 参考代码 河南中医学院互联网应用技术研究 本讲共计12页|当前第6页

《Web 前端开发》实验教学指导 / 实验四：在网页中使用表单和多媒体 河南中医学院互联网应用技术研究所 本讲共计 12 页 | 当前第 6 页 图 4-4 视频播放 个人介绍： 要求： 请将上述三个案例的代码使用更加优化的方式实现，并将代码填写到实验报告册中。 请考虑，除了使用表格布局进行表单制作外，还有那些实现方式？将这些方式进行总结，并对 比其优缺点后，填写到实验报告册中。 4、多媒体的播放 （1）熟悉 html5 中多媒体播放所用到的标签，掌握标签中控制多媒体的一些属性； （2）编写视频播放器，实现“播放/暂停”和“静音”功能； （3）播放的效果如图 4-4 所示。 参考代码： 视频播放

《Web前端开发》实验教学指导/实验四:在网页中使用表单和多媒体 metahttp-equiv="content-type"content="Text/html;charset=utf-8"> dth: 552p font-size: 12px color: #FOO font-size: 14px; width: 552px border: 1 px solid #333 background: #FFF margin-top: 10px background-color #41A81E color: #F2F2F2 text-align center border-radius: 8px; border: 1 px #078111 solid padding-right: 15px; color: #333: background: #FFF 视频播放 河南中医学院互联网应用技术研究 本讲共计12页|当前第7页

《Web 前端开发》实验教学指导 / 实验四：在网页中使用表单和多媒体 河南中医学院互联网应用技术研究所 本讲共计 12 页 | 当前第 7 页 body{ margin:auto; width:552px; font-size:12px; margin-top:60px; } h2 { text-align:center; color:#F00; font-size:14px; font-weight:bold; } progress{ width:552px; border:1px solid #333; background:#FFF; } button{ margin-top:10px; border:none; background-color:#41A81E; color:#F2F2F2; width:auto; height:22px; text-align:center; vertical-align:middle; border-radius:8px; border:1px #078111 solid; padding-left:15px; padding-right:15px; } #showTime{ margin-top:10px; color:#333; } #progressValue{ width:0%; height:20px; background:#FFF; cursor:default; } 视频播放

Wdb前端开发》实验教学指导/实验四:在网页中使用表单和多媒体8 您的浏览器不支持vdeo元素 div id="button Div"> -播放进度条-> div id="progress"> id="Play Br 暂时静音 /body> script type="text/javascript"> var muted=false var video= document. getElementByld("Video Player) videoaddEventListener(loadedmetadata', loadedmetadata, false video addEventListener(ended, videoEnded, false) video addEventListener(play, videoPlay, false) video addEventListener('pause', videoPause, false) video addEventListener(timeupdate', update Progress, false); video addEventListener("error", catchError, false) progress=document. getElement(progress") progress.onmouseover-progress_mouseover; progress.onmouseout=progress_mouseout, play Percent=document getElementByld(play Percent) play Percent. onmouseout=progress_mouseout <play Percent_clic function catch Error var error video error case 1 alert("视频的载入过程以为用户操作,已经被中止。"); 河南中医学院互联网应用技术研究 本讲共计12页|当前第8页

《Web 前端开发》实验教学指导 / 实验四：在网页中使用表单和多媒体 河南中医学院互联网应用技术研究所 本讲共计 12 页 | 当前第 8 页 您的浏览器不支持 video 元素 暂停 暂时静音 var muted=false; var video = document.getElementById("VideoPlayer"); if(video.canPlayType) { video.addEventListener('loadedmetadata',loadedmetadata,false); video.addEventListener('ended',videoEnded,false); video.addEventListener('play',videoPlay,false); video.addEventListener('pause',videoPause,false); video.addEventListener('timeupdate',updateProgress,false); video.addEventListener("error",catchError,false); progress=document.getElementById("progress"); progress.onmouseover=progress_mouseover; progress.onmouseout=progress_mouseout; progress.onclick=progress_click; playPercent=document.getElementById("playPercent"); playPercent.onmouseover=progress_mouseover; playPercent.onmouseout=progress_mouseout; playPercent.onclick=playPercent_click; } function catchError() { var error = video.error; switch(error.code) { case 1: alert("视频的载入过程以为用户操作，已经被中止。"); break; case 2:

Wdb前端开发》实验教学指导/实验四:在网页中使用表单和多媒体9 aler("网络发生故障,视频的载入过程被中止。"); case 3. alert("浏览器对视频的解码错误,无法播放视频。") alert('"视频不可访问或视频编码器浏览器不支持。") function loadedmetadata0 btn Play. disabled=", video. playo var button Div=document getElement Byld(buttonDiv") button Div style. display="white function PlayOrPauseo video playbackRate=speed video muted=muted se video. pause(: function videoPlay(ev) var btn Play=document getElementByld(btn"); document. getElementByld(btn Mute").disabled= function videoPause(ev) var btnPlay=document. getElementByld(btnPlay") btnPlay innerHTML="播放 document. getElementByld(btn Mute").disabled="disabled 河南中医学院互联网应用技术研究 本讲共计12页|当前第9页

《Web 前端开发》实验教学指导 / 实验四：在网页中使用表单和多媒体 河南中医学院互联网应用技术研究所 本讲共计 12 页 | 当前第 9 页 alert("网络发生故障，视频的载入过程被中止。"); break; case 3: alert("浏览器对视频的解码错误，无法播放视频。"); break; case 4: alert("视频不可访问或视频编码器浏览器不支持。"); break; } } function loadedmetadata() { var btnPlay=document.getElementById("btnPlay"); btnPlay.innerHTML="暂停"; btnPlay.disabled=""; video.play(); var buttonDiv=document.getElementById("buttonDiv"); buttonDiv.style.display="white"; } function PlayOrPause() { if(video.paused) { video.play(); video.playbackRate=speed; video.muted=muted; video.volume=volume; } else video.pause(); } function videoEnded(ev) { video.currentTime=0; this.pause(); } function videoPlay(ev) { var btnPlay=document.getElementById("btnPlay"); btnPlay.innerHTML="暂停"; document.getElementById("btnMute").disabled=""; } function videoPause(ev) { var btnPlay=document.getElementById("btnPlay"); btnPlay.innerHTML="播放"; document.getElementById("btnMute").disabled="disabled"; }

Wdb前端开发》实验教学指导/实验四:在网页中使用表单和多媒体10 function update Progresso value=Math. round( ( Math. floor(video. current Time )/Math. floor(video. duration))*100, 0) progress=document. getElement Byld(play Percent,) progress. value= value var progressvalue=document. getElementByld(progressvalue") progressvalue style width= value+% show Time. innerHTML-calcT ime(Math. floor(video. current Time))+/+calcT ime(Math. floor (video duration) function calcTime(time var hour: var minute var second. hour=String(parseInt(time/3600, 10)) if (hour length== 1) hour =0+ hour minute=String(parseInt(time%3600)/60, 10)) if (minute length == 1) minute =0+ minute second=String(parseInt(time%60, 10) if (second length==1) second =0+ second return hour +". "+minute+" +second function progress_mouseover(ev) show Time. innerHTML-caIcT ime( Math. floor(video currentT ime)+/+calcTime (Math. floor (video duration)) stop Propagation function progress_ mouseout(ev show Time. innerHTML=". play Percent=document getElement Byld( play Percent video currentTime= video duration"(evt. offsetX play Percent. clientWidth): function progress_click(evt progress=document. getElement Byld("progress"): video currentTime= video duration*(evt. offsetX /progress. clientWidth) 河南中医学院互联网应用技术研究 本讲共计12页|当前第10页

《Web 前端开发》实验教学指导 / 实验四：在网页中使用表单和多媒体 河南中医学院互联网应用技术研究所 本讲共计 12 页 | 当前第 10 页 function updateProgress() { var value=Math.round((Math.floor(video.currentTime)/Math.floor(video.duration))*100,0); var progress = document.getElementById('playPercent'); progress.value = value; var progressValue=document.getElementById("progressValue"); progressValue.style.width = value+"%"; showTime.innerHTML=calcTime(Math.floor(video.currentTime))+'/'+calcTime(Math.floor (video.duration)); } function calcTime(time) { var hour; var minute; var second; hour=String(parseInt(time/3600,10)); if (hour.length == 1) hour = '0' + hour; minute=String(parseInt((time%3600)/60,10)); if (minute.length == 1) minute = '0' + minute; second=String(parseInt(time%60,10)); if (second.length == 1) second = '0' + second; return hour+":"+minute+":"+second; } function progress_mouseover(ev) { showTime.innerHTML=calcTime(Math.floor(video.currentTime))+'/'+calcTime(Math.floor (video.duration)); ev.stopPropagation(); } function progress_mouseout(ev) { showTime.innerHTML=""; } function playPercent_click(evt) { if(evt.offsetX) { playPercent=document.getElementById("playPercent"); video.currentTime = video.duration * (evt.offsetX / playPercent.clientWidth); } } function progress_click(evt) { progress=document.getElementById("progress"); if(evt.offsetX) video.currentTime = video.duration * (evt.offsetX /progress.clientWidth);