HTML5和CSS3三自定義播放器

代碼下載地址

HTML 音頻/視頻參考手冊

UI說明

不贅述，直接看圖：

構建UI

如下構建標籤元素：

<h3 class="playerTitle">視頻播放器</h3>
<div class="player">
    <video src="mp3/1653902590493958.mp4"></video>
    <div class="controls">
        <a class="switch fa fa-play"></a>
        <a class="expand fa fa-expand"></a>
        <div class="progress">
            <div class="bar"></div>
            <div class="loaded"></div>
            <div class="elapse"></div>
        </div>
        <div class="time">
            <span class="currentTime">00:00:00</span>
            \
            <span class="totalTime">00:00:00</span>
        </div>
    </div>
</div>

css樣式

需要說明的是這裏使用了一套字體圖表樣式，具體移步。

基本樣式如下：

body {
    padding: 0px;   /*內邊距（上右下左），不允許使用賦值*/
    margin: 0px;   /*外邊距（上右下左），允許使用賦值*/
    font-family: 'microsoft yahei', 'Helvetica', simhei, simsun, SansSerif;
    background-color: #f7f7f7;
}

a {
    text-decoration: none;  /*添加到文本的修飾*/
}

.playerTitle {
    width: 100%;
    margin: 0 auto;
    line-height: 60px;
    font-size: 32px;
    text-align: center;
}

.player {
    width: 720px;
    height: 480px;
    margin: 0 auto;
    background: url("../mp3/699pic.gif") center no-repeat;
    background-size: cover;
    position: relative; /*規定應用於元素的定位方法：*/
}

video {
    height: 100%;
    margin: 0 auto;
    display: none;  /*規定是否/如何顯示元素*/
}

.controls {
    width: 720px;
    height: 40px;
    position: absolute;
    left: 0px;
    bottom: -40px;
    background-color: #000000;
}

.controls > .switch {
    width: 20px;
    height: 20px;
    display: block;
    font-size: 20px;
    color: #ffffff;
    position: absolute;
    left: 10px;
    top: 10px;
}

.controls > .expand {
    width: 20px;
    height: 20px;
    display: block;
    font-size: 20px;
    color: #ffffff;
    position: absolute;
    right: 10px;
    top: 10px;
}

.controls > .progress {
    width: 430px;
    height: 10px;
    position: absolute;
    left: 40px;
    bottom: 15px;
    background-color: #555555;
}

.controls > .progress > .bar {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 999;
    border-radius: 3px;
    opacity: 0;
    cursor: pointer;    /*光標類型*/
}

.controls > .progress > .loaded {
    width: 60%;
    height: 100%;
    background-color: #999999;
    border-radius: 3px;
    position: absolute;
    left: 0px;
    top: 0px;
    z-index: 2;
}

.controls > .progress > .elapse {
    width: 0%;
    height: 100%;
    background-color: #ffffff;
    border-radius: 3px;
    position: absolute;
    left: 0px;
    top: 0px;
    z-index: 3;
}

.controls > .time {
    height: 20px;
    position: absolute;
    left: 490px;
    top: 10px;
    color: #ffffff;
    font-size: 14px;
}

播放器功能實現

這裏要實現的功能有播放暫停、全屏、播放時間、進度條、跳播等。

這部分功能實現上使用了jquery，需要引入jquery，具體代碼如下：

<script>
    $(function () {
        /*獲取播放器*/
        var video = $("video")[0];

        /*實現播放與暫停*/
        $(".switch").click(function() {
            if (video.paused) {
                video.play();
            } else {
                video.pause();
            }
            /*設置標籤樣式*/
            $(this).toggleClass("fa-play fa-pause");
        });

        /*實現全屏*/
        $(".expand").click(function () {
            if (video.requestFullscreen) {
                video.requestFullscreen();
            } else if (video.webkitRequestFullscreen) {
                video.webkitRequestFullscreen();
            } else if (video.mozRequestFullscreen) {
                video.mozRequestFullscreen();
            } else if (video.msRequestFullscreen) {
                video.msRequestFullscreen();
            }
        });

        /*實現業務播放邏輯，當視頻可以播放時觸發*/
        video.oncanplay = function () {
            /*延遲1.5s，模擬加載時間*/
            setTimeout(function () {
                /*將視頻設置爲可見*/
                video.style.display = "block";

                /*視頻總時長*/
                var total = getTimeResult(video.duration);
                $(".totalTime").html(total);
            }, 1500);
        };

        /*獲取時間格式化後的結果*/
        function getTimeResult(time) {
            var hour = Math.floor(time/3600);
            hour = hour < 10 ? "0" + hour : hour;
            var minute = Math.floor(time%3600/60);
            minute = minute < 10 ? "0" + minute : minute;
            var second = Math.floor(time%60);
            second = second < 10 ? "0" + second : second;
            return hour + ":" + minute + ":" + second;
        }

        /*實現播放過程中的業務邏輯，當currentTime值改變時（視頻播放或者修改currentTime值）觸發*/
        video.ontimeupdate = function () {
            /*已播放時間*/
            var current = getTimeResult(video.currentTime);
            $(".currentTime").html(current);

            /*進度條*/
            var percent = video.currentTime/video.duration*100 + "%";
            $(".elapse").css("width", percent);
        }

        /*實現視頻跳播*/
        $(".bar").click(function (e) {
            /*點擊位置偏移比例*/
            var percent = e.offsetX/$(this).width();
            var current = video.duration*percent;
            video.currentTime = current;
        });

        /*播放完畢，重置播放狀態*/
        video.onended = function () {
            video.currentTime = 0;
            /*$(".switch").toggleClass("fa-play fa-pause");*/
            $(".switch").removeClass("fa-pause").addClass("fa-play");
        }
    });
</script>