html5视频播放器二（功能实现及播放优化）

样式改写css，其中的一些按钮是在“阿里妈妈”上找的字体图标，就不向上传了。

播放器样式Css

/* *CoolPlay视频播放器* 2016年8月1日 * */@font-face {font-family:'icomoon';src:url('fonts/icomoon.eot?63s28v');src:url('fonts/icomoon.eot?63s28v#iefix') format('embedded-opentype'), url('fonts/icomoon.ttf?63s28v') format('truetype'), url('fonts/icomoon.woff?63s28v') format('woff'), url('fonts/icomoon.svg?63s28v#icomoon') format('svg');font-weight:normal;font-style:normal;
}[class^="icon-"],
[class*=" icon-"] {/* use !important to prevent issues with browser extensions that change fonts */font-family:'icomoon' !important;speak:none;font-style:normal;font-weight:normal;font-variant:normal;text-transform:none;line-height:1;/* Better Font Rendering =========== */-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
}
/*一种旋转的策略*/
@-moz-keyframes spin{0% {-moz-transform:rotate(0deg)}100% {-moz-transform:rotate(359deg)}
}
@-webkit-keyframes spin{0% {-webkit-transform:rotate(0deg)}100% {-webkit-transform:rotate(359deg)}
}
@-o-keyframes spin{0% {-o-transform:rotate(0deg)}100% {-o-transform:rotate(359deg)}
}
@-ms-keyframes spin{0% {-ms-transform:rotate(0deg)}100% {-ms-transform:rotate(359deg)}
}
@keyframes spin{0% {transform:rotate(0deg)}100% {transform:rotate(359deg)}
}
.icon-c-loading:before {content:"\e983";
}
.icon-c-enlarge:before {content:"\e989";
}
.icon-c-shrink:before {content:"\e98a";
}
.icon-c-play:before {content:"\ea1c";
}
.icon-c-pause:before {content:"\ea1d";
}
.icon-c-previous:before {content:"\ea23";
}
.icon-c-next:before {content:"\ea24";
}
.icon-c-voice:before {content:"\ea27";
}
.icon-c-mute:before {content:"\ea2a";
}
.icon-c-refresh:before {content:"\ea2e";
}
* {margin:0;padding:0;
}
body {font-size:16px;font-family:"微软雅黑";
}/*播放器区域*/
.cool-play {width:100%;height:100%;position:relative;
}
.cool-play:-webkit-full-screen {width:100%;height:100%;
}
.cool-play .cool-title {width:100%;height:40px;background-color:rgba(130, 129, 129, 0.8);position:relative;line-height:40px;z-index:2;color:#ff6600;opacity:0;transition:opacity 0.8s;-webkit-transition:opacity 0.8s;-moz-transition:opacity 0.8s;-ms-transition:opacity 0.8s;
}
.cool-play .cool-title span {padding-left:20px;
}
.cool-play .cool-video .icon-c-loading {color:#FF6600;top:50%;left:50%;position:absolute;font-size:40px;margin-left:-20px;margin-top:-20px;-moz-animation:spin 2s infinite linear;-o-animation:spin 2s infinite linear;-webkit-animation:spin 2s infinite linear;animation:spin 2s infinite linear;display:none;
}
.cool-play .video {width:100%;height:100%;position:absolute;top:0;left:0;background-color:#000;
}/*播放器按钮*/
.cool-module {width:100%;background-color:rgba(130, 129, 129, 0.8);bottom:0px;left:0px;position:absolute;opacity:1;/*方便调试，先定义为1，正常情况为0*/color:#fff;transition:opacity 0.8s;-webkit-transition:opacity 0.8s;-moz-transition:opacity 0.8s;-ms-transition:opacity 0.8s;
}
.cool-module a {cursor:pointer;
}
.cool-btn {height:38px;
}
.cool-play:hover .cool-title {opacity:1;
}
.cool-play:hover .cool-module {opacity:1;
}
.cool-btn .btn a {font-size:24px;line-height:38px;padding-left:10px;padding-right:10px;display:inline-block;
}
.cool-btn .cool-btn-left {display:inline-block;padding-left:10px;float:left;
}
.cool-btn .cool-btn-center {display:inline-block;line-height:38px;float:left;font-size:12px;color:#FFFFFF;margin-left:20px;
}
.cool-btn .cool-btn-right {display:inline-block;float:right;padding-right:10px;
}
.cool-btn a:hover {color:#ff5500;
}/*进度条*/
.cool-module .cool-progress {width:100%;height:4px;background-color:#fff;display:block;position:relative;
}
.cool-module .cool-progress .cool-played {background-color:#ff6600;height:100%;width:0%;position:absolute;/*transition: width .3s;-webkit-transition: width .3s;-moz-transition: width .3s;-ms-transition: width .3s;*/
}
.cool-module .cool-progress .cool-drag {height:8px;width:8px;border-radius:100%;background-color:#fff;top:-2px;position:relative;margin-left:0%;position:absolute;display:none;
}
.voice{position:relative;
}
.voice:hover .c-voice{display:block;
}
.c-voice{position:absolute;width:40px;height:120px;background-color:rgba(130, 129, 129, 0.8);bottom:38px;left:0;display:none;
}
.c-voice-triangle{position:absolute;bottom:-6px;left:12px;width:0;height:0;border-left:8px solid transparent;border-right:8px solid transparent;border-top:6px solid rgba(130, 129, 129, 0.8);
}
.voice-bar{height:100px;width:2px;background-color:#000;position:absolute;left:50%;margin-left:-1px;bottom:10px;
}
.voice-bared{height:80px;width:2px;background-color:#f50;position:absolute;left:50%;margin-left:-1px;bottom:0;
}
.voice-dot{position:absolute;width:10px;height:10px;background-color:#fff;border-radius:100%;left:-4px;top:-5px;
}
.voice-mask{height:100px;width:20px;background-color:red;position:absolute;bottom:10px;left:50%;margin-left:-10px;opacity:0;
}

播放功能实现及优化js与html5视频播放器api调用

var myVideo = document.getElementById("video");//播放器
var coolPlay = document.getElementById("cool-play");
var cPlay = document.getElementById("c-play");//播放按钮
var cProgress = document.getElementById("c-progress");
var cPlayed = document.getElementById("c-played");//已经播放过的进度条
var cDrag = document.getElementById("c-drag");//进度条顶端的圆钮
var cCurrentTime = document.getElementById("c-currentTime");//当前时间span
var cTotalTime = document.getElementById("c-totalTime");//总时间
var loading = document.getElementsByClassName("icon-c-loading");//loading 旋转图标
var refresh = document.getElementsByClassName("icon-c-refresh");//重新加载按钮
var voice = document.getElementsByClassName("i-voice");//音量按钮
var voice_mask = document.getElementsByClassName("voice-mask");//音量总进度条
var voice_bared= document.getElementsByClassName("voice-bared");//现在的音量的进度条
var voice_dot = document.getElementsByClassName("voice-dot");
var voice_num = 0.8;//初始化当前的音量
volume(voice_num);//把音量初始化到80
function volume(n){myVideo.volume = n;voice_bared[0].style.height=n*100 + 'px';
}
function playPause() {if(myVideo.paused) {Play();} else {Pause();}
};
function Play(){cPlay.className = "icon-c-pause";myVideo.play();
}
function Pause(){cPlay.className = "icon-c-play";myVideo.pause();
}
refresh[0].onclick = function (){Load();
}
function Load(){Pause();myVideo.load();cPlayed.style.width = 0+"%";cDrag.style.display="none";cCurrentTime.innerHTML = "00:00";cTotalTime.innerHTML = "00:00";
}
//播放时间及进度条控制
myVideo.ontimeupdate = function(){  var currTime = this.currentTime,    //当前播放时间duration = this.duration;       // 视频总时长if(currTime == duration){Pause();}//百分比var pre = currTime / duration * 100 + "%";//显示进度条cPlayed.style.width = pre;var progressWidth = cProgress.offsetWidth;var leftWidth = progressWidth*(currTime / duration);if(leftWidth > 8 && (progressWidth - leftWidth) > 4){cDrag.style.display="block";    } else {cDrag.style.display="none";}  cDrag.style.left = progressWidth*(currTime / duration)-4 + "px";//显示当前播放进度时间cCurrentTime.innerHTML = getFormatTime(currTime,duration);cTotalTime.innerHTML = getFormatTime(duration,duration);
};
//当浏览器可在不因缓冲而停顿的情况下进行播放时
myVideo.oncanplaythrough = function() {loading[0].style.display="none";
}//当视频由于需要缓冲下一帧而停止
myVideo.onwaiting = function() {loading[0].style.display="block";
}
//当用户开始移动/跳跃到音频/视频中的新位置时
myVideo.onseeking = function() {if (myVideo.readyState == 0 || myVideo.readyState == 1) {loading[0].style.display="block";}
}
//拖拽进度条上的园钮实现跳跃播放
/*cDrag.onmousedown = function(e){ if(cPlay.className == 'icon-c-pause')myVideo.pause();loading[0].style.display="block";document.onmousemove = function(e){console.log("e.clientX:"+e.clientX);console.log("coolPlay.offsetLeft:"+coolPlay.offsetLeft);var leftV = e.clientX - coolPlay.offsetLeft;console.log("coolPlay.offsetLeft:"+coolPlay.offsetLeft);console.log("leftV:"+leftV);if(leftV <= 0){leftV = 0;}if(leftV >= coolPlay.offsetWidth){leftV = coolPlay.offsetWidth-10;}cDrag.style.left = leftV+"px";
//  console.log(leftV);}    document.onmouseup = function (){var scales = cDrag.offsetLeft/cProgress.offsetWidth;var du = myVideo.duration*scales;console.log("scales:"+scales);console.log("du:"+du);myVideo.currentTime = du;if(cPlay.className == 'icon-c-pause')myVideo.play();     document.onmousemove = null;document.onmousedown = null;}
}*/
//在进度条上点击跳跃播放
cProgress.onclick = function(e){var event = e || window.event;console.log("当前点击的位置为："+(event.offsetX / this.offsetWidth) * myVideo.duration);myVideo.currentTime = (event.offsetX / this.offsetWidth) * myVideo.duration;
};
//根据duration总长度返回 00 或 00:00 或 00:00:00 三种格式
function getFormatTime(time,duration) {var time = time || 0;         var h = parseInt(time/3600),m = parseInt(time%3600/60),s = parseInt(time%60);s = s < 10 ? "0"+s : s;if(duration>=60 && duration <3600){m = m < 10 ? "0"+m : m; return m+":"+s;}if (duration >=3600){m = m < 10 ? "0"+m : m; h = h < 10 ? "0"+h : h;return h+":"+m+":"+s;} return s;
}
//音量的控制部分
//点击声音按钮时，把视频静音
voice[0].onclick = function(){  if(myVideo.muted){voice[0].className="i-voice icon-c-voice";myVideo.muted=false;if(voice_num >= 0 && voice_num <= 1){volume(voice_num);} else {volume(0.8);}    } else {voice_num = myVideo.volume; //记录下来静音前的音量voice[0].className='i-voice icon-c-mute';myVideo.muted=true;volume(0);}
}
//当点击进度条上的一个位置时，变化音量
voice_mask[0].onclick = function(e){var event = e || window.event;  if(event.offsetY >= 100){voice[0].className='i-voice icon-c-mute';myVideo.muted=true;volume(0);return;}volume((100-event.offsetY)/100);
};
/*voice_mask[0].onmousedown = function(e){ document.onmousemove = function(e){console.log("e.clientY:"+e.clientY);console.log("e.offsetY:"+e.offsetY);console.log(e);console.log(voice[0].offsetTop);console.log(document.getElementsByClassName("voice")[0]);volume((100-e.offsetY)/100);if(event.offsetY == 100){voice[0].className='i-voice icon-c-mute';myVideo.muted=true;volume(0);}   }    document.onmouseup = function (){    document.onmousemove = null;document.onmousedown = null;}
}*/
//全屏的控制部分
var fullscreen = document.getElementById('cool-fullScreen');
var FullScreenTF = true;
function launchFullscreen(element) {//此方法不能在异步中进行，否则火狐中不能全屏操作if(element.requestFullscreen) {element.requestFullscreen();} else if(element.mozRequestFullScreen) {element.mozRequestFullScreen();} else if(element.msRequestFullscreen) {element.msRequestFullscreen();} else if(element.oRequestFullscreen) {element.oRequestFullscreen();} else if(element.webkitRequestFullscreen) {element.webkitRequestFullScreen();} else {alert("您的浏览器版本太低，不支持全屏功能！");}FullScreenTF = false;
};
//退出全屏
function exitFullscreen() {if(document.exitFullscreen) {document.exitFullscreen();} else if(document.msExitFullscreen) {document.msExitFullscreen();} else if(document.mozCancelFullScreen) {document.mozCancelFullScreen();} else if(document.oRequestFullscreen) {document.oCancelFullScreen();} else if(document.webkitExitFullscreen) {document.webkitExitFullscreen();} else {alert("您的浏览器版本太低，不支持全屏功能！");}FullScreenTF = true;
};
fullscreen.onclick = function() {       if(FullScreenTF) {launchFullscreen(coolPlay);fullscreen.className = "icon-c-shrink";         } else {exitFullscreen();fullscreen.className = "icon-c-enlarge";          }
};

播放器js及html5视频播放器Api调用

还有一些功能不够完善，请留言讨论。

源码地址：https://github.com/YaoZhiQi/coolPlay：

html5视频播放器二（功能实现及播放优化）相关推荐

Android 视频播放器 (二)：使用MediaPlayer播放视频
在 Android 视频播放器 (一):使用VideoView播放视频我们讲了一下如何使用VideoView播放视频,了解了基本的播放器的一些知识和内容.也知道VideoView内部封装的就是Med ...
html5播放器迅雷,搜狗浏览器HTML5视频播放器插件(HTML5.Video.Player)
一款搜狗浏览器的HTML5视频播放器插件,安装后可以使用HTML5方式播放优酷.土豆.爱奇艺.搜狐视频.迅雷离线.腾讯视频.56视频等网站的视频,避免使用adobe flash player插件,降低 ...
jqm视频播放器,html5视频播放器,html5音乐播放器,html5播放器,video开发demo,html5视频播放示例,html5手机视频播放器
最近在论坛中看到了很多实用html5开发视频播放,音乐播放的功能,大部分都在寻找答案.因此我就在这里做一个demo,供大家相互学习.html5开发越来越流行了,而对于视频这一块也是必不可少的一部分.如 ...
html选择本地文件视频并播放器,使HTML5视频播放器播放不同的文件(Make a HTML5 video player play a different file)...
使HTML5视频播放器播放不同的文件(Make a HTML5 video player play a different file) 在播放视频时,我无法让HTML5播放器播放不同的视频,我尝试更改 ...
html5支持4k视频播放器,哪个是最好的4K视频播放器？五个最佳播放软件（个人经验）...
哪个是最好的4K视频播放器? 4K视频使用什么播放器?这是每个人问得最多的问题. 4K老实决定与您分享播放4K视频的经验,并推荐几种常用的4K视频播放器. ▌播放软件: PowerDVD ▌推荐指数: ...
在线html5视频播放器,打造自己的html5视频播放器
推荐这篇文章: 前段时间重新学习了一下html5的video部分,以前只是停留在标签的使用上,这一次决定深入了解相关的API,并运用这些API打造一个简单的视频播放器.所谓"打造自己的&qu ...
html5视频播放器带ID跑马灯效果（视频防录屏）
通过接口配置获取观看者信息,将观看者信息随机显示于视频播放界面(可自定义位置.时间.时长.及颜色等),在不影响观看体验的同时,让视频具备指纹信息. ID跑马灯可快速追踪被盗视频出处,方便第一时间对录屏 ...
html五编写视屏_打造自己的html5视频播放器
前段时间重新学习了一下html5的video部分,以前只是停留在标签的使用上,这一次决定深入了解相关的API,并运用这些API打造一个简单的视频播放器.所谓"打造自己的",就是要自 ...
解决无法在哔哩哔哩（b站）上使用HTML5视频播放器脚本插件/油猴等插件失效的问题
文章目录 1.问题描述 2.解决方法 3.推荐使用视频插件简介特性附:[快捷键](https://github.com/xxxily/h5player#%E5%BF%AB%E6%8D%B7%E9 ...
在线html5视频播放器,分享10款最棒的免费HTML5视频播放器
最近Web圈子里最让人激动地莫过于HTML5了,特别是HTML5视频,使用HTML5视频标签可以帮助我们解决困扰我们很长时间的网站视频插入问题.HTML5可以在没有flash的情况下播放视频.现在有很 ...

html5视频播放器二（功能实现及播放优化）

html5视频播放器二（功能实现及播放优化）相关推荐

最新文章

热门文章

html5视频播放器 二 （功能实现及播放优化）

html5视频播放器 二 （功能实现及播放优化）相关推荐

最新文章

热门文章

html5视频播放器二（功能实现及播放优化）

html5视频播放器二（功能实现及播放优化）相关推荐