html5之自定义视频播放器

2018/03/06 15:54
阅读数 12

 

效果图如下:

 

 

 代码示例如下:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" type="text/css" href="css/font-awesome.min.css">
    <style type="text/css">
    *{
        margin: 0;
        padding: 0;
    }
    figcaption{
        text-align: center;
        font-size: 25px;
        font-family: "微软雅黑";
        line-height: 150px;
    }
    .player{
        width: 720px;
        height: 360px;
        border:1px solid #000;
        margin: 100px auto;
        background-color: pink;
        text-align: center;
        background: url(images/loading.gif);
        position: relative;
    }
    .player video{
        height: 100%;
        margin: 0 auto;
        display: block;
    }
    .controls{
        width: 700px;
        height: 40px;
        background-color: rgba(255,255,0,0.3);
        position: absolute;
        bottom: 10px;
        left: 10px;
    }
    .controls .switch{
        width: 20px;
        height: 20px;
        position: absolute;
        left: 10px;
        bottom: 10px;
        text-align: center;
        line-height: 20px;
        color: yellow;
    }
    .controls .progress{
        width: 435px;
        height: 10px;
        background-color: rgba(255,255,255,0.4);
        position: absolute;
        left: 40px;
        bottom:15px;
        border-radius: 5px;
        overflow: hidden;
    }
    .curr-progress{
        width: 30%;
        height: 10px;
        background-color: #fff;
        border-radius: 5px;
    }
    .time{
        width: 120px;
        height: 20px;
        position: absolute;
        left: 490px;
        bottom: 10px;
        font-size: 12px;
        line-height: 20px;
        text-align: center;
    }
    .extend{
        width: 20px;
        height: 20px;
        position: absolute;
        right: 20px;
        bottom: 10px;
        text-align: center;
        line-height: 20px;
        color: yellow;
    }
    </style>
</head>
<body>
    <figure>
        <figcaption>视频案例</figcaption>
        <div class="player">
            <video src="video/fun.mp4"></video>
        <!-- 控制条 -->
        <div class="controls">
            <!-- 播放暂停按钮 -->
            <a href="#" class="switch icon-play"></a>
            <!-- 进度条 -->
            <div class="progress">
                <!-- 当前进度 -->
                <div class="curr-progress"></div>
            </div>
            <!-- 时间 -->
            <div class="time">
                <span class="curr-time">00:00:00</span>/
                <span class="total-time">00:00:00</span>
            </div>
            <!-- 全屏 -->
            <div class="extend icon-resize-full"></div>
        </div>
        </div>
    </figure>
    <script type="text/javascript">
            // 思路:
    // 1.点击按钮,实现播放暂停并且切换图标
    // 2.算出视频的总时长显示出来
    // 3.当视频播放的时候,进度条同步,当前时间同步
    // 4.点击实现全屏
    

    //获取所需图标
    var video = document.querySelector('video');
    //播放按钮
    var playBtn = document.querySelector('.switch');
    //当前进度条
    var currProgress = document.querySelector('.curr-progress');
    //当前时间
    var currTime = document.querySelector('.curr-time');
    //总时间
    var totalTime = document.querySelector('.total-time');
    //总屏
    var extend = document.querySelector('.extend');

    //1.点击按钮,实现播放暂停并且切换图标
    playBtn.onclick = function(){
        //判断是否处于播放状态,是,就暂停,更换成暂停的图片
        if (video.paused) {
            video.play();
            this.classList.remove('icon-play');
            this.classList.add('icon-pause');
        }else{
            video.pause();
            this.classList.remove('icon-pause');
            this.classList.add('icon-play');
        }
    }
    // 2.算出视频的总时长显示出来
    video.oncanplay = function(){
        //计算出视频的总时长
        var tTime = video.duration;
        //转换时长
        var h = Math.floor(tTime/3600);
        var m = Math.floor(tTime%3600/60);
        var s = Math.floor(tTime%60);
        //转换格式
        h = h>10?h:"0"+h;
        m = m>10?m:"0"+m;
        s = s>10?s:"0"+s;
        //在页面上显示
        totalTime.innerHTML = h+":"+m+":"+s;
    }
    // 3.当视频播放的时候,进度条同步,当前时间同步
    video.ontimeupdate = function(){
        //获取当前时间
        var cTime = video.currentTime;
        //计算出视频的总时长
        var tTime = video.duration;
        //转换时长
        var h = Math.floor(cTime/3600);
        var m = Math.floor(cTime%3600/60);
        var s = Math.floor(cTime%60);
        //转换格式
        h = h>10?h:"0"+h;
        m = m>10?m:"0"+m;
        s = s>10?s:"0"+s;
        //在页面上显示
        currTime.innerHTML = h+":"+m+":"+s;
        //进度条同步 当前时间/总时间
        var value = cTime/tTime;
        currProgress.style.width = value*100+"%";
        //当播放完毕之后,播放暂停按钮要转换成暂停按钮
        if (cTime===tTime) {
            playBtn.classList.remove('icon-play');
            playBtn.classList.add('icon-pause');
        }
        
    }
    // 点击按钮全屏
    extend.onclick = function(){
        video.webkitRequestFullScreen();
    }
    </script>
</body>
</html>

 

展开阅读全文
打赏
0
0 收藏
分享
加载中
更多评论
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部