重写HTML5视频播放器界面

最新推荐文章于 2024-05-25 00:15:00 发布

一只前端小白

最新推荐文章于 2024-05-25 00:15:00 发布

阅读量4.1k

点赞数 4

分类专栏：日志文章标签： html5

本文链接：https://blog.csdn.net/qq_38944959/article/details/88094196

版权

日志专栏收录该内容

51 篇文章 2 订阅

订阅专栏

理论基础：
熟知对HTML5视频的各种事件方法以及属性…
关于事件方法和属性没有太多可说的，关于字体图标库可以参考font-awesome，下面直接贴代码…?

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>视频播放</title>
    <!--字体图标库-->
    <link rel="stylesheet" href="css/font-awesome.css"/>
    <link rel="stylesheet" href="css/player.css"/>
</head>
<body>
    <!-- 多媒体标签 -->
    <figure>
        <!-- 多媒体说明标签 -->
        <figcaption>视频播放器</figcaption>
        <div class="player">
            <video src="./video/trailer.mp4"></video>
            <div class="controls">
                <!--播放/暂停-->
                <a href="javascript:;" class="switch fa fa-play"></a>
                <!--播放进度条-->
                <div class="progress">
                    <div class="line"></div>
                    <div class="bar"></div>
                </div>
                <!--当前播放时间/播放总时长-->
                <div class="timer">
                    <span class="current">00:00:00</span> / <span class="total">00:00:00</span>
                </div>
                <!--全屏/取消全屏-->
                <a href="javascript:;" class="expand fa fa-arrows-alt"></a>
            </div>
        </div>
    </figure>
    <script src="./js/jquery.min.js"></script>
    <script>
        var $video = $("video");
    //播放和暂停的按钮
    var $switch = $(".switch");
    //白色进度条
    var $line = $(".line");
    //灰色进度条
    var $bar = $(".bar");
    //当前播放时间
    var $current = $(".current");
    //总时间
    var $total = $(".total");
    //全屏
    var $expand = $(".expand");

    //封装转化为时分秒
    var formatTime = function (time) {
        //00：00：00
        var h = Math.floor(time / 3600);
        var m = Math.floor(time % 3600 / 60);
        var s = Math.floor(time % 60);
        return h + ":" + m + ":" + s;
    }

    $video[0].oncanplay = function () {
        $video.show();
        //显示总时长
        var time = formatTime($video[0].duration);
        $total.html(time);
    }
    $switch.click(function () {
        //判断是否有暂停的小图标
        if ($switch.hasClass("fa-play")) {
            $video[0].play();
            $switch.removeClass("fa-play").addClass("fa-pause");
        } else {
            $video[0].pause();
            $switch.removeClass("fa-pause").addClass("fa-play");
        }
    });
    //3、显示进度条  播放的位置改变时
    $video[0].ontimeupdate = function () {
        $current.html(formatTime($video[0].currentTime));
        // 计算进度条=当前播放的时间/总时间
        var rotio = $video[0].currentTime / $video[0].duration;
        //转为百分比
        var p = rotio * 100 + "%";
        $line.css("width", p);
    }
    //4、全屏
    $expand.click(function () {
        if($(this).hasClass("fa-arrows-alt")){
            $(".player")[0].webkitRequestFullScreen();
            $(this).removeClass("fa-arrows-alt").addClass("fa-compress");
        }else{
            //取消全屏
            document.webkitCancelFullScreen();
            $(this).removeClass("fa-compress").addClass("fa-arrows-alt");
        }
    });
    //5、跃进功能
    $bar.click(function (e) {
        // offsetX offsetY 是相对于当前元素的坐标
        var x=e.offsetX;
        var width=$(this).width();
        //计算播放时间=点击后的横坐标/width*总时长
        var time=x/width*$video[0].duration;
        $video[0].currentTime=time;
    });
    //播放完毕重置功能
    $video[0].onended=function () {
        this.currentTime=0;
        $switch.removeClass("fa-pause").addClass("fa-play");
    }
</script>
</body>
</html>

最终效果图?
在这里插入图片描述