CODEWITHSUNDEEP
htmlvideotypescript
user2423696
user2423696

Reputation: 111

html video fullscreen mode with typescript

could someone please tell me how to turn on fullscreen mode when using video tag? I am using following typescript:

var vid = <HTMLVideoElement> document.getElementById('video1');

I would like to play video in fullscreen in window.onload event.

It seems typescript does not support requestFullscreen, or other "webkitFullscreen" mode. I search other questions on stackflow, and they seem bit outdated.

Upvotes: 1

Views: 3236

Answers (4)

Rajarshi Das
Rajarshi Das

Reputation: 12320

Please try this then

var elem = document.getElementById("myvideo");  

if (elem.requestFullscreen) {  
  elem.requestFullscreen();   
} else if (elem.mozRequestFullScreen) {  
  elem.mozRequestFullScreen();  
} else if (elem.webkitRequestFullscreen) {  
  elem.webkitRequestFullscreen();  
}

For documentation Document

Upvotes: 0

Ilya
Ilya

Reputation: 149

Opening a video in full screen requires a synchronous user interaction, i.e. the user must click on a button, and only then the click handler can request full screen mode.

Upvotes: 0

user2423696
user2423696

Reputation: 111

I tried this but does not work.

I am looking to play fullscreen video from window.onload event. If I add a button on the page and add hook up the code you mentioned, then it works. code Click Me To Go Fullscreen!

Also, IE10 does not seem to support any of these modes. Is that expected?

Upvotes: 0

basarat
basarat

Reputation: 275937

You can add those to the interface:

// Add the missing definitions: 
interface HTMLVideoElement{
    requestFullscreen();
    webkitRequestFullscreen();
}

// now the following should work 
var vid = <HTMLVideoElement> document.getElementById('video1');
if (vid.requestFullscreen){
    vid.requestFullscreen();
}else if (vid.webkitRequestFullscreen){
    vid.webkitRequestFullscreen();
}

Upvotes: 1

Related Questions