Full screen video sprites

Question

I'm trying to create a small project with video sprites, modeled after this JSFiddle for audio sprites.

Playback works as expected: clicking on the relevant buttons play the relevant portions of the video.

Now, however, I would like to incorporate something that would make the video play in full screen (or full window) when the button is pressed or when a key is pressed. The demo here, for example shows an approach where if you click Enter while the video is playing, it will enter full-screen mode.

I'm not particularly experienced with JavaScript, so it's likely that the solution is staring me right in the face on how to integrate the approach shown in the Mozilla article, but I'm stumped.

Here's what I have right now, which creates the video sprites, as expected:

var videoSprite = document.getElementById('bbb');

// sprite data
var spriteData = {
  full: {
    start: 0,
    length: 595
  },
  tentotwenty: {
    start: 10,
    length: 10
  },
  tentothirty: {
    start: 10,
    length: 20
  },
  fiftytoonefifty: {
    start: 50,
    length: 200
  }
};

// current sprite being played
var currentSprite = {};

// time update handler to ensure we stop when a sprite is complete
var onTimeUpdate = function() {
  if (this.currentTime >= currentSprite.start + currentSprite.length) {
    this.pause();
  }
};
videoSprite.addEventListener('timeupdate', onTimeUpdate, false);

// in mobile Safari, the first time this is called will load the audio. Ideally, we'd load the audio file completely before doing this.
var playSprite = function(id) {
  if (spriteData[id] && spriteData[id].length) {
    currentSprite = spriteData[id];
    videoSprite.currentTime = currentSprite.start;
    videoSprite.play();
  }
};

<video id="bbb">
  <source src="https://ia700408.us.archive.org/26/items/BigBuckBunny_328/BigBuckBunny_512kb.mp4" type="video/mp4" />
</video>
<br />
<br />
<ul>
  <li>
    <button onclick="playSprite('full');">Play full video</button>
  </li>
  <li>
    <button onclick="playSprite('tentotwenty');">Play from 10 to 20 seconds</button>
  </li>
  <li>
    <button onclick="playSprite('tentothirty');">Play from 10 to thirty seconds</button>
  </li>
  <li>
    <button onclick="playSprite('fiftytoonefifty');">Play from 50 to 200 seconds</button>
  </li>
</ul>

Any tips on how to extend this to go full screen or full window would be greatly appreciated!

Answer 1

I use the code which exists in MDN and modify it to have toggle full screen it means when press enter the video can be full screen if it is not and reverse that.

document.addEventListener("keydown", function(e) {
  if (e.keyCode == 13) {
    toggleFullScreen();
  }
}, false);

function toggleFullScreen() {
  var state = document.fullScreen || document.mozFullScreen || document.webkitIsFullScreen;      
  if (!state) {
    if (document.documentElement.requestFullscreen) {
      document.documentElement.requestFullscreen();
    } else if (document.documentElement.msRequestFullscreen) {
      document.documentElement.msRequestFullscreen();
    } else if (document.documentElement.mozRequestFullScreen) {
      document.documentElement.mozRequestFullScreen();
    } else if (document.documentElement.webkitRequestFullscreen) {
      document.documentElement.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
    }
  } else {
    if (document.exitFullscreen) {
      document.exitFullscreen();
    } else if (document.msExitFullscreen) {
      document.msExitFullscreen();
    } else if (document.mozCancelFullScreen) {
      document.mozCancelFullScreen();
    } else if (document.webkitExitFullscreen) {
      document.webkitExitFullscreen();
    }
  }
}

You only need to call toggleFullScreen() function when buttons is clicked.

When I press enter it restarts the video. Why??

When you click on the buttons(you focus on that button), the video makes full screen and when you press enter again the video exit from full screen mode and then the focused element(the button which was already clicked) click again so it restarts the video.

Now, I understand what happening. What is the solution?

You only need to call blur() function to remove focus from the element.

HTML

<button onclick="playSprite(this,'full');">Play full video</button>
<button onclick="playSprite(this,'tentotwenty');">Play from 10 to 20 seconds</button>
<button onclick="playSprite(this,'tentothirty');">Play from 10 to thirty seconds</button>
<button onclick="playSprite(this,'fiftytoonefifty');">Play from 50 to 200 seconds</button>

Javascript

function(currentElement,id) {
   currentElement.blur();
   //your code
}

What is this?

Every time, when playSprite function is called(playSprite(this, YourdesireTime)), the current clicked element pass to function to understand which button is clicked and remove focus from the clicked element.

What is different between your answer and @cviejo's answer?

My answer

1. has toggling functionality
2. doesn't reset the video
3. doesn't optimize(I think you don't like to change your code)

@cviejo's answer

1. optimize your code

Note: I don't want to say @cviejo's answer is not good because he really minimize your code.

Conclusion

You can combine my code and @cviejo's code for getting better result.

Codepen