html video key control and formatting

Question

I have spent over 5 hours each day for the last 3 days trying to get this to work. I have done research into this topic and nothing I have found on stack overflow, youtube, etc has helped me understand this any more. To give you idea of the purpose of this is to set up a local website (non-online, just a file) and present it as a school project, so it only needs to work in chrome. The idea was to have two titles with 4 images below each,

title

img img img img

title

img img img img

now, I am trying to figure out how to trigger a hidden video to go full screen whenever a button is pressed (each video will have a key labeled beside it) (each image has a different video) and disappear when it is over. The code I attached shows how far I have managed to get trying to get it to work. (I have minimal experience with html and even smaller with css and java, have only ever coded games in c# so I don't understand more complicated aspects).

<html><head>
  <title>Full Screen Test</title>
  <style type="text/css">
    /* make the video stretch to fill the screen in WebKit */
    :-webkit-full-screen #myvideo {
      width: 100%;
      height: 100%;
    }
  </style>
</head>

  
  

<body>
    <style>
        video::-webkit-media-controls {
  display:none !important;
}
    </style>
  
  <p><strong>Press enter to go fullscreen</strong></p>
  <video src="http://videos-cdn.mozilla.net/serv/webmademovies/Moz_Doc_0329_GetInvolved_ST.webm" width="800" id="myvideo">

<script>
  var videoElement = document.getElementById("myvideo");
    
  function toggleFullScreen() {
    if (!document.mozFullScreen && !document.webkitFullScreen) {
      if (videoElement.mozRequestFullScreen) {
        videoElement.mozRequestFullScreen();
      } else {
        videoElement.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT);
      }
    } else {
      if (document.mozCancelFullScreen) {
        document.mozCancelFullScreen();
      } else {
        document.webkitCancelFullScreen();
      }
    }
  }
  
  document.addEventListener("keydown", function(e) {
    if (e.keyCode == 13) {
      toggleFullScreen();
    }
  }, false);
</script>
</video>

</body></html>

why don't u use js from an external file? That way you can see if it is something with the script — h0merr, Jan 09 '20 at 14:00

vladwoguer · Accepted Answer · 2020-01-10T12:56:07.803

I think this can help.

You can add the video and try to use fullscreen api, if does not works you use css to simulate fullscreen.

Also use onended to exit fullscreen and hide the player.

Buttons are keypad 0 to 7 [key code 96 to 103] With the keycode on valid range it gets the correct video index from the array and plays it.

document.addEventListener("keydown", function(e) {

    if (e.keyCode >= 96 && e.keyCode <= 103 ) { // Keypad 0 to 7
        stopPlaying();
        setTimeout(()=> playVideo(e.keyCode-96), 500);
    }
}, false);

Hope it helps.

videos = [
"https://www.w3schools.com/html/mov_bbb.mp4",
"https://www.w3schools.com/html/mov_bbb.mp4",
"https://www.w3schools.com/html/mov_bbb.mp4",
"https://www.w3schools.com/html/mov_bbb.mp4",
"https://www.w3schools.com/html/mov_bbb.mp4",
"https://www.w3schools.com/html/mov_bbb.mp4",
"https://www.w3schools.com/html/mov_bbb.mp4",
"https://www.w3schools.com/html/mov_bbb.mp4",
];


removeVideo = function() {
  video = document.getElementById("video");
  video.remove();
}

playVideo = function (index) {
  wrapper = document.getElementById("wrapper");
  wrapper.innerHTML = '<video autoplay onended="removeVideo()" id="video" width="320" height="240" controls> <source src="' + videos[index]+'" type="video/mp4"> </video>';
  var elem = document.getElementById("video");
  if (elem.requestFullscreen) {
    elem.requestFullscreen();
  } else if (elem.mozRequestFullScreen) {
    elem.mozRequestFullScreen();
  } else if (elem.webkitRequestFullscreen) {
    elem.webkitRequestFullscreen();
  } else if (elem.msRequestFullscreen) { 
    elem.msRequestFullscreen();
  }
  
}

function isFullScreen() {
        return (document.fullscreenElement && document.fullscreenElement !== null) ||
                 (document.webkitFullscreenElement && document.webkitFullscreenElement !== null) ||
                 (document.mozFullScreenElement && document.mozFullScreenElement !== null) ||
                 (document.msFullscreenElement && document.msFullscreenElement !== null);
    }

function closeFullscreen() {
  if (document.exitFullscreen) {
    document.exitFullscreen();
  } else if (document.mozCancelFullScreen) { /* Firefox */
    document.mozCancelFullScreen();
  } else if (document.webkitExitFullscreen) { /* Chrome, Safari and Opera */
    document.webkitExitFullscreen();
  } else if (document.msExitFullscreen) { /* IE/Edge */
    document.msExitFullscreen();
  }
}


function stopPlaying() {
video = document.getElementById("video");
    if(isFullScreen()) {
      closeFullscreen();
    }
      if(video) {
       video.remove();
      }
}

document.addEventListener("keyup", function(e) {
 if(e.keyCode == 27 || e.keyCode == 69) { //Esc or e
    stopPlaying();
    }
}, false);




document.addEventListener("keydown", function(e) {
   
    if (e.keyCode >= 96 && e.keyCode <= 103 ) { // Keypad 0 to 7
      stopPlaying();
      setTimeout(()=> playVideo(e.keyCode-96), 500);
    }
  }, false);

#video {
  position: fixed;
  top: 0;
  height: 100vh;
  width: 100vw;
}

video::-webkit-media-controls {
  display:none !important;
}

<h6> Videos 1 </h6>

<img onclick="playVideo(0)"  src="https://via.placeholder.com/50">0
<img onclick="playVideo(1)"  src="https://via.placeholder.com/50">1
<img onclick="playVideo(2)"  src="https://via.placeholder.com/50">2
<img onclick="playVideo(3)"  src="https://via.placeholder.com/50">3

<h6> Videos 2 </h6>

<img onclick="playVideo(4)"  src="https://via.placeholder.com/50">4
<img onclick="playVideo(5)"  src="https://via.placeholder.com/50">5
<img onclick="playVideo(6)"  src="https://via.placeholder.com/50">6
<img onclick="playVideo(7)"  src="https://via.placeholder.com/50">7

<div id="wrapper">

<h6> Exit video </h6>
<div>
You can type 'e' to exit the video.
</div>
<div id="wrapper">
  
</div>

A greatly appreciate you taking time out of your day to help me with this, if you wouldn't mind, I have 3 questions. #1 When I replace the placeholder images, will I be able to size them with html or change their position, color, etc with css? #2 Would I be able to use the code in my original code that hides all controls from the "user"? #3 Is the first set of code javascript, second set css, and third set html? Thank you very much! — James, Jan 09 '20 at 14:54
You are welcome. 1) Yes you can. This can help: https://www.w3schools.com/css/tryit.asp?filename=trycss_image_gallery 2) No problem about that, I will update the example with this 3) Yes It is. I would recommend using this approach to execute js: https://stackoverflow.com/questions/807878/how-to-make-javascript-execute-after-page-load — vladwoguer, Jan 09 '20 at 15:09
Sorry for my inexperience, but, I don't understand how exactly how execution of a JavaScript works. Where do I put this code? Which code line from the answers should I use? Also, I have the java and css just set up in my html file ( — James, Jan 10 '20 at 03:35
I added a exit fullscreen to fix the issue you found and here is a complete example on my github: https://github.com/vladwoguer/video_fullscreen_key_js — vladwoguer, Jan 10 '20 at 12:49

html video key control and formatting

1 Answers1