假设我们已经用一个名为video的变量指向了video元素，那么我们可以定义以下属性：
video.width=像素(指定宽度)
video.height=像素(指定高度)
video.videoWidth=像素(原始宽度)
video.videoHeight=像素(原始髙度)
video.poster=bbb_poster.jpg的URL地址(poster框架)这几个属性显然不足以构成视频播放器，事实上它们只是HTMLVideoElement的附加元素。HTMLMediaElement对象包含了所有必要的方法与属性，而在这里，HTMLVideoElement就代表了HTMLMediaElement(译者注：HTMLMediaElement包括audio和video)。若需了解更多，可参阅规范页面：
http://www.w3.Org/TR/html5/video.htmlmhtmlmediaelement真正的播放工作是由oncanplay开始的，当浏览器可以播放视频时，它将立即指向并执行一个JavaScript函数。在这里这个函数是initControlsO,它将获取视频对象，并传递给之前已创建并储存的全局变量video。为了实现这个视频播放器，我们还需要替initControlsO添加些内容，但目前我们需要用到的只是下面这段代码：varvideo;varinitControls=function(){video=document.querySelector("VIDEO");
}；
document.querySelector()方法属于CSS选择器API的一部分，用于将video变量指向文档中的video元素。这样，我们就可以访问HTMLMediaElement接口，并开始设计我们的第一个功能一播放及暂停。
播放和暂停视频
为了控制播放及暂停，我们需要在HTML文档中设计一个按钮以供用户单击：
〈inputtype=button
value="&mx2;Monclick="playPause(this);〉id="playButton"&mx2;代表一个黑色向右三角形符号，我们用它作为Play按钮。播放及暂停函数包含在p】ayPauseo中，作为响应每次点击的回调函数，并通过按键对象传递如下参数：
varplayPause=function(Ctrl){if(video.paused){video.play();Ctrl.value=String.fromCharCode('0x25AE'/0x25AE');else{video.pause();Ctrl.value=String.fromCharCode(,,);}；属性video.paused告诉我们视频是否处于播放中。若视频播放暂停，其值为true,反之则为false。这让开始及停止播放变得十分简单。video.start()及video.pauseo能够根据情况轮流将video.paused值设为false或true。
按键对象将参数传递给ctrl.value,以便根据当前播放状态将按钮变成Pause或Play样式。但若我们直接将其赋值为&mx2;,便无法得到预期效果，而只会看到字符串“&mx2;”以文本形式显示在按钮位置。在JavaScript中应通过String.fromCharCode()方法来获取正确的Unicode符号。使用UTF16十六进制代码&mx25AE;(用单引号隔开)做参数传入，就可以将Pause按钮的标签文本显示为两条黑色垂直矩形图案。
我们稍后还会提到playButtonID。
显示及设定播放位置
宁波网站建设认为为显示当前播放位置，我们用到了第3章中提到过的新输人类型range:
〈inputtype="range"
min=0max=lstep=lvalue=0onchange="updateProeress(this)*'id=McurrentPositionw〉
属性min及max设定了值的允许范围，step设定值的间隔——用户拖曳滑块的间隔单位。在这个示例中，min定义影片开始，max定义影片结束，这意味着我们必须将max的值设为电影总秒数。正确的方式是在initControlsO中定义这一切，相关的值应为video.duration。综上所述，我们在initControls()函数中添加如下几行：
curPos=document.getElementById(McurrentPositionM);curPos.max=video.duration;我们得到max值为5,这意味着这段视频长约lOmin。当滑块被拖曳或单击时，onchange事件句柄控制将调用updateProgress()函数并直接设定播放位置：
varupdateProgress=function(ctrl){video.currentTime=Ctrl.value;}；这段代码很简单：属性video.currentTime不仅反映着当前播放位置，它还能够被直接设定。我们通过滑块的属性值决定video.currentTime的值。为了将当前播放位置以“分：秒”(MM:SS)格式显示，我们还需要做以下几步：
在滑块中加入一个span元素：
〈spanid="timePlayed"〉〈/span〉
本文由乐华网络编辑，转载请注明出处
宁波网站建设www.leseo.net
