制作SCORM视频课件页面
赵宏达
一、摆放一个基础的Html视频页面
基本布局为
<body>
<div id="header"><h1>标题</h1></div>
<div id="video"><video>视频</video></div>
<div id="footer"><p>页脚</p></div>
</body>
处理标题：
如果标题有图片和文字，需要分居两侧，考虑到浏览器窗口在不同尺寸时，float布局会导致元素移位，可以用多个空格 作为“胶水”把图片和文字元素粘在一行；用不换行<nobr>保持元素不换行。
二、使用CSS调整页面样式
对全部对象*设置margin:0;来消除块级元素的自带边距，进而根据需要单独设置各块元素的边距：
*{
margin: 0;
}
对<body>内所有元素外套一个<div id="container">并使用这段代码来实现整体垂直居中的效果：
#container{
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
text-align: center;
white-space: nowrap;
overflow: auto;
}
#container:before{
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
}
多分辨率支持：
例：使用
@media screen and (min-width:1367px) and (max-width:1440px){
}
控制1440*900分辨率屏幕的显示效果。在其中填入需要改变的元素属性。
三、通过JS配合SCORM API实现功能
1. 读取学员姓名：
<SCRIPT language="javascript">
loadPage();
var studentName = "";
var lmsStudentName = doLMSGetValue("cmi.core.student_name");
if ( lmsStudentName != "" ){
studentName = "学员：" + lmsStudentName;
}
document.write(studentName);
</SCRIPT>
直接读取cmi.core.student_name。
2. 保存与读取视频进度
var vTimeStr = doLMSGetValue( "cmi.core.lesson_location" );
var myVid = document.getElementById("video1");
if (doLMSGetLastError() == "0" && Boolean(vTimeStr))
{
var lastvTime = Number(vTimeStr);
myVid.currentTime = lastvTime;
}
function myFunction(event) {
if (myVid.paused || exitPageStatus != true )
{
var vTime = myVid.currentTime;
doLMSSetValue( "cmi.core.lesson_location", String(vTime) );
var result;
result = doLMSCommit();
}
}
读取上次位置，若有记录且不报错，则跳转到保存位置；
播放视频时，若视频暂停或页面关闭，则记录视频位置并提交。
添加属性ontimeupdate="myFunction(this)"到<video id="video1">标签内即可使用。1
js在html页面代码中的位置会影响其调用顺序，所以不是所有的js都在
<head>内调用。比如上面这段就应该放在页面末尾。 ↩︎
类似资料：