【HTML5】脚本编程-媒体元素

自定义媒体播放器

    

        

            
            
        
        

            
            0/0
        
     
     




//取得元素的引用
var player=document.getElementById("player");
var btn=document.getElementById("video-btn");
var curtime=document.getElementById("curtime");
var duration=document.getElementById("duration");
//为按钮添加事件处理程序
var EventUtil={
    addHandler:function(element,type,handler){
      if(element.addEventListener){
         element.addEventListener(type,handler,false);
      }else if(element.attachEvent){
         element.attachEvent("on"+type,handler);
      }else{
          element["on"+type]=handler;
      }
    },
    getEvent:function(event){
        return event?event:window.event;
    },
    preventDefault:function(event){
        if(event.preventDefault){
           event.preventDefault();//没有返回值，直接调用
        }else{
            event.returnValue=false;
        }
    },
    getTarget:function(event){
        return event.target||event.srcElement;//触发event事件的元素
    }
};
EventUtil.addHandler(player,"play",function(event){
    //更新播放时间
    duration.innerHTML=player.duration;//video控件的duration属性
    //定时更新当前时间
    setInterval(function(){
        curtime.innerHTML=player.currentTime;//video控件currentTime属性
    },250);
});
EventUtil.addHandler(btn,"click",function(event){
      
      if(player.paused||player.ended){
        player.play();//video控件play()方法
        btn.value="Pause";
      }else{
          player.pause();//video控件pause()方法
          btn.value="Play";
      }
});
EventUtil.addHandler(player,"ended",function(event){
    btn.value="replay";
});

 

需要注意的地方：

3. 视频播放不应仅仅检测Pause和Play这两种状态，否则视频播放完毕后按钮显示为Pause，且点击后会进行再次播放。所以应该对