HTML5 video code with scripts and css custom made

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<div class="servicedetail">
<div class="servicedetailimg youtubelink">
<div id="player">
<div id="serunmutebtntext">Click to unmute</div>

<video id="video-element" autoplay="autoplay" style="width:100%;">

            <source src="anyvideo.mp4" type="video/mp4" />

        </video>
<div id="controls"> </div>

</div>
</div>
</div>



<script type="text/javascript">
  /** custome controller **/

document.getElementById('controls').innerHTML='<button id="btnPlayPause" class="play" title="play" accesskey="P" onclick="playPauseVideo();">Play</button><progress id="progress-bar" min="0" max="100" value="0">0% played</progress><input type="range" id="volume-bar" title="volume" min="0" max="1" step="0.1" value="1"><button id="btnMute" class="mute" title="mute" onclick="muteVolume();">Mute</button> <div id="btnFullScreen" class="fullscreen" title="toggle full screen" accesskey="T" onclick="toggleFullScreen();">Full-Screen</div>';
document.getElementById('serunmutebtntext').innerHTML='<span onclick="serunmutebtnfun()">Click to unmute</span>';
var flag_playPause='';
var flag_muteUnmute;


  // Get a handle to the player
  player       = document.getElementById('video-element');
  btnPlayPause = document.getElementById('btnPlayPause');
  btnMute      = document.getElementById('btnMute');
  progressBar  = document.getElementById('progress-bar');
  volumeBar    = document.getElementById('volume-bar');
  serunmutebtntext    = document.getElementById('serunmutebtntext');

if(navigator.userAgent.indexOf("Chrome") != -1 )
    {
         player.muted = true;
        serunmutebtntext.style.display = 'block';
    }
    else if(navigator.userAgent.indexOf("Safari") != -1)
    {
         player.muted = true;
        serunmutebtntext.style.display = 'block';
    }
    else {
      player.muted = false;
      serunmutebtntext.style.display = 'none';


    }
   // player.muted = true;
    player.play();

function serunmutebtnfun(){
  muteVolume();

}
if (player.muted) {
  serunmutebtntext.style.display = 'block';

}
else {
  serunmutebtntext.style.display = 'none';

}
  // Update the video volume
  volumeBar.addEventListener("change", function(evt) {
    player.volume = evt.target.value;
  });
  document.getElementById('btnFullScreen').disabled = true;
  // Add a listener for the timeupdate event so we can update the progress bar
  player.addEventListener('timeupdate', updateProgressBar, false);
 
  // Add a listener for the play and pause events so the buttons state can be updated
  player.addEventListener('play', function() {
    // Change the button to be a pause button
    changeButtonType(btnPlayPause, 'pause');
  }, false);
 
  player.addEventListener('pause', function() {
    // Change the button to be a play button
    changeButtonType(btnPlayPause, 'play');
  }, false);
 
  player.addEventListener('volumechange', function(e) {
    // Update the button to be mute/unmute
    if (player.muted) changeButtonType(btnMute, 'unmute');
    else changeButtonType(btnMute, 'mute');
  }, false); 
 
  player.addEventListener('ended', function() { this.pause(); }, false); 
 
  progressBar.addEventListener("click", seek);

  function seek(e) {
      var percent = e.offsetX / this.offsetWidth;
      player.currentTime = percent * player.duration;
      e.target.value = Math.floor(percent / 100);
      e.target.innerHTML = progressBar.value + '% played';
  }

  function playPauseVideo() {
    flag_playPause=document.getElementById('btnPlayPause').innerHTML;
    if (player.paused || player.ended) {
      // Change the button to a pause button
      changeButtonType(btnPlayPause, 'pause');
      player.play();
    }
    else {
      // Change the button to a play button
      changeButtonType(btnPlayPause, 'play');
      player.pause();
    }
  }
 
  // Stop the current media from playing, and return it to the start position
  function stopVideo() {
    player.pause();
    if (player.currentTime) player.currentTime = 0;
  }
 
  // Toggles the media player's mute and unmute status
  function muteVolume() {
    //alert('skfvkl')
    flag_muteUnmute=document.getElementById('btnMute').innerHTML;
    if (player.muted) {
      // Change the button to a mute button
      changeButtonType(btnMute, 'mute');
      player.muted = false;
      serunmutebtntext.style.display = 'none';
     
    }
    else {
      // Change the button to an unmute button
      changeButtonType(btnMute, 'unmute');
      player.muted = true;
      serunmutebtntext.style.display = 'block';
    }
  }

 
  // Replays the media currently loaded in the player
  function replayVideo() {
    resetPlayer();
    player.play();
  }
 
  // Update the progress bar
  function updateProgressBar() {
    // Work out how much of the media has played via the duration and currentTime parameters
    var percentage = Math.floor((100 / player.duration) * player.currentTime);
    // Update the progress bar's value
    progressBar.value = percentage;
    // Update the progress bar's text (for browsers that don't support the progress element)
    progressBar.innerHTML = percentage + '% played';
  }
 
  // Updates a button's title, innerHTML and CSS class
  function changeButtonType(btn, value) {
    btn.title     = value;
    btn.innerHTML = value;
    btn.className = value;
  }
 
  function resetPlayer() {
    progressBar.value = 0;
    // Move the media back to the start
    player.currentTime = 0;
    // Set the play/pause button to 'play'
    changeButtonType(btnPlayPause, 'play');
  } 
 
  function exitFullScreen() {
    if (document.exitFullscreen) {
        document.exitFullscreen();
    } else if (document.msExitFullscreen) {
        document.msExitFullscreen();
    } else if (document.mozCancelFullScreen) {
        document.mozCancelFullScreen();
    } else if (document.webkitExitFullscreen) {
        document.webkitExitFullscreen();
    }
  }
 
  function toggleFullScreen() {
    //var player = document.getElementById("player");
   // alert('sdfsd');

    if (player.requestFullscreen)
        if (document.fullScreenElement) {
            document.cancelFullScreen();
        } else {
            player.requestFullscreen();
        }
        else if (player.msRequestFullscreen)
        if (document.msFullscreenElement) {
            document.msExitFullscreen();
        } else {
            player.msRequestFullscreen();
        }
        else if (player.mozRequestFullScreen)
        if (document.mozFullScreenElement) {
            document.mozCancelFullScreen();
        } else {
            player.mozRequestFullScreen();
        }
        else if (player.webkitRequestFullscreen)
        if (document.webkitFullscreenElement) {
            document.webkitCancelFullScreen();
        } else {
            player.webkitRequestFullscreen();
        }
    else {
        alert("Fullscreen API is not supported");
       
    }
  }

 

 function scrollonvaue(scroll,windowheight){
   var myvid = document.getElementById("video-element");
   console.log(flag_playPause+'windowheight'+windowheight+'scroll'+scroll);
  if(scroll > windowheight){

    player.pause();
  }
  else {
     if(flag_playPause == 'play'){
    player.play();
    }
    else if(flag_playPause==''){
      player.play();
    }


  }
}
(function ($) {
 $(document).ready(function(){

$(window).scroll(function(){
  var scroll = $(window).scrollTop();
  var windowheight=$( window ).height();
  scrollonvaue(scroll,windowheight);
 
});

});
 })(jQuery);

/** end custome controller **/

</script>



<style type="text/css">

#serunmutebtntext {
    position: absolute;
    margin: 30px 0 0 60px;
    background: red;
    padding: 3px 15px;
    border-radius: 5px;
    color: #fff;
    cursor: pointer;
}

/** custome video player */
#player {
      float:left;
     
      border-radius: 9px;
      width: 100%;
    }
   
     #player #controls{
        /*border: 1px solid darkgreen;*/
        width:100%;
        margin-left: auto;
        margin-right: auto;
        text-align: center;
        margin-top: 5px;
        padding-bottom: 3px;
        border-radius: 7px;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
    }
   
     #player video {
      /*border:1px solid darkgreen;*/
     /* width:420px;*/
      width:100% !important;
      /*height:231px;*/
      background:black;
    }
   
     #player button{
        /*text-indent:-9999px;*/
        width:85px;
        outline:none;
        height:16px;
        border:none;
        cursor:pointer;
        background: none;
        padding-top:0;
        text-transform: capitalize;
        font-size: 12px;
        /*background:transparent url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJEAAAAQCAYAAAAWNJ1eAAAAB3RJTUUH4AMQDS0aGLmsqwAAAAlwSFlzAAAOdAAADnQBaySz1gAAAvZJREFUeNrtmk2u0zAQxyele7gBZcOWcAJ8AKTXFVvKhnW5QbhBD4BEe4GnvgULdkaCNeUE5N2gbJGgeDJ26rhO4rFbKRX5P7mtP+YX2x1PHPdl4ErCa/W6UEmc1ACsVekGQjWyeKwrVWYN+bF63aqU99jsVJqryblvbTGyeKxrkoSPesxC/f3CosyaEBzso0DUvgL5JmZk8VhdoihXKLsnLLtLsYix1jkcf+VIU12wZUwI6LZo89xTN7J4rFOZLxxgxrjG+Vm0WNB27hlvXrWQICb6Im5IXqhU9lwi17Zuh13WS2juF/Dzq0TWW+tzLMvuj2ip47J480W8G5V+qnSwStfg+9KxDbW98V6Bw+qThGdA0WYBPQtmohu507rRYQ/ryg77RU8e9Vmlb1b+q0q3iawPqn+fEllmrF+qlDbGUDVtyRkwQs0YjFll4zpSHMsvikASyHnwVlwALbSV1aq+nU2gfRWGOJPoyaNw33VwyqYDYIXqkqwV0x5vK7sWWy6rSwUcHQgd5b1ebO+AIlvtQNh4GoSkx9RN5P0Vr/HbKTsw7P0sWT9ZxrBET5lMZNnqYs2Yvb7TNF/E4bGkM2/CelInZ0WtVPkPp90bZfvQOBAqzInS9MdTFutE52H5bl92mUxk2eKwhiOzB/L33nIgVJgTpT0tZE7+AcQ70XlY9ioU9TFHXJ9i7UglcOaU9j2FZRvPEidzyR33C9BONoGutYLOg7v99h2+7Mn79Bf8X3w4S9T26ayQ6boca8m0tw83l4msLu31u+hoY+r26ERrz1D7nMdo3ZNHPQWKGEa5LotnySrcThNZobocC/c4tP8oGYwS6AT87gysNm31+1I/6jdFZcZptyaUfwf+2cdOdfz08Gxk8VhNLm1Y3e1DzK0nhdU8kceotIJjFBVADmTq8omumMMxhIVoD8cdvKuRxWMdZTas4ed0l2HRzzNC9xudpQByIgmnj//34w+wQ2ANVf6fPfZ63IUZU+YxHOa/SfwPrCvVP/2nY6KBhDUMAAAAAElFTkSuQmCC') no-repeat 0 0; *//* url('buttons.png') */
    }

    #player button:hover{
        -webkit-transform: translate(0px, 0);
        -ms-transform: translate(0px, 0);
        transform: translate(0px, 0);
    }
   
     #player .pause { background-position:-19px 0; }
    #player .stop { background-position:-38px 0; }

    #player #volume-bar {
      width: 50px;
      vertical-align: middle;
      padding:0px;
    }
    #player .mute { background-position:-95px 0; }
    #player .unmute { background-position:-114px 0; }
    #player .replay { background-position:-133px 0; }
     #player .fullscreen {
        text-indent: 0px;
        color:#3498db;
        background-color:#434343;
        background-image: none;
        padding: 0px;
        font-weight: bold;
        padding-bottom: 3px;
        width: 100%;
        max-width: 110px;
        font-size:12px;
        height:16px;
        border-radius:10px;
    }

    #controls{
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
    }

   
    #player progress {
      color:rgb(53, 152, 219);
      font-size: 12px;
      width:100%;
      height:5px;
      border: none;
      margin-right: 10px;
      background: #434343;
      border-radius: 0;
      vertical-align: middle;
    }
     #player progress::-moz-progress-bar {
      color:rgb(53, 152, 219);
      background:rgb(53, 152, 219);
    }
   
     #player progress[value]::-webkit-progress-bar {
      background-color: #434343;
      border-radius: 2px;
      -webkit-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25) inset;
              box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25) inset;
    }
   
     #player progress[value]::-webkit-progress-value {
      background-color: #3498db;
    }
   
     #player input[type=range] {
      -webkit-appearance: none;
      width: 100%;
      margin: 6.8px 0;
    }
     #player input[type=range]:focus {
      outline: none;
    }
    #player input[type=range]::-webkit-slider-runnable-track {
      width: 100%;
      height: 4.4px;
      cursor: pointer;
      /*box-shadow: 0.9px 0.9px 1.7px #002200, 0px 0px 0.9px #003c00;*/
      background: #3498db;
      border-radius: 1px;
      border: 1.1px solid #3498db;
    }
    #player input[type=range]::-webkit-slider-thumb {
      /*box-shadow: 2.6px 2.6px 3.7px #00aa00, 0px 0px 2.6px #00c300;*/
      border: 2.5px solid #3498db;
      height: 18px;
      width: 9px;
      border-radius: 3px;
      background: #3498db;
      cursor: pointer;
      -webkit-appearance: none;
      margin-top: -7.9px;
    }
    #player input[type=range]:focus::-webkit-slider-runnable-track {
      background: #3498db;
    }
    #player input[type=range]::-moz-range-track {
      width: 100%;
      height: 4.4px;
      cursor: pointer;
      /*box-shadow: 0.9px 0.9px 1.7px #002200, 0px 0px 0.9px #003c00;*/
      background: #3498db;
      border-radius: 1px;
      border: 1.1px solid #3498db;
    }
     #player input[type=range]::-moz-range-thumb {
      /*box-shadow: 2.6px 2.6px 3.7px #00aa00, 0px 0px 2.6px #00c300;*/
      border: 2.5px solid #3498db;
      height: 18px;
      width: 9px;
      border-radius: 3px;
      background: #3498db;
      cursor: pointer;
    }
    #player input[type=range]::-ms-track {
      width: 100%;
      height: 4.4px;
      cursor: pointer;
      background: transparent;
      border-color: transparent;
      color: transparent;
    }
     #player input[type=range]::-ms-fill-lower {
      background: #3498db;
      border: 1.1px solid #3498db;
      border-radius: 2px;
      /*box-shadow: 0.9px 0.9px 1.7px #002200, 0px 0px 0.9px #003c00;*/
    }
    #player input[type=range]::-ms-fill-upper {
      background: #3498db;
      border: 1.1px solid #3498db;
      border-radius: 2px;
      /*box-shadow: 0.9px 0.9px 1.7px #002200, 0px 0px 0.9px #003c00;*/
    }
    #player input[type=range]::-ms-thumb {
      /*box-shadow: 2.6px 2.6px 3.7px #00aa00, 0px 0px 2.6px #00c300;*/
      border: 2.5px solid #3498db;
      height: 18px;
      width: 9px;
      border-radius: 3px;
      background: #3498db;
      cursor: pointer;
      height: 4.4px;
    }
     #player input[type=range]:focus::-ms-fill-lower {
      background: #3498db;
    }
    #player input[type=range]:focus::-ms-fill-upper {
      background: #3498db;
      background-color: lightgray;
    }   

@media(max-width:767px){
    #player .unmute{
        margin-top: -3px;
    }
    #player .pause{
        margin-top: -7px;
    }
}   

@media(max-width:320px){
    #player .pause{
        padding: 0;
        padding-right: 7px;
        margin-top: -7px;
    }
    #player #volume-bar{
        width:30px;
    }
    #player .unmute{
        padding: 0 6px;
        margin-top: -3px;
    }
    #player .fullscreen{
        font-size:11px;
    }
}   
   
/** end custome video player */
</style>