HTML5脚本编程-媒体元素

自定义媒体播放器

<!DOCTYPE html>
<html>
<head>
</head>
<body>
    <div class="mediaplayer">
        <div class="video">
            <video id="player" src="16.3.3.mp4" width="300" height="200">
            </video>
            <!--src 属性指定 video 文件的本地路径(URL) 。-->
        </div>
        <div class="controls">
            <input type="button" value="play" id="video-btn">
            <span id="curtime">0</span>/<span id="duration">0</span>
        </div>
     </div>
     <script src="16.3.3.js"></script>
</body>
</html>


//取得元素的引用
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";
});

需要注意的地方：

<video>的src属性针对的是本地文件。
<video>的duration属性应该在视频开始播放后进行设置，否则值为NaN。
视频播放不应仅仅检测Pause和Play这两种状态，否则视频播放完毕后按钮显示为Pause，且点击后会进行再次播放。所以应该对<video>的ended事件单独安排，使得按钮显示为replay。且检测是否进行播放时也应更新为两种状态：paused/ended。

HTML5脚本编程-媒体元素

自定义媒体播放器

猜你喜欢