Проблема с версткой видеоплеера HTML5

264
25 марта 2017, 01:01

Здравствуйте! Верстаю себе видео плеер на сайт:

Видом доволен, функционалом в принципе доволен, но есть нюансы. И тут у меня сразу 2 вопроса:

1) Если вы попробуете заглушить звук, то все сработает, но работает это очень "топорно", т.е. когда выключаешь звук кнопкой Mute, то он становится на позицию 0(0%) а когда нажимаешь то обратно тумблер на позиции 1(100%), то есть если у тебя был звук на позиции 0.6(60%) например, то когда ты его заглушишь, а потом опять включишь он будет уже на позиции 1 а не 0.6.

2) В скрипте не работает функция выхода из полноэкранного режима. Вроде все правильно написал, но скрипт не срабатывает.

Спасибо заранее за любую помощь.

Вот скрипты: 

var vid, playPauseButton, seekSlider, currentTime, vidDuration, muteButton, volumeSlider, fullScreenToggler, loop, fullscreenHider; 
 
function intializePlayer(){ 
"use strict";  
// Set object references	 
vid = document.getElementById("vid"); 
playPauseButton = document.getElementById("playPauseButton"); 
seekSlider = document.getElementById("seekSlider"); 
currentTime = document.getElementById("done"); 
vidDuration = document.getElementById("duration"); 
muteButton = document.getElementById("muteUnmute"); 
volumeSlider = document.getElementById("volumeSlider"); 
fullScreenToggler = document.getElementById("toggleFullScreen"); 
loop = document.getElementById("loop"); 
fullscreenHider = document.getElementById("exitFullScreen"); 
// Add event listeners 
playPauseButton.addEventListener("click",playPauseVideo,false); 
seekSlider.addEventListener("input",timeSlider,false); 
vid.addEventListener("timeupdate",videoTimeUpdate,false); 
muteButton.addEventListener("click",muteUnmute,false); 
volumeSlider.addEventListener("input",volumeChange,false); 
volumeSlider.addEventListener("input",toggleIcon,false); 
fullScreenToggler.addEventListener("click",enterFullScreen,false); 
fullscreenHider.addEventListener("click",exitFullScreen,false);	 
loop.addEventListener("click",loopVideo,false);	 
} 
 
window.onload = intializePlayer; 
function playPauseVideo(){ 
"use strict"; 
	if(vid.paused){ 
		vid.play(); 
		playPauseButton.innerHTML = '<i class="fa fa-pause" aria-hidden="true" style="color: #15C936; font-size:1.7em; margin-top: 5px"></i>';} 
	else { 
		vid.pause(); 
		playPauseButton.innerHTML = '<i class="fa fa-play" aria-hidden="true" style="color: #15C936; font-size:1.7em; margin-top: 5px"></i>';} 
} 
function timeSlider(){ 
"use strict"; 
	var slideTo = vid.duration * (seekSlider.value / 100); 
	vid.currentTime = slideTo; 
} 
function videoTimeUpdate(){ 
"use strict"; 
	var timeInterval = vid.currentTime * (100 / vid.duration); 
	seekSlider.value = timeInterval; 
	var currentMinutes = Math.floor(vid.currentTime / 60); 
	var currentSeconds = Math.floor(vid.currentTime - currentMinutes * 60); 
	var durationMinutes = Math.floor(vid.duration / 60); 
	var durationSeconds = Math.floor(vid.duration - durationMinutes * 60); 
	if(currentSeconds < 10) {currentSeconds = "0"+ currentSeconds;} 
	if(durationSeconds < 10) {durationSeconds = "0"+ durationSeconds;} 
	if(currentMinutes < 10) {currentMinutes = "0"+ currentMinutes;} 
	if(durationMinutes < 10) {durationMinutes = "0"+ durationMinutes;} 
    currentTime.innerHTML = currentMinutes + ":" + currentSeconds + " " + "/"; 
	vidDuration.innerHTML = durationMinutes + ":" + durationSeconds; 
} 
function volumeChange(){ 
"use strict"; 
	vid.volume = volumeSlider.value / 100; 
} 
function enterFullScreen(){ 
"use strict"; 
	if(vid.requestFullScreen){ 
		vid.requestFullScreen();} 
	else if(vid.webkitRequestFullScreen){ 
		vid.webkitRequestFullScreen();} 
	else if(vid.mozRequestFullScreen){ 
		vid.mozRequestFullScreen();} 
	else if(vid.oRequestFullScreen){ 
		vid.oRequestFullScreen();} 
	else if(vid.msRequestFullScreen){ 
		vid.msRequestFullScreen();} 
	document.getElementsByClassName("videoControls")[0].classList.add("fullscreen");	 
    fullScreenToggler.style.display = "none"; 
	fullscreenHider.style.display = "inline-block"; 
	} 
function exitFullScreen(){ 
"use strict";	 
	if(vid.cancelFullScreen){ 
		vid.cancelFullScreen();} 
	else if(vid.webkitCancelFullScreen){ 
		vid.webkitCancelFullScreen();} 
	else if(vid.mozCancelFullScreen){ 
		vid.mozCancelFullScreen();} 
	else if(vid.oCancelFullScreen){ 
		vid.oCancelFullScreen();} 
	else if(vid.msCancelFullScreenn){ 
		vid.msCancelFullScreen();} 
    document.getElementsByClassName("videoControls")[0].classList.remove("fullscreen");	 
    fullscreenHider.style.display = "none"; 
	fullScreenToggler.style.display = "inline-block";	 
} 
function loopVideo(){ 
"use strict";  
	if(!loop.hasAttribute("style")){ 
		loop.setAttribute("style","opacity: 1; color: rgba(22,206,170,1.00);"); 
		vid.setAttribute("loop","");   
	} 
	else { 
		loop.removeAttribute("style"); 
		vid.removeAttribute("loop"); 
	} 
} 
function toggleIcon(){ 
"use strict";	 
if(vid.volume <= 0.01){ 
		muteButton.innerHTML = '<i class="fa fa-volume-off" aria-hidden="true" style="font-size: 2.4em; color: #C57A0C; margin-top: 5px;"></i>';} 
else if(vid.volume <= 0.42){ 
	muteButton.innerHTML = '<i class="fa fa-volume-down" aria-hidden="true" style="font-size: 2.4em; color: #C57A0C; margin-top: 5px;"></i>';}	 
else { 
	muteButton.innerHTML = '<i class="fa fa-volume-up" aria-hidden="true" style="font-size: 2.4em; color: #C57A0C; margin-top: 5px;"></i>'; 
} 
} 
function muteUnmute(){ 
"use strict"; 
	if(vid.volume >= 0.03){ 
		volumeSlider.value = 0; 
		vid.volume = 0; 
		toggleIcon(); 
	} 
    else if(vid.volume <= 0.05){ 
		volumeSlider.value = 100; 
		vid.volume = volumeSlider.value / 100; 
		toggleIcon(); 
	} 
} 
function pressSpaceToStart(e){ 
 "use strict";  
	if(e.keyCode === 32){ 
	   e.preventDefault(); 
       playPauseVideo();} 
} 
window.onkeypress = function(o){"use strict"; pressSpaceToStart(o);}; 
window.onkeydown = function(o){"use strict"; pressSpaceToStart(o);};
@charset "UTF-8"; 
/* CSS Document */ 
 
/* Video Box Styling */ 
video::-webkit-media-controls, video::-webkit-media-controls-enclosure {display:none !important;} 
section.videoSection {width: 100%; margin: auto; margin-top: 30px;} 
div.mainVideo {text-align: center; width: 454px; margin: auto;}	 
div.mainVideo video {width: 450px; border: 2px solid black; border-bottom: 0;} 
div.videoControls {width: 450px; margin: -5px auto 0px; background-color: rgba(67,41,82,0.97); padding: 10px 0px 8px 0px; border: 2px solid black; color: snow;} 
div.videoControls button {position: absolute; background-color: inherit; border: 0; opacity: 0.8;} 
div.videoControls button:hover {opacity: 1;} 
/* Slider Styling */	 
input[type=range] {-webkit-appearance: none; width: 100%; margin: 6.8px 0;} 
 
input[type=range]:focus {outline: none;} 
 
input[type=range]::-webkit-slider-runnable-track {height: 6.4px; cursor: pointer; box-shadow: 2.4px 2.4px 6.2px rgba(7, 7, 163, 0.72), 0px 0px 2.4px rgba(8, 8, 187, 0.72); background: #ac62ff; border-radius: 21.6px; border: 1px solid rgba(163, 0, 255, 0.79);} 
 
input[type=range]::-webkit-slider-thumb {box-shadow: 2.4px 2.4px 9.5px rgba(4, 16, 14, 0.78), 0px 0px 2.4px rgba(9, 36, 32, 0.78); border: 1.8px solid rgba(0, 0, 6, 0.77); height: 20px; width: 8px; border-radius: 28px; background: #ffff29; cursor: pointer; -webkit-appearance: none; margin-top: -7.8px;} 
 
input[type=range]:focus::-webkit-slider-runnable-track {background: #b16cff;} 
 
input[type=range]::-moz-range-track {width: 100%; height: 6.4px; cursor: pointer; box-shadow: 2.4px 2.4px 6.2px rgba(7, 7, 163, 0.72), 0px 0px 2.4px rgba(8, 8, 187, 0.72); background: #ac62ff; border-radius: 21.6px; border: 1px solid rgba(163, 0, 255, 0.79);} 
 
input[type=range]::-moz-range-thumb {box-shadow: 2.4px 2.4px 9.5px rgba(4, 16, 14, 0.78), 0px 0px 2.4px rgba(9, 36, 32, 0.78); border: 1.8px solid rgba(0, 0, 6, 0.77); height: 20px; width: 8px; border-radius: 28px; background: #ffff29; cursor: pointer;} 
 
input[type=range]::-ms-track {width: 100%; height: 6.4px; cursor: pointer; background: transparent; border-color: transparent; color: transparent;} 
 
input[type=range]::-ms-fill-lower {background: #a758ff; border: 1px solid rgba(163, 0, 255, 0.79); border-radius: 43.2px; box-shadow: 2.4px 2.4px 6.2px rgba(7, 7, 163, 0.72), 0px 0px 2.4px rgba(8, 8, 187, 0.72);} 
 
input[type=range]::-ms-fill-upper {background: #ac62ff; border: 1px solid rgba(163, 0, 255, 0.79); border-radius: 43.2px; box-shadow: 2.4px 2.4px 6.2px rgba(7, 7, 163, 0.72), 0px 0px 2.4px rgba(8, 8, 187, 0.72);} 
 
input[type=range]::-ms-thumb {box-shadow: 2.4px 2.4px 9.5px rgba(4, 16, 14, 0.78), 0px 0px 2.4px rgba(9, 36, 32, 0.78); border: 1.8px solid rgba(0, 0, 6, 0.77); width: 8px; border-radius: 28px; background: #ffff29; cursor: pointer; height: 6.4px;} 
 
input[type=range]:focus::-ms-fill-lower {background: #ac62ff;} 
 
input[type=range]:focus::-ms-fill-upper {background: #b16cff;} 
 
 
/* Video Controls Buttons Styling */ 
#playPauseButton {margin: -5px 0px 0px -20px;} 
#muteUnmute {margin: -9px 0px 0px -9px;} 
#toggleFullScreen {margin: -3px 0px 0px 10px;} 
#time {z-index: 3;} 
#loop {margin: 0px 0px -3px 0px;} 
#seekSlider {width: 150px; margin-left: 30px;} 
#done {margin: 3px 30px 0px 10px; font-size: 0.81em} 
#duration {margin: 3px 0px 0px -32px; font-size: 0.81em} 
div.mainVideo span {color: snow;} 
#volumeSlider {width: 64px; margin-left: 28px;} 
/* Fullscreen settings */ 
.fullscreen {z-index: 2789034264 !important; position: absolute !important; width: 80% !important; bottom: 5% !important; left: 10% !important; right: 10% !important; height: 35px !important;} 
.fullscreen button i {font-size: 2.5em !important;} 
.fullscreen button#playPauseButton {position: relative !important; margin-left: 0.2% !important; float: left !important;} 
.fullscreen input#seekSlider {width: 48% !important; margin-left: -5px !important;} 
.fullscreen button#loop {position: relative !important;} 
.fullscreen span#timer {margin-left: -7% !important;} 
.fullscreen span#duration {font-size: 1.8em !important;} 
.fullscreen button#muteUnmute {position: relative; margin-left: 0.5%;} 
.fullscreen span#done {font-size: 1.8em !important;} 
.fullscreen input#volumeSlider {width: 12%; margin-left: 1%;} 
#exitFullScreen {margin-left: 0.5%;}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"/> 
<section class="videoSection"> 
<div class="mainVideo"> 
	<video preload="auto" id="vid"> 
		<source type="video/mp4" src="http://clips.vorwaerts-gmbh.de/VfE_html5.mp4"/> 
		<source type="video/webm" src="../videos/WoodchRockAndRoll.webm"/> 
	</video>	 
  <div class="videoControls"> 
  	<button id="playPauseButton" title="Play/Pause"> 
  	<i class="fa fa-play" aria-hidden="true" style="color: #15C936; font-size:1.7em; margin-top: 5px"></i> 
  	</button> 
  	<span id="timer"> 
  	<span id="done" title="Time couter from the start of the video">00:00 /</span> 
  	<span id="duration" title="Video duration">00:00</span> 
  	</span> 
  	<button id="loop" title="Loop"> 
  	<i class="fa fa-repeat" aria-hidden="true" style="color: #09BF99; font-size: 1.5em"></i> 
  	</button> 
  	<input type="range" step="1" min="0" max="100" value="0" id="seekSlider" title="Slider" style=""/> 
  	<button id="muteUnmute" title="Mute/Unmute"> 
  	<i class="fa fa-volume-up" aria-hidden="true" style="font-size: 2.4em; color: #C57A0C; margin-top: 5px;"></i> 
  	</button> 
  	<input type="range" step="1" min="0" max="100" value="100" id="volumeSlider" title="Volume level"/> 
  	<button id="toggleFullScreen" title="Enter fullscreen"> 
  	<i class="fa fa-arrows-alt" aria-hidden="true" style="color: whitesmoke; font-size: 2em;"></i> 
  	</button> 
  	<button id="exitFullScreen" style="display: none; font-size: 0.95em" title="Exit fullscreen"> 
  	<i class="fa fa-sign-out" aria-hidden="true" style="color: whitesmoke;"></i> 
  	</button> 
  </div> 
</div>	 
</section>

ПОСЛЕДНИЕ ВОПРОСЫ
Все вопросы
Подробнее о сайте beauty-health.com.ua
ТОП-10
READ ALSO
Не правильная замена переменной в setInterval
javascript

Не правильная замена переменной в setInterval

Пишу псевдо-еквалайзер на канвасеСсылка на codepen

 271
Не обрабатывается скрипт JQuery?
jQuery

Не обрабатывается скрипт JQuery?

Приветствую

 214
ПодключениеCSSWatch в проэкт на Denwer
jQuery

ПодключениеCSSWatch в проэкт на Denwer

Не работает библиотека cssWatchКак правильно подключить Подробности: Браузер - Яндекс

 256
Работа с DataTables.net
jQuery

Работа с DataTables.net

Здравствуйте,

 335