CODEWITHSUNDEEP
videoextjswindowscreen
Surender Bhyan
Surender Bhyan

Reputation: 61

Video is not expanding to full screen in Extjs window

Plateform : Ext JS 4.2.1

Browser: Chrome: Version 46.0.2490.86 m Firefox 40.0.3 IE10, IE11

Requirements:

I am using a HTML 5 video tag inside a EXTJS window html content. I am using custom buttons instead of video controls attribute.

While using the default controls attribute, I am not able to see Expand Full Screen icon in control tray. I have added my custom buttons instead of default controls. Play, Pause and volume buttons are working fine as expected but Full Screen is not working even i have added correct listener to full screen button as shown below

// Event listener for the full-screen button

fullScreenButton.addEventListener("click", function() {
    if (video.requestFullscreen) {

        video.requestFullscreen();

    } 
   else if (video.mozRequestFullScreen) {
        video.mozRequestFullScreen(); // Firefox
    }
    else if (video.webkitRequestFullscreen) 
   {
        console.log('fullScreenButton clicked');

        video.webkitRequestFullscreen(); // Chrome and Safari

        console.log('Executed webkitRequestFullscreen()');
    }
    else if (video.msRequestFullscreen) {

        video.msRequestFullscreen(); // Internet Explorer

    }
});

Test fiddel https://fiddle.sencha.com/#fiddle/118s

Scenario screenshot is here

I want to expand the video in full window screen as expected to do by Full screen button in player. Any help will be appreciated.

Upvotes: 4

Views: 363

Answers (1)

Rohit Sharma
Rohit Sharma

Reputation: 1410

If you open developer console before clicking on full screen button you can see the below message

Request for fullscreen was denied because at least one of the document’s containing elements is not an iframe or does not have an “allowfullscreen” attribute.

Hope by checking this you can find the solution.

Upvotes: 0

Related Questions