原生JS写个简单播放器

最新推荐文章于 2024-04-21 17:20:27 发布

finedayforu

最新推荐文章于 2024-04-21 17:20:27 发布

阅读量299

点赞数

本文链接：https://blog.csdn.net/finedayforu/article/details/104154590

版权

这篇博客分享了一位作者下午闲暇时用原生JavaScript编写的简单音乐播放器，实现了播放、暂停、全屏及通过进度条调节播放位置的功能。作者还提供了自己绘制的素材和完整的源代码供读者参考。

摘要由CSDN通过智能技术生成

下午没事写的，主要是一些简单的播放功能；

1、播放、暂停

2、全屏

3、点进度条调节播放位置、

素材是自己画的

源码素材都在

https://pan.baidu.com/s/17BmMMg0AqNltGP3wEAbRbg

提取码：ll62

以下是源代码：

HTML部分：

        <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="myplayer.css">
    <script src="myplayer.js"></script>
</head>
<body>
    <div class="player">
            <video src="18.mp4" poster="2.png" id="video"></video>
            <div class="ctrl">
                <a href=javascript:; class="play" id="play"></a>
                <div id="prs">
                    <div id="long">
                        <div id="progress"></div>
                        <div id="playing"></div>
                        <a href="javascript:;" id="pctrl"></a>
                    </div>
                </div>
                <p class="tnow">0:00:00</p>
                <p>/</p>
                <p class="tlong">0:00:00</p>
                <a href=javascript:; class="full" id="full"></a>
            </div>
    </div>
</body>
</html>

JS部分：

        window.onload=function(){
    var playbtn=document.getElementById("play");
    var playfull=document.getElementById("full");
    var video=document.querySelector("#video")
    var playing=document.querySelector("#playing")
    var tnow=document.querySelector(".tnow");
    var prs=document.querySelector("#prs");
    var tlong=document.querySelector(".tlong");
    var pctrl=document.querySelector("#pctrl");
    var playflag=false;
    playbtn.onclick=function(){
        playflag=!playflag;
        if(playflag){
            playbtn.style.backgroundPosition="50%";
            video.play();
        }else{
            playbtn.style.backgroundPosition="-10%";
            video.pause();
        }
    }
    playfull.onclick=function(){
        if(video.requestFullscreen){
            video.requestFullscreen();
        }else{
            alert("您的浏览器落伍了，请更换Chrome或者firefox浏览器");
        } 
    }
    video.onended=function(){
        video.currentTime=0;
        playbtn.style.backgroundPosition="-10%";
        playflag=false;
        video.pause();
    }
    video.ontimeupdate=function(){
        var percent=(video.currentTime/video.duration)*100 ;
        playing.style.width=percent+"%";
        tlong.innerHTML=showtime(video.duration);
        tnow.innerHTML=showtime(video.currentTime);
    }
    pctrl.onclick=function(event){
        video.currentTime=(event.pageX-prs.offsetLeft)/prs.offsetWidth*video.duration;
    }
}
function showtime(time){
    var hour,min,sec;
    hour=parseInt(time/3600);
    min=parseInt(time%3600/60);
    sec=parseInt(time%60) ;
    return PrefixInteger(hour, 2)+":"+PrefixInteger(min, 2)+":"+PrefixInteger(sec, 2);
}
function PrefixInteger(num, length) {
    return (Array(length).join('0') + num).slice(-length);
   }

CSS部分：

        *{
    padding: 0;
    margin: 0;
}
body{
    background-color: blanchedalmond;
}
.player{
    width: 800px;
    background-color: #000;
    margin: 50px auto;
}
video{
    width: 100%;
    margin:0 0% ;
}
.ctrl{
    width: 100%;
    height: 36px;
}
.ctrl a{
    display:inline-block;
    width: 5%;
    height: 100%;
    
}
.play:link{
    float: left;
    background: url(play.png) no-repeat scroll;
    background-size: 250%;
    background-position: -10%;
}
.full:link{
    float:right;
    background: url(play.png) no-repeat scroll;
    background-size: 250%;
    background-position: 110%;
}
#prs{
    width: 70%;
    height: 100%;
    float: left;
    position: relative;
    
}
#long{
    width: 100%;
    height: 40%;
    background-color: #555;
    position: absolute;
    top:30%
}
#progress{
    width: 60%;
    height: 100%;
    background-color: #ccc;
}
#playing{
    width: 0;
    height: 100%;
    background-color: red;
    position: absolute;
    top: 0;
}
p{
    color: #ccc;
    float: left;
    position: relative;
    top: 20%;
    left: 3%;
}
#pctrl{
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 999;
}