CoolPlay

├── css ├── fonts │ ├── icomoon.eot │ ├── icomoon.ttf │ ├── icomoon.woff │ └── icomoon.svg └── cool.css ├── README.md ├── index.html └── js ├── cool.js └── cool-h5.js /css/fonts/icomoon.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/YaoZhiQi/coolPlay/HEAD/css/fonts/icomoon.eot -------------------------------------------------------------------------------- /css/fonts/icomoon.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/YaoZhiQi/coolPlay/HEAD/css/fonts/icomoon.ttf -------------------------------------------------------------------------------- /css/fonts/icomoon.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/YaoZhiQi/coolPlay/HEAD/css/fonts/icomoon.woff -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # coolPlay 2 | html5视频播放器，html+css+JavaScript 构建简单好用 3 | # 播放器效果如下图所示： 4 | ![](https://static.oschina.net/uploads/img/201702/10114334_zQDB.png) 5 | # 代码中的视频文件，请替换成个人本地视频文件 6 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | CoolPlay 7 | 8 | 9 | 10 | 15 | 16 |

17 |

18 |

19 | 哈佛大学演讲 20 |

21 | 22 |

23 |

27 | 28 |

29 | 30 |

31 |

32 | 33 | 34 | 35 | 36 |

37 |

38 |

39 | 40 | 41 | 42 |

43 |

44 | 00:00 45 | / 46 | 00:00 47 |

48 |

49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 |

64 |

65 |

66 |

67 |

68 | 69 | 70 | 71 | -------------------------------------------------------------------------------- /js/cool.js: -------------------------------------------------------------------------------- 1 | var myVideo = document.getElementById("video");//播放器 2 | var coolPlay = document.getElementById("cool-play"); 3 | var cPlay = document.getElementById("c-play");//播放按钮 4 | var cProgress = document.getElementById("c-progress"); 5 | var cPlayed = document.getElementById("c-played");//已经播放过的进度条 6 | var cDrag = document.getElementById("c-drag");//进度条顶端的圆钮 7 | var cCurrentTime = document.getElementById("c-currentTime");//当前时间span 8 | var cTotalTime = document.getElementById("c-totalTime");//总时间 9 | var loading = document.getElementsByClassName("icon-c-loading");//loading 旋转图标 10 | var refresh = document.getElementsByClassName("icon-c-refresh");//重新加载按钮 11 | var voice = document.getElementsByClassName("i-voice");//音量按钮 12 | var voice_mask = document.getElementsByClassName("voice-mask");//音量总进度条 13 | var voice_bared= document.getElementsByClassName("voice-bared");//现在的音量的进度条 14 | var voice_dot = document.getElementsByClassName("voice-dot"); 15 | var voice_num = 0.8;//初始化当前的音量 16 | volume(voice_num);//把音量初始化到80 17 | function volume(n){ 18 | myVideo.volume = n; 19 | voice_bared[0].style.height=n*100 + 'px'; 20 | } 21 | function playPause() { 22 | if(myVideo.paused) { 23 | Play(); 24 | } else { 25 | Pause(); 26 | } 27 | }; 28 | function Play(){ 29 | cPlay.className = "icon-c-pause"; 30 | myVideo.play(); 31 | } 32 | function Pause(){ 33 | cPlay.className = "icon-c-play"; 34 | myVideo.pause(); 35 | } 36 | refresh[0].onclick = function (){ 37 | Load(); 38 | } 39 | function Load(){ 40 | Pause(); 41 | myVideo.load(); 42 | cPlayed.style.width = 0+"%"; 43 | cDrag.style.display="none"; 44 | cCurrentTime.innerHTML = "00:00"; 45 | cTotalTime.innerHTML = "00:00"; 46 | } 47 | //播放时间及进度条控制 48 | myVideo.ontimeupdate = function(){ 49 | var currTime = this.currentTime, //当前播放时间 50 | duration = this.duration; // 视频总时长 51 | if(currTime == duration){ 52 | Pause(); 53 | } 54 | //百分比 55 | var pre = currTime / duration * 100 + "%"; 56 | //显示进度条 57 | cPlayed.style.width = pre; 58 | var progressWidth = cProgress.offsetWidth; 59 | var leftWidth = progressWidth*(currTime / duration); 60 | if(leftWidth > 8 && (progressWidth - leftWidth) > 4){ 61 | cDrag.style.display="block"; 62 | } else { 63 | cDrag.style.display="none"; 64 | } 65 | cDrag.style.left = progressWidth*(currTime / duration)-4 + "px"; 66 | //显示当前播放进度时间 67 | cCurrentTime.innerHTML = getFormatTime(currTime,duration); 68 | cTotalTime.innerHTML = getFormatTime(duration,duration); 69 | }; 70 | //当浏览器可在不因缓冲而停顿的情况下进行播放时 71 | myVideo.oncanplaythrough = function() { 72 | loading[0].style.display="none"; 73 | } 74 | //当视频由于需要缓冲下一帧而停止 75 | myVideo.onwaiting = function() { 76 | loading[0].style.display="block"; 77 | } 78 | //当用户开始移动/跳跃到音频/视频中的新位置时 79 | myVideo.onseeking = function() { 80 | if (myVideo.readyState == 0 || myVideo.readyState == 1) { 81 | loading[0].style.display="block"; 82 | } 83 | } 84 | //拖拽进度条上的园钮实现跳跃播放 85 | /*cDrag.onmousedown = function(e){ 86 | if(cPlay.className == 'icon-c-pause') 87 | myVideo.pause(); 88 | loading[0].style.display="block"; 89 | document.onmousemove = function(e){ 90 | console.log("e.clientX:"+e.clientX); 91 | console.log("coolPlay.offsetLeft:"+coolPlay.offsetLeft); 92 | 93 | var leftV = e.clientX - coolPlay.offsetLeft; 94 | console.log("coolPlay.offsetLeft:"+coolPlay.offsetLeft); 95 | console.log("leftV:"+leftV); 96 | if(leftV <= 0){ 97 | leftV = 0; 98 | } 99 | if(leftV >= coolPlay.offsetWidth){ 100 | leftV = coolPlay.offsetWidth-10; 101 | } 102 | cDrag.style.left = leftV+"px"; 103 | // console.log(leftV); 104 | } 105 | document.onmouseup = function (){ 106 | var scales = cDrag.offsetLeft/cProgress.offsetWidth; 107 | var du = myVideo.duration*scales; 108 | console.log("scales:"+scales); 109 | console.log("du:"+du); 110 | myVideo.currentTime = du; 111 | if(cPlay.className == 'icon-c-pause') 112 | myVideo.play(); 113 | document.onmousemove = null; 114 | document.onmousedown = null; 115 | } 116 | }*/ 117 | //在进度条上点击跳跃播放 118 | cProgress.onclick = function(e){ 119 | var event = e || window.event; 120 | console.log("当前点击的位置为："+(event.offsetX / this.offsetWidth) * myVideo.duration); 121 | myVideo.currentTime = (event.offsetX / this.offsetWidth) * myVideo.duration; 122 | }; 123 | //根据duration总长度返回 00 或 00:00 或 00:00:00 三种格式 124 | function getFormatTime(time,duration) { 125 | var time = time || 0; 126 | 127 | var h = parseInt(time/3600), 128 | m = parseInt(time%3600/60), 129 | s = parseInt(time%60); 130 | s = s < 10 ? "0"+s : s; 131 | if(duration>=60 && duration <3600){ 132 | m = m < 10 ? "0"+m : m; 133 | return m+":"+s; 134 | } 135 | if (duration >=3600){ 136 | m = m < 10 ? "0"+m : m; 137 | h = h < 10 ? "0"+h : h; 138 | return h+":"+m+":"+s; 139 | } 140 | return s; 141 | } 142 | //音量的控制部分 143 | //点击声音按钮时，把视频静音 144 | voice[0].onclick = function(){ 145 | if(myVideo.muted){ 146 | voice[0].className="i-voice icon-c-voice"; 147 | myVideo.muted=false; 148 | if(voice_num >= 0 && voice_num <= 1){ 149 | volume(voice_num); 150 | } else { 151 | volume(0.8); 152 | } 153 | } else { 154 | voice_num = myVideo.volume; //记录下来静音前的音量 155 | voice[0].className='i-voice icon-c-mute'; 156 | myVideo.muted=true; 157 | volume(0); 158 | } 159 | } 160 | //当点击进度条上的一个位置时，变化音量 161 | voice_mask[0].onclick = function(e){ 162 | var event = e || window.event; 163 | if(event.offsetY >= 100){ 164 | voice[0].className='i-voice icon-c-mute'; 165 | myVideo.muted=true; 166 | volume(0); 167 | return; 168 | } 169 | volume((100-event.offsetY)/100); 170 | }; 171 | /*voice_mask[0].onmousedown = function(e){ 172 | document.onmousemove = function(e){ 173 | console.log("e.clientY:"+e.clientY); 174 | console.log("e.offsetY:"+e.offsetY); 175 | console.log(e); 176 | console.log(voice[0].offsetTop); 177 | console.log(document.getElementsByClassName("voice")[0]); 178 | volume((100-e.offsetY)/100); 179 | if(event.offsetY == 100){ 180 | voice[0].className='i-voice icon-c-mute'; 181 | myVideo.muted=true; 182 | volume(0); 183 | } 184 | } 185 | document.onmouseup = function (){ 186 | document.onmousemove = null; 187 | document.onmousedown = null; 188 | } 189 | }*/ 190 | //全屏的控制部分 191 | var fullscreen = document.getElementById('cool-fullScreen'); 192 | var FullScreenTF = true; 193 | function launchFullscreen(element) { 194 | //此方法不能在异步中进行，否则火狐中不能全屏操作 195 | if(element.requestFullscreen) { 196 | element.requestFullscreen(); 197 | } else if(element.mozRequestFullScreen) { 198 | element.mozRequestFullScreen(); 199 | } else if(element.msRequestFullscreen) { 200 | element.msRequestFullscreen(); 201 | } else if(element.oRequestFullscreen) { 202 | element.oRequestFullscreen(); 203 | } else if(element.webkitRequestFullscreen) { 204 | element.webkitRequestFullScreen(); 205 | } else { 206 | alert("您的浏览器版本太低，不支持全屏功能！"); 207 | } 208 | FullScreenTF = false; 209 | }; 210 | //退出全屏 211 | function exitFullscreen() { 212 | if(document.exitFullscreen) { 213 | document.exitFullscreen(); 214 | } else if(document.msExitFullscreen) { 215 | document.msExitFullscreen(); 216 | } else if(document.mozCancelFullScreen) { 217 | document.mozCancelFullScreen(); 218 | } else if(document.oRequestFullscreen) { 219 | document.oCancelFullScreen(); 220 | } else if(document.webkitExitFullscreen) { 221 | document.webkitExitFullscreen(); 222 | } else { 223 | alert("您的浏览器版本太低，不支持全屏功能！"); 224 | } 225 | FullScreenTF = true; 226 | }; 227 | fullscreen.onclick = function() { 228 | if(FullScreenTF) { 229 | launchFullscreen(coolPlay); 230 | fullscreen.className = "icon-c-shrink"; 231 | } else { 232 | exitFullscreen(); 233 | fullscreen.className = "icon-c-enlarge"; 234 | } 235 | }; 236 | -------------------------------------------------------------------------------- /js/cool-h5.js: -------------------------------------------------------------------------------- 1 | var myVideo = document.getElementById("video");//播放器 2 | var coolPlay = document.getElementById("cool-play"); 3 | var cPlay = document.getElementById("c-play");//播放按钮 4 | var cProgress = document.getElementById("c-progress"); 5 | var cPlayed = document.getElementById("c-played");//已经播放过的进度条 6 | var cDrag = document.getElementById("c-drag");//进度条顶端的圆钮 7 | var cCurrentTime = document.getElementById("c-currentTime");//当前时间span 8 | var cTotalTime = document.getElementById("c-totalTime");//总时间 9 | var loading = document.getElementsByClassName("icon-c-loading");//loading 旋转图标 10 | var refresh = document.getElementsByClassName("icon-c-refresh");//重新加载按钮 11 | var voice = document.getElementsByClassName("i-voice");//音量按钮 12 | var voice_mask = document.getElementsByClassName("voice-mask");//音量总进度条 13 | var voice_bared= document.getElementsByClassName("voice-bared");//现在的音量的进度条 14 | var voice_dot = document.getElementsByClassName("voice-dot"); 15 | var voice_num = 0.8;//初始化当前的音量 16 | volume(voice_num);//把音量初始化到80 17 | function volume(n){ 18 | myVideo.volume = n; 19 | voice_bared[0].style.height=n*100 + 'px'; 20 | } 21 | function playPause() { 22 | if(myVideo.paused) { 23 | Play(); 24 | } else { 25 | Pause(); 26 | } 27 | }; 28 | function Play(){ 29 | cPlay.className = "icon-c-pause"; 30 | myVideo.play(); 31 | } 32 | function Pause(){ 33 | cPlay.className = "icon-c-play"; 34 | myVideo.pause(); 35 | } 36 | refresh[0].onclick = function (){ 37 | Load(); 38 | } 39 | function Load(){ 40 | Pause(); 41 | myVideo.load(); 42 | cPlayed.style.width = 0+"%"; 43 | cDrag.style.display="none"; 44 | cCurrentTime.innerHTML = "00:00"; 45 | cTotalTime.innerHTML = "00:00"; 46 | } 47 | //播放时间及进度条控制 48 | myVideo.ontimeupdate = function(){ 49 | var currTime = this.currentTime, //当前播放时间 50 | duration = this.duration; // 视频总时长 51 | if(currTime == duration){ 52 | Pause(); 53 | } 54 | //百分比 55 | var pre = currTime / duration * 100 + "%"; 56 | //显示进度条 57 | cPlayed.style.width = pre; 58 | var progressWidth = cProgress.offsetWidth; 59 | var leftWidth = progressWidth*(currTime / duration); 60 | if(leftWidth > 8 && (progressWidth - leftWidth) > 4){ 61 | cDrag.style.display="block"; 62 | } else { 63 | cDrag.style.display="none"; 64 | } 65 | cDrag.style.left = progressWidth*(currTime / duration)-4 + "px"; 66 | //显示当前播放进度时间 67 | cCurrentTime.innerHTML = getFormatTime(currTime,duration); 68 | cTotalTime.innerHTML = getFormatTime(duration,duration); 69 | }; 70 | //当浏览器可在不因缓冲而停顿的情况下进行播放时 71 | myVideo.oncanplaythrough = function() { 72 | loading[0].style.display="none"; 73 | } 74 | //当视频由于需要缓冲下一帧而停止 75 | myVideo.onwaiting = function() { 76 | loading[0].style.display="block"; 77 | } 78 | //当用户开始移动/跳跃到音频/视频中的新位置时 79 | myVideo.onseeking = function() { 80 | if (myVideo.readyState == 0 || myVideo.readyState == 1) { 81 | loading[0].style.display="block"; 82 | } 83 | } 84 | //拖拽进度条上的园钮实现跳跃播放 85 | /*cDrag.onmousedown = function(e){ 86 | if(cPlay.className == 'icon-c-pause') 87 | myVideo.pause(); 88 | loading[0].style.display="block"; 89 | document.onmousemove = function(e){ 90 | console.log("e.clientX:"+e.clientX); 91 | console.log("coolPlay.offsetLeft:"+coolPlay.offsetLeft); 92 | 93 | var leftV = e.clientX - coolPlay.offsetLeft; 94 | console.log("coolPlay.offsetLeft:"+coolPlay.offsetLeft); 95 | console.log("leftV:"+leftV); 96 | if(leftV <= 0){ 97 | leftV = 0; 98 | } 99 | if(leftV >= coolPlay.offsetWidth){ 100 | leftV = coolPlay.offsetWidth-10; 101 | } 102 | cDrag.style.left = leftV+"px"; 103 | // console.log(leftV); 104 | } 105 | document.onmouseup = function (){ 106 | var scales = cDrag.offsetLeft/cProgress.offsetWidth; 107 | var du = myVideo.duration*scales; 108 | console.log("scales:"+scales); 109 | console.log("du:"+du); 110 | myVideo.currentTime = du; 111 | if(cPlay.className == 'icon-c-pause') 112 | myVideo.play(); 113 | document.onmousemove = null; 114 | document.onmousedown = null; 115 | } 116 | }*/ 117 | //在进度条上点击跳跃播放 118 | cProgress.onclick = function(e){ 119 | var event = e || window.event; 120 | console.log("当前点击的位置为："+(event.offsetX / this.offsetWidth) * myVideo.duration); 121 | myVideo.currentTime = (event.offsetX / this.offsetWidth) * myVideo.duration; 122 | }; 123 | //根据duration总长度返回 00 或 00:00 或 00:00:00 三种格式 124 | function getFormatTime(time,duration) { 125 | var time = time || 0; 126 | 127 | var h = parseInt(time/3600), 128 | m = parseInt(time%3600/60), 129 | s = parseInt(time%60); 130 | s = s < 10 ? "0"+s : s; 131 | if(duration>=60 && duration <3600){ 132 | m = m < 10 ? "0"+m : m; 133 | return m+":"+s; 134 | } 135 | if (duration >=3600){ 136 | m = m < 10 ? "0"+m : m; 137 | h = h < 10 ? "0"+h : h; 138 | return h+":"+m+":"+s; 139 | } 140 | return s; 141 | } 142 | //音量的控制部分 143 | //点击声音按钮时，把视频静音 144 | voice[0].onclick = function(){ 145 | if(myVideo.muted){ 146 | voice[0].className="i-voice icon-c-voice"; 147 | myVideo.muted=false; 148 | if(voice_num >= 0 && voice_num <= 1){ 149 | volume(voice_num); 150 | } else { 151 | volume(0.8); 152 | } 153 | } else { 154 | voice_num = myVideo.volume; //记录下来静音前的音量 155 | voice[0].className='i-voice icon-c-mute'; 156 | myVideo.muted=true; 157 | volume(0); 158 | } 159 | } 160 | //当点击进度条上的一个位置时，变化音量 161 | voice_mask[0].onclick = function(e){ 162 | var event = e || window.event; 163 | if(event.offsetY >= 100){ 164 | voice[0].className='i-voice icon-c-mute'; 165 | myVideo.muted=true; 166 | volume(0); 167 | return; 168 | } 169 | volume((100-event.offsetY)/100); 170 | }; 171 | /*voice_mask[0].onmousedown = function(e){ 172 | document.onmousemove = function(e){ 173 | console.log("e.clientY:"+e.clientY); 174 | console.log("e.offsetY:"+e.offsetY); 175 | console.log(e); 176 | console.log(voice[0].offsetTop); 177 | console.log(document.getElementsByClassName("voice")[0]); 178 | volume((100-e.offsetY)/100); 179 | if(event.offsetY == 100){ 180 | voice[0].className='i-voice icon-c-mute'; 181 | myVideo.muted=true; 182 | volume(0); 183 | } 184 | } 185 | document.onmouseup = function (){ 186 | document.onmousemove = null; 187 | document.onmousedown = null; 188 | } 189 | }*/ 190 | //全屏的控制部分 191 | var fullscreen = document.getElementById('cool-fullScreen'); 192 | var FullScreenTF = true; 193 | function launchFullscreen(element) { 194 | //此方法不能在异步中进行，否则火狐中不能全屏操作 195 | if(element.requestFullscreen) { 196 | element.requestFullscreen(); 197 | } else if(element.mozRequestFullScreen) { 198 | element.mozRequestFullScreen(); 199 | } else if(element.msRequestFullscreen) { 200 | element.msRequestFullscreen(); 201 | } else if(element.oRequestFullscreen) { 202 | element.oRequestFullscreen(); 203 | } else if(element.webkitRequestFullscreen) { 204 | element.webkitRequestFullScreen(); 205 | } else { 206 | alert("您的浏览器版本太低，不支持全屏功能！"); 207 | } 208 | FullScreenTF = false; 209 | }; 210 | //退出全屏 211 | function exitFullscreen() { 212 | if(document.exitFullscreen) { 213 | document.exitFullscreen(); 214 | } else if(document.msExitFullscreen) { 215 | document.msExitFullscreen(); 216 | } else if(document.mozCancelFullScreen) { 217 | document.mozCancelFullScreen(); 218 | } else if(document.oRequestFullscreen) { 219 | document.oCancelFullScreen(); 220 | } else if(document.webkitExitFullscreen) { 221 | document.webkitExitFullscreen(); 222 | } else { 223 | alert("您的浏览器版本太低，不支持全屏功能！"); 224 | } 225 | FullScreenTF = true; 226 | }; 227 | fullscreen.onclick = function() { 228 | if(FullScreenTF) { 229 | launchFullscreen(coolPlay); 230 | fullscreen.className = "icon-c-shrink"; 231 | } else { 232 | exitFullscreen(); 233 | fullscreen.className = "icon-c-enlarge"; 234 | } 235 | }; 236 | -------------------------------------------------------------------------------- /css/cool.css: -------------------------------------------------------------------------------- 1 | /* 2 | *CoolPlay视频播放器 3 | * 2016年8月1日 4 | * 627314658@qq.com 5 | * */ 6 | 7 | @font-face { 8 | font-family: 'icomoon'; 9 | src: url('fonts/icomoon.eot?63s28v'); 10 | 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'); 11 | font-weight: normal; 12 | font-style: normal; 13 | } 14 | 15 | [class^="icon-"], 16 | [class*=" icon-"] { 17 | /* use !important to prevent issues with browser extensions that change fonts */ 18 | font-family: 'icomoon' !important; 19 | speak: none; 20 | font-style: normal; 21 | font-weight: normal; 22 | font-variant: normal; 23 | text-transform: none; 24 | line-height: 1; 25 | /* Better Font Rendering =========== */ 26 | -webkit-font-smoothing: antialiased; 27 | -moz-osx-font-smoothing: grayscale; 28 | } 29 | /*一种旋转的策略*/ 30 | @-moz-keyframes spin { 31 | 0% { 32 | -moz-transform: rotate(0deg) 33 | } 34 | 35 | 100% { 36 | -moz-transform: rotate(359deg) 37 | } 38 | } 39 | @-webkit-keyframes spin { 40 | 0% { 41 | -webkit-transform: rotate(0deg) 42 | } 43 | 44 | 100% { 45 | -webkit-transform: rotate(359deg) 46 | } 47 | } 48 | @-o-keyframes spin { 49 | 0% { 50 | -o-transform: rotate(0deg) 51 | } 52 | 53 | 100% { 54 | -o-transform: rotate(359deg) 55 | } 56 | } 57 | @-ms-keyframes spin { 58 | 0% { 59 | -ms-transform: rotate(0deg) 60 | } 61 | 62 | 100% { 63 | -ms-transform: rotate(359deg) 64 | } 65 | } 66 | @keyframes spin { 67 | 0% { 68 | transform: rotate(0deg) 69 | } 70 | 71 | 100% { 72 | transform: rotate(359deg) 73 | } 74 | } 75 | .icon-c-loading:before { 76 | content: "\e983"; 77 | } 78 | .icon-c-enlarge:before { 79 | content: "\e989"; 80 | } 81 | .icon-c-shrink:before { 82 | content: "\e98a"; 83 | } 84 | .icon-c-play:before { 85 | content: "\ea1c"; 86 | } 87 | .icon-c-pause:before { 88 | content: "\ea1d"; 89 | } 90 | .icon-c-previous:before { 91 | content: "\ea23"; 92 | } 93 | .icon-c-next:before { 94 | content: "\ea24"; 95 | } 96 | .icon-c-voice:before { 97 | content: "\ea27"; 98 | } 99 | .icon-c-mute:before { 100 | content: "\ea2a"; 101 | } 102 | .icon-c-refresh:before { 103 | content: "\ea2e"; 104 | } 105 | // .icon-c-voice:before { 106 | // /*声音*/ 107 | 108 | // content: "\e900"; 109 | // } 110 | // .icon-c-mute:before { 111 | // /*静音*/ 112 | 113 | // content: "\e901"; 114 | // } 115 | // .icon-c-pause:before { 116 | // /*暂停*/ 117 | 118 | // content: "\e902"; 119 | // } 120 | // .icon-c-play:before { 121 | // /*播放*/ 122 | 123 | // content: "\e903"; 124 | // } 125 | // .icon-c-loading:before { 126 | // /*加载*/ 127 | 128 | // content: "\e97a"; 129 | // } 130 | // .icon-c-enlarge:before { 131 | // /*全屏*/ 132 | 133 | // content: "\e989"; 134 | // } 135 | // .icon-c-shrink:before { 136 | // /*缩小*/ 137 | 138 | // content: "\e98a"; 139 | // } 140 | // .icon-c-previous:before { 141 | // /*上一首*/ 142 | 143 | // content: "\ea21"; 144 | // } 145 | // .icon-c-next:before { 146 | // /*下一首*/ 147 | 148 | // content: "\ea22"; 149 | // } 150 | // .icon-c-refresh:before { 151 | // /*重新加载*/ 152 | 153 | // content: "\ea2e"; 154 | // } 155 | * { 156 | margin: 0; 157 | padding: 0; 158 | } 159 | body { 160 | font-size: 16px; 161 | font-family: "微软雅黑"; 162 | } 163 | 164 | /*播放器区域*/ 165 | .cool-play { 166 | width: 100%; 167 | height: 100%; 168 | position: relative; 169 | } 170 | .cool-play:-webkit-full-screen { 171 | width: 100%; 172 | height: 100%; 173 | } 174 | .cool-play .cool-title { 175 | width: 100%; 176 | height: 40px; 177 | background-color: rgba(130, 129, 129, 0.8); 178 | position: relative; 179 | line-height: 40px; 180 | z-index: 2; 181 | color: #ff6600; 182 | opacity: 0; 183 | transition: opacity 0.8s; 184 | -webkit-transition: opacity 0.8s; 185 | -moz-transition: opacity 0.8s; 186 | -ms-transition: opacity 0.8s; 187 | } 188 | .cool-play .cool-title span { 189 | padding-left: 20px; 190 | } 191 | .cool-play .cool-video .icon-c-loading { 192 | color: #FF6600; 193 | top: 50%; 194 | left: 50%; 195 | position: absolute; 196 | font-size: 40px; 197 | margin-left: -20px; 198 | margin-top: -20px; 199 | -moz-animation: spin 2s infinite linear; 200 | -o-animation: spin 2s infinite linear; 201 | -webkit-animation: spin 2s infinite linear; 202 | animation: spin 2s infinite linear; 203 | display: none; 204 | } 205 | .cool-play .video { 206 | width: 100%; 207 | height: 100%; 208 | position: absolute; 209 | top: 0; 210 | left: 0; 211 | background-color: #000; 212 | } 213 | 214 | /*播放器按钮*/ 215 | .cool-module { 216 | width: 100%; 217 | background-color: rgba(130, 129, 129, 0.8); 218 | bottom: 0px; 219 | left: 0px; 220 | position: absolute; 221 | opacity: 1; 222 | /*方便调试，先定义为1，正常情况为0*/ 223 | 224 | color: #fff; 225 | transition: opacity 0.8s; 226 | -webkit-transition: opacity 0.8s; 227 | -moz-transition: opacity 0.8s; 228 | -ms-transition: opacity 0.8s; 229 | } 230 | .cool-module a { 231 | cursor: pointer; 232 | } 233 | .cool-btn { 234 | height: 38px; 235 | } 236 | .cool-play:hover .cool-title { 237 | opacity: 1; 238 | } 239 | .cool-play:hover .cool-module { 240 | opacity: 1; 241 | } 242 | .cool-btn .btn a { 243 | font-size: 24px; 244 | line-height: 38px; 245 | padding-left: 10px; 246 | padding-right: 10px; 247 | display: inline-block; 248 | } 249 | .cool-btn .cool-btn-left { 250 | display: inline-block; 251 | padding-left: 10px; 252 | float: left; 253 | } 254 | .cool-btn .cool-btn-center { 255 | display: inline-block; 256 | line-height: 38px; 257 | float: left; 258 | font-size: 12px; 259 | color: #FFFFFF; 260 | margin-left: 20px; 261 | } 262 | .cool-btn .cool-btn-right { 263 | display: inline-block; 264 | float: right; 265 | padding-right: 10px; 266 | } 267 | .cool-btn a:hover { 268 | color: #ff5500; 269 | } 270 | 271 | /*进度条*/ 272 | .cool-module .cool-progress { 273 | width: 100%; 274 | height: 4px; 275 | background-color: #fff; 276 | display: block; 277 | position: relative; 278 | } 279 | .cool-module .cool-progress .cool-played { 280 | background-color: #ff6600; 281 | height: 100%; 282 | width: 0%; 283 | position: absolute; 284 | /*transition: width .3s; 285 | -webkit-transition: width .3s; 286 | -moz-transition: width .3s; 287 | -ms-transition: width .3s;*/ 288 | } 289 | .cool-module .cool-progress .cool-drag { 290 | height: 8px; 291 | width: 8px; 292 | border-radius: 100%; 293 | background-color: #fff; 294 | top: -2px; 295 | position: relative; 296 | margin-left: 0%; 297 | position: absolute; 298 | display: none; 299 | } 300 | .voice{ 301 | position: relative; 302 | } 303 | .voice:hover .c-voice{ 304 | display: block; 305 | } 306 | .c-voice{ 307 | position: absolute; 308 | width: 40px; 309 | height: 120px; 310 | background-color: rgba(130, 129, 129, 0.8); 311 | bottom: 38px; 312 | left: 0; 313 | display: none; 314 | } 315 | .c-voice-triangle{ 316 | position: absolute; 317 | bottom: -6px; 318 | left: 12px; 319 | width: 0; 320 | height: 0; 321 | border-left: 8px solid transparent; 322 | border-right: 8px solid transparent; 323 | border-top: 6px solid rgba(130, 129, 129, 0.8); 324 | } 325 | .voice-bar{ 326 | height: 100px; 327 | width: 2px; 328 | background-color: #000; 329 | position: absolute; 330 | left: 50%; 331 | margin-left: -1px; 332 | bottom: 10px; 333 | } 334 | .voice-bared{ 335 | height: 80px; 336 | width: 2px; 337 | background-color: #f50; 338 | position: absolute; 339 | left: 50%; 340 | margin-left: -1px; 341 | bottom: 0; 342 | } 343 | .voice-dot{ 344 | position: absolute; 345 | width: 10px; 346 | height: 10px; 347 | background-color: #fff; 348 | border-radius: 100%; 349 | left: -4px; 350 | top: -5px; 351 | } 352 | .voice-mask{ 353 | height: 100px; 354 | width: 20px; 355 | background-color: red; 356 | position: absolute; 357 | bottom: 10px; 358 | left: 50%; 359 | margin-left: -10px; 360 | opacity: 0; 361 | } -------------------------------------------------------------------------------- /css/fonts/icomoon.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | --------------------------------------------------------------------------------