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();
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>
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();});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<video id="video"><source src="http://techslides.com/demos/sample-videos/small.webm"></video>Or you can simply add the inline function into your HTML onclick tag.
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.