Hello! I make myself a video player on the site:

Satisfied with the view, basically satisfied with the functionality, but there are nuances. And then I immediately have 2 questions:

1) The sound slider does not remember the user's position.

2) I can not make a way out of fullscreen. The code for exiting full-screen mode is in the function exitFullScreen*()

Thanks in advance for any help.

Here are the scripts:

 var vid, muteButton, volumeSlider, fullScreenToggler, fullscreenHider; function intializePlayer(){ "use strict"; // Set object references muteButton = document.getElementById("muteUnmute"); volumeSlider = document.getElementById("volumeSlider"); fullScreenToggler = document.getElementById("toggleFullScreen"); fullscreenHider = document.getElementById("exitFullScreen"); // Add event listeners muteButton.addEventListener("click",muteUnmute,false); volumeSlider.addEventListener("input",volumeChange,false); fullScreenToggler.addEventListener("click",enterFullScreen,false); fullscreenHider.addEventListener("click",exitFullScreen,false); } window.onload = intializePlayer; 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 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(); } }

  • The question is not very interesting, and there are no answers, especially since there is a lot of code in the question, which must be speculatively debugged to give an answer. However, the answers are contained in the question itself. 1. Mute function does not remember the last position of the slider. We look at the code - indeed, it doesn’t seem to be transmitted to it at all. 2. Function exit from full-screen mode. “It seems to have written everything correctly, but does not work” - it means that the word “like” does not fit here, it is necessary to debug it - to understand why it does not work - and write correctly. - labris
  • @labris Ok, so ok? - Eugen Eray
  • If you asked how to make a fullscreen or how to write a button, you would get an answer. But you are asking to rewrite the program for you in a hundred lines of code, which is probably easy for you to read. - user220409
  • @labris Yes, you are right, but I was more about ** eating (sorry for this) when I saw: "10712 characters removed from the text" o_O O_o - Eugen Eray

1 answer 1

1) Remember the sound level when you put a mute and put it, and not 100% when you remove

 var prev_level; function muteUnmute(){ "use strict"; if(vid.volume >= 0.03){ prev_level=volumeSlider.value volumeSlider.value = 0; ... } else if(vid.volume <= 0.05){ volumeSlider.value = prev_level; ... } }

2) cancelFullScreen applies to the entire document, and not to the element. It is called through the document :

  document.webkitCancelFullScreen(); document.mozCancelFullScreen(); document.oCancelFullScreen(); document.msCancelFullScreen();