你的位置:首页 > 网页设计

[网页设计]html5 实现video标签的自定义播放进度条


现在随着html5的渐热,越来越多的web开发者都开始选择使用html5写出一些比较好的web应用。

html代码:

<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <title>HTML5-Video-Player</title>  <style type="text/css">    .videoPlayer{      border: 1px solid #000;      width: 600px;    }    #video{      margin-top: 0px;    }    #videoControls{      width: 600px;      margin-top: 0px;    }    .show{      opacity: 1;    }    .hide{      opacity: 0;    }    #progressWrap{      background-color: black;      height: 25px;      cursor: pointer;    }    #playProgress{      background-color: red;      width: 0px;      height: 25px;      border-right: 2px solid blue;    }    #showProgress{      background-color: ;      font-weight: 600;      font-size: 20px;      line-height: 25px;    }  </style></head><body>  <div class="">    <h1>HTML5_Video_Player</h1>    <div class="videoPlayer" id="videoContainer">      <video id="video"       width="600" height="360"       preload controls      >        <source src="http://nettuts.s3.amazonaws.com/763_sammyJSIntro/trailer_test.mp4" type='video/mp4'>        <source src="http://nettuts.s3.amazonaws.com/763_sammyJSIntro/trailer_test.ogg" type='video/ogg'>      </video>      <div id="videoControls">         <div id="progressWrap">           <div id="playProgress">             <span id="showProgress">0</span>           </div>        </div>        <div>          <button id="playBtn" title="Play"> 播放 </button>           <button id="fullScreenBtn" title="FullScreen Toggle"> 全屏 </button>        </div>       </div>     </div>  </div></body></html>

 

js代码;

// 为了不随意的创建全局变量,我们将我们的代码放在一个自己调用自己的匿名函数中,这是一个好的编程习惯    (function(window, document){      // 获取要操作的元素      var video = document.getElementById("video");      var videoControls = document.getElementById("videoControls");      var videoContainer = document.getElementById("videoContainer");      var controls = document.getElementById("video_controls");      var playBtn = document.getElementById("playBtn");      var fullScreenBtn = document.getElementById("fullScreenBtn");      var progressWrap = document.getElementById("progressWrap");      var playProgress = document.getElementById("playProgress");      var fullScreenFlag = false;      var progressFlag;      // 创建我们的操作对象,我们的所有操作都在这个对象上。      var videoPlayer = {        init: function(){          var that = this;          video.removeAttribute("controls");          bindEvent(video, "loadeddata", videoPlayer.initControls);          videoPlayer.operateControls();        },        initControls: function(){          videoPlayer.showHideControls();        },        showHideControls: function(){          bindEvent(video, "mouseover", showControls);          bindEvent(videoControls, "mouseover", showControls);          bindEvent(video, "mouseout", hideControls);          bindEvent(videoControls, "mouseout", hideControls);        },        operateControls: function(){          bindEvent(playBtn, "click", play);          bindEvent(video, "click", play);          bindEvent(fullScreenBtn, "click", fullScreen);          bindEvent(progressWrap, "mousedown", videoSeek);        }      }      videoPlayer.init();      // 原生的JavaScript事件绑定函数      function bindEvent(ele, eventName, func){        if(window.addEventListener){          ele.addEventListener(eventName, func);        }        else{          ele.attachEvent('on' + eventName, func);        }      }      // 显示video的控制面板      function showControls(){        videoControls.style.opacity = 1;      }      // 隐藏video的控制面板      function hideControls(){        // 为了让控制面板一直出现,我把videoControls.style.opacity的值改为1        videoControls.style.opacity = 1;      }      // 控制video的播放      function play(){        if ( video.paused || video.ended ){                 if ( video.ended ){             video.currentTime = 0;            }           video.play();          playBtn.innerHTML = "暂停";           progressFlag = setInterval(getProgress, 60);        }         else{           video.pause();           playBtn.innerHTML = "播放";          clearInterval(progressFlag);        }       }      // 控制video是否全屏,额这一部分没有实现好,以后有空我会接着研究一下      function fullScreen(){        if(fullScreenFlag){          videoContainer.webkitCancelFullScreen();        }        else{          videoContainer.webkitRequestFullscreen();        }      }      // video的播放条      function getProgress(){        var percent = video.currentTime / video.duration;        playProgress.style.width = percent * (progressWrap.offsetWidth) - 2 + "px";        showProgress.innerHTML = (percent * 100).toFixed(1) + "%";      }      // 鼠标在播放条上点击时进行捕获并进行处理      function videoSeek(e){        if(video.paused || video.ended){          play();          enhanceVideoSeek(e);        }        else{          enhanceVideoSeek(e);        }      }      function enhanceVideoSeek(e){        clearInterval(progressFlag);        var length = e.pageX - progressWrap.offsetLeft;        var percent = length / progressWrap.offsetWidth;        playProgress.style.width = percent * (progressWrap.offsetWidth) - 2 + "px";        video.currentTime = percent * video.duration;        progressFlag = setInterval(getProgress, 60);      }    }(this, document))