HTML click button full screen-CodePudding

I am trying to inject my JS code in order to click the "fullscreen" button for this html video - http://techslides.com/demos/sample-videos/small.webm

Problem is, I don't know the function to call full screen. What is it called?

function fullScreenClick() {         
  var video = document.getElementsByTagName('video');     
  video[0].play();
}  

fullScreenClick();

CodePudding user response：

Try this :

<script>
var elem = document.getElementById("myvideo");
function openFullscreen() {
  if (elem.requestFullscreen) {
    elem.requestFullscreen();
  } else if (elem.webkitRequestFullscreen) { /* Safari */
    elem.webkitRequestFullscreen();
  } else if (elem.msRequestFullscreen) { /* IE11 */
    elem.msRequestFullscreen();
  }
}
</script>

CodePudding user response：

You can do this simply by using the onClick function of the video element. First, you need to wrap your video inside the video tag. I have added the code so you can better see the example:

$('#video').click(function(){this.paused?this.play():this.pause();});

<video id="video"><source src=""></video>

Or you can simply add the inline function into your HTML onclick tag.

CodePudding user response：

It's element.requestFullscreen().

function fullScreenClick() {         
  var video = document.getElementsByTagName('video')[0];
  video.requestFullscreen();
}  

fullScreenClick();

To support IE and Safari, you might need to use webkitRequestFullscreen or msRequestFullscreen.

Check the document here or here.