Fullscreen video sprites

Question

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

Playback works as expected: pressing the appropriate buttons plays the corresponding parts of the video.

Now, however, I would like to include something that would make the video play in full screen (or full window) by pressing a button or pressing a key. The demo here, for example, shows an approach where, if you press Enter during video playback, it will enter full-screen mode.

I am not particularly good at JavaScript, so the solution probably looks right in my face at how to integrate the approach shown in Mozilla's article, but I'm at a dead end.

Here is what I have right now that creates 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 advice on how to extend this for full screen or full window would be greatly appreciated!

Answer 1

I use the code that exists in MDN and change it to switch full-screen mode, this means that when you click, you can enter the video in full-screen mode, if it is not so and vice versa.

 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 the toggleFullScreen() function when you click the buttons.

When I press Enter, it restarts the video. Why??

When you click on the buttons ( you focus on this button ), the video makes a full screen, and when you press re-enter the video output from full screen mode, and then the focused element (the button that has already been pressed ), press the button again to restart the video .

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

You only need to call the 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 ?

Each time the playSprite function is playSprite ( playSprite(this, YourdesireTime) ), the current element that clicked the element goes to the function to understand which button is pressed and remove focus from the clicked element.

What is the difference between your answer and @cviejo's answer?

My answer

• has a switching function
• don't reset video
• doesn't optimize (I think you don't like changing code)

@cviejo answer

• optimize your code

Note. I don't mean to say that @cviejo's answer is not very good, because it really minimizes your code.

Conclusion

You can combine the code with the @cviejo code to get the best result.

Codepen