一个html5视频播放器

具有播放视频，拖拽，自定义右键菜单，上传头像的功能

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>my videoPodcast</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#box{
width: 1000px;
height: 100%;

}
#wrap{
width: 700px;
height: 900px;
margin: 0 auto;

}
ul{
list-style: none;
float: left;
clear: both;
margin-top: 4px;
}
li{
width: 150px;
height: 40px;
line-height: 40px;
font:24px/40px "微软雅黑";
cursor:pointer;
background:lightgray;
margin-top: 1px;
}
input{
display: block;
height: 40px;
width: 40px;
border-radius: 5px;
border: none;
background: darkgray;
color: #FFFFFF;
float: left;
margin-left: 2px;
}
#target{
width: 180px;
height: 100px;
border: 1px solid darkgray;
float: right;
}
#hiddenMenu{
float: right;
display: none;

}

#picContainer{
/*float: left;*/
position: absolute;
left: 330px;
top: 410px;
}
label{
display: block;
width: 180px;
height: 180px;
border-radius: 10px;
border:1px solid darkgray;
font:50px/180px "微软雅黑";
text-align: center;
/*background: url("1.jpg") center no-repeat;*/
}
input[type="file"]{
display:none;
}

</style>
</head>
<body>
<div id="box">
<div id="wrap">

<video autoplay="false" height="400px" controls="controls">
<source src="01.mp4"/>
<source src="01.ogg"/>
</video>

<input type="button" value="暂停" />
<input type="button" value="静音" />
<input type="button" value="全屏" />

<ul id="from">
<li draggable="true">01.mp4</li>
<li draggable="true">02.mp4</li>
</ul>

<div id="target">
<ul id="to">

</ul>
</div>



<div id="hiddenMenu">
<ul>
<li>收藏视频</li>
<li>赞赏视频</li>

</ul>
</div>



<form id="picContainer">
<label for="photo">+</label>
<input type="file" id="photo"/>
<input type="button" value="提交" / id="submit">
</form>

</div>
</div>

<script type="text/javascript">
var video = document.getElementsByTagName("video")[0];
var liS = document.getElementsByTagName("li");
for(var i=0;i<liS.length;i++){

liS[i].onclick=function(){
video.src=this.innerHTML;
for(var j=0;j<liS.length;j++){
liS[j].style.background="lightgray";
}
this.style.background="darkgray";
}

}
video.oncanplay=function(){
console.log(video.duration);

}
video.ontimeupdate=function(){
console.log(video.currentTime);

}
var inp = document.getElementsByTagName("input")[0];
var mut = document.getElementsByTagName("input")[1];
var fullScreen=document.getElementsByTagName("input")[2];

inp.onclick=function(){
if(inp.value=="暂停"){
video.pause();
inp.value="播放"

inp.style.background="lightgray";

}else{
video.play();
inp.value="暂停"
// video.webkitRequestFullScreen();
inp.style.background="darkgray";
}

}
mut.onclick=function(){
if(mut.value=="静音"){
video.muted=true;
mut.value="音量"
mut.style.background="lightgray";

}else{
video.muted=false;
mut.value="静音"
mut.style.background="darkgray";

}
}
fullScreen.onclick=function(){
video.webkitRequestFullScreen();
}
//拖动功能
var target=document.getElementById("target");
var ul=document.getElementById("from");
var liS=ul.children;
var node=null;

for(var i=0;i<liS.length;i++){
liS[i].ondrag=function(){
node=this;
}
}

target.ondragover=function(e){
var event = e||window.event;
//阻止浏览器默认事件，drop才会发生
e.preventDefault();
}
target.ondrop=function(){
target.children[0].appendChild(node);
}

//自定义右键菜单
var hidderMenu=document.getElementById("hiddenMenu");

target.oncontextmenu=function(){
hidderMenu.style.display="block";

return false;
}
var box=document.getElementById("box");
box.onclick=function(){
hidderMenu.style.display="none";
}

//上传图片并显示
var fr = new FileReader();
var label = document.getElementsByTagName("label")[0]
var sub = document.getElementById("submit");
var fileInp = document.getElementById("photo");
sub.onclick=function(){
var file = fileInp.files[0];
fr.readAsDataURL(file);
fr.onloadend=function(){
label.style.background = "url("+fr.result+") center no-repeat"
}
}

</script>
</body>
</html>

页面如下：

拖动条实现：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
                box-sizing: border-box;
            }
            div.box{
                width: 500px;
                margin:60px auto;
            }
            video{
                width: 500px;
                margin-bottom:5px;
                display: block;
            }
            div.control{
                width: 500px;
                height: 10px;
                background:#ccc;
                position: relative;
            }
            div.progress{
                width: 0;
                height: 10px;
                background: orange;
                border-radius: 5px;
            }
            div.pointer{
                width: 20px;
                height: 16px;
                border-radius: 5px;
                position: absolute;
                top:-3px;
                background:darkgray;
            }
        </style>
    </head>
    <body>
    <div class="box">
        <video src="01.mp4">
            
        </video>
        <div class="control">
            <div class="progress"></div>
            <div class="pointer" draggable=true></div>
        </div>
    </div>
    <script type="text/javascript">
            //获取相关元素
            var video = document.querySelector("video");
            var control = document.querySelector(".control");
            var progress = document.querySelector(".progress");
            var pointer = document.querySelector(".pointer");
            //获取相关距离
            var totalWidth= control.offsetWidth-pointer.offsetWidth;
            var currentTime = 0;
            var duration = 0;
            var x=0;
            var percent=0;
            //视频是否能够播放
            video.oncanplay=function(){
                duration = video.duration;
                //绑定事件
                control.ondragover=function(e){
                    var e= e||window.event;
                    e.preventDefault();
                    x = e.clientX - control.offsetLeft;
                    percent = x/totalWidth;
                    if(percent>1){
                        return;
                    }
                    pointer.style.left = x+"px";
                    progress.style.width = x+"px";
                    video.currentTime = duration*percent;
                }
                control.ondrop=function(){
                    video.play();
                }
                control.onclick=function(e){
                    var e = e||window.event;
                    x = e.clientX - control.offsetLeft;
                    if(x>totalWidth){
                        x = totalWidth;
                    }
                    pointer.style.left = x+"px";
                    progress.style.width = x+"px";
                    percent = x/totalWidth;
                    video.currentTime = duration*percent;
                    video.play();
                }
            }
            //视频播放时，更新进度
            video.ontimeupdate=function(){
                currentTime = video.currentTime;
                percent = currentTime/duration;
                if(percent>1){
                    return;
                }
                x = percent*totalWidth;
                pointer.style.left = x+"px";
                progress.style.width = x+"px";
            }
            //点击进度control更新进度


    </script>
    </body>
</html>

发表于 2017-01-10 20:39 梦见一只羊阅读(284) 评论(0) 编辑收藏举报

公告