HTML5视频播放器实现-优快云博客

本文链接：https://blog.youkuaiyun.com/Honey_tianming/article/details/84594007
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        * {
            -webkit-user-select: none;
        }

        @font-face {
            font-family: 'iconfont';
            src: url('./font/iconfont.eot');
            src: url('./font/iconfont.eot?#iefix') format('embedded-opentype'),
            url('./font/iconfont.woff') format('woff'),
            url('./font/iconfont.ttf') format('truetype'),
            url('./font/iconfont.svg#iconfont') format('svg');
        }

        .iconfont {
            font-family: "iconfont" !important;
            font-size: 16px;
            font-style: normal;
            -webkit-font-smoothing: antialiased;
            -webkit-text-stroke-width: 0.2px;
            -moz-osx-font-smoothing: grayscale;
        }

        .main {
            width: 960px;
            height: 600px;
            background: #000;
            margin: 0 auto;
            margin-top: 50px;
            display: block;
            position: relative;
        }

        video {
            width: 100%;
            height: 100%;

        }

        .control {
            position: relative;
            bottom: 0px;
            z-index: 999;
            width: 100%;
            height: 60px;
            margin: 0 auto;
            background-color: #f2f2f2;
        }

        .play, .full {
            width: 60px;
            height: 60px;
            display: block;
            cursor: pointer;
            transition: all .3s;
        }

        .play:hover, .full:hover {
            transform: scale(1.2);
        }

        .play {
            float: left;
        }

        .full {
            float: right;
        }

        .control i {
            font-size: 30px;
            display: inline-block;
            margin: 15px;
        }

        .time {
            height: 60px;
            line-height: 60px;
            display: block;
            float: right;
            margin: 0 20px;
            font-family: 微软雅黑;
        }

        .jindu {
            height: 30px;
            margin: 15px 10px;
            background: #ddd;
            float: left;
            width: 630px;
            position: relative;
        }

        .j_current {
            width: 0%;
            height: 30px;
            background: #1e9fff;
        }

        .bar {
            width: 100%;
            height: 100%;
            opacity: 0;
            float: left;
            z-index: 999;
            cursor: pointer;
        }
    </style>
</head>
<body>
<div class="main" id="main">
    <video src="Rain.mkv" poster="timg.gif"></video>
    <div class="control">
        <div class="play"><i class="iconfont i-play">&#xe87c;</i></div>
        <div class="jindu">
            <div class="bar"></div>
            <div class="j_current"></div>
        </div>
        <div class="full"><i class="iconfont i-stop">&#xe878;</i></div>
        <div class="time">
            <span id="current">00:00:00</span>/<span id="duration">00:00:00</span>
        </div>
    </div>
</div>
<script src="http://www.jq22.com/jquery/jquery-3.3.1.js"></script>
<script>
    $(function () {
        var video = $('video')[0];
        video.oncanplay = function () {
            setTimeout(function () {
                video.poster = '';
            }, 2000)
        };
        /*播放*/
        $('.play').click(function () {

            if (video.paused) {
                video.play();
                $('.i-play').html("&#xe87a;");
            }
            else {
                video.pause();
                $('.i-play').html("&#xe87c;");
            }
        });
        /*全屏*/
        var fullScreen = function () {
            if (video.requestFullScreen) {
                video.requestFullScreen();
            }
            else if (video.webkitRequestFullScreen) {
                video.webkitRequestFullScreen();
            }
            else if (video.mozRequestFullScreen) {
                video.mozRequestFullScreen();
            }
            else if (video.msRequestFullScreen) {
                video.msRequestFullScreen();
            }
        };
        $('.full').click(function () {
            fullScreen();
        });
        video.ondblclick = function () {
            fullScreen();
        }
        /*播放时间*/
        var allTime = video.duration;
        var getTime = function (time) {
            var house = Math.floor(time / 3600);
            var minute = Math.floor(time % 3600 / 60);
            var second = Math.floor(time % 3600 % 60);
            house = house >= 10 ? house : "0" + house;
            minute = minute >= 10 ? minute : "0" + minute;
            second = second >= 10 ? second : "0" + second;
            return house + ":" + minute + ":" + second;
        };

        $("#duration").html(getTime(allTime));
        video.ontimeupdate = function () {
            var date = video.currentTime;
            var currentTime = getTime(date);
            $('#current').html(currentTime);
            var result = Math.floor(video.currentTime / video.duration * 100) + "%";
            $('.j_current').css('width', result);
        }
        /*播放结束*/
        video.onended = function () {
            $('.i-play').html("&#xe87c;");
        }
        /*跳播*/
        $(".bar").click(function (e) {
            var offsetX = e.offsetX;
            var jinduWidth = $('.jindu').width();
            var rate = Math.floor(offsetX / jinduWidth * 1000) / 1000;
            $('.j_current').css("width", rate + "%");
            video.currentTime = rate * video.duration;
        });
    });

</script>
</body>
</html>
自定义播放器
