html中视频一个一个播放器,一个html5视频播放器(示例代码)

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

my videoPodcast

*{

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;

}

• 01.mp4
• 02.mp4

• 收藏视频
• 赞赏视频

+

var video = document.getElementsByTagName("video")[0];

var liS = document.getElementsByTagName("li");

for(var i=0;i

liS[i].οnclick=function(){

video.src=this.innerHTML;

for(var j=0;j

liS[j].style.background="lightgray";

}

this.style.background="darkgray";

}

}

video.οncanplay=function(){

console.log(video.duration);

}

video.οntimeupdate=function(){

console.log(video.currentTime);

}

var inp = document.getElementsByTagName("input")[0];

var mut = document.getElementsByTagName("input")[1];

var fullScreen=document.getElementsByTagName("input")[2];

inp.οnclick=function(){

if(inp.value=="暂停"){

video.pause();

inp.value="播放"

inp.style.background="lightgray";

}else{

video.play();

inp.value="暂停"

// video.webkitRequestFullScreen();

inp.style.background="darkgray";

}

}

mut.οnclick=function(){

if(mut.value=="静音"){

video.muted=true;

mut.value="音量"

mut.style.background="lightgray";

}else{

video.muted=false;

mut.value="静音"

mut.style.background="darkgray";

}

}

fullScreen.οnclick=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[i].οndrag=function(){

node=this;

}

}

target.οndragοver=function(e){

var event = e||window.event;

//阻止浏览器默认事件，drop才会发生

e.preventDefault();

}

target.οndrοp=function(){

target.children[0].appendChild(node);

}

//自定义右键菜单

var hidderMenu=document.getElementById("hiddenMenu");

target.οncοntextmenu=function(){

hidderMenu.style.display="block";

return false;

}

var box=document.getElementById("box");

box.οnclick=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.οnclick=function(){

var file = fileInp.files[0];

fr.readAsDataURL(file);

fr.onloadend=function(){

label.style.background = "url("+fr.result+") center no-repeat"

}

}

页面如下：

拖动条实现：

*{

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;

}

//获取相关元素

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.οncanplay=function(){

duration=video.duration;//绑定事件

control.οndragοver=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.οndrοp=function(){

video.play();

}

control.οnclick=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.οntimeupdate=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更新进度