HTML5实现video标签的自定义播放进度条

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

html代码：

<!DOCTYPE html>
<html lang="en"head>
    meta charset="UTF-8"title>HTML5-Video-Player</style type="text/css">
        .videoPlayer{
            border: 1px solid #000;
            width 600px;
        }
        #video
            margin-top 0px
        #videoControls
        .show
            opacity 1
        .hide 0
        #progressWrap
            background-color black
            height 25px
            cursor pointer
        #playProgress red
            border-right 2px solid blue
        #showProgress: 
            font-weight 600
            font-size 20px
            line-height}
    stylebodydiv class="">
        h1>HTML5_Video_Player="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'="http://nettuts.s3.amazonaws.com/763_sammyJSIntro/trailer_test.ogg"='video/ogg'video="videoControls"> 
                ="progressWrap">  
                    ="playProgress">  
                        span ="showProgress">0span> 
                    div>
                    button ="playBtn" title="Play"> 播放 button="fullScreenBtn"="FullScreen Toggle">  全屏 > 
            > 
        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: (){
                    var that = this;
                    video.removeAttribute("controls");
                    bindEvent(video,"loadeddata",videoPlayer.initControls);
                    videoPlayer.operateControls();
                },initControls: (){
                    videoPlayer.showHideControls();
                },showHideControls: (){
                    bindEvent(video,"mouseover"(){
                    bindEvent(playBtn,"click" 原生的JavaScript事件绑定函数
             bindEvent(ele,eventName,func){
                if(window.addEventListener){
                    ele.addEventListener(eventName,func);
                }
                else{
                    ele.attachEvent('on' + eventName,func);
                }
            }
             显示video的控制面板
             showControls(){
                videoControls.style.opacity = 1;
            }
             隐藏video的控制面板
             hideControls(){
                 为了让控制面板一直出现，我把videoControls.style.opacity的值改为1
                videoControls.style.opacity = 1 控制video的播放
             play(){
                if ( video.paused || video.ended ){              
                     ( video.ended ){ 
                        video.currentTime = 0;
                        } 
                    video.play();
                    playBtn.innerHTML = "暂停"; 
                    progressFlag = setInterval(getProgress,60);
                } 
                { 
                    video.pause(); 
                    playBtn.innerHTML = "播放";
                    clearInterval(progressFlag);
                } 
            }
             控制video是否全屏，额这一部分没有实现好，以后有空我会接着研究一下
             fullScreen(){
                (fullScreenFlag){
                    videoContainer.webkitCancelFullScreen();
                }
                {
                    videoContainer.webkitRequestFullscreen();
                }
            }
             video的播放条
             getProgress(){
                var percent = video.currentTime / video.duration;
                playProgress.style.width = percent * (progressWrap.offsetWidth) - 2 + "px";
                showProgress.innerHTML = (percent * 100).toFixed(1) + "%" 鼠标在播放条上点击时进行捕获并进行处理
             videoSeek(e){
                if(video.paused || video.ended){
                    play();
                    enhanceVideoSeek(e);
                }
                {
                    enhanceVideoSeek(e);
                }

            }
             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,1)">);
            }

        }(this,document))

HTML5实现video标签的自定义播放进度条

相关文章