Allow video Play in Landscape Mode on Mobile Application

Hi Community,

Objective:

1) Restrict the native application for "Portrait" Mode and I achieved it by defining the below JSON in Module level Extensibility Configuration

"{

preferences": {
        "global": [
            {
            "name": "orientation",
            "value": "portrait"
            }
        ]
    }

}"

2) Within the application we are having a screen in which we have to showcase multiple video and the requirement is to Play the video in Landscape Mode

Query: 

How can I set the video orientation/view to Landscape on mobile? I am using 11.0.528.0 version of OutSystems. 

- I tried to implement the required objective using the Screen Orientation API built in methods i.e. unlock(), lock() - didn't got any success (no error traced in error stack)

Referred Link: 

https://www.jotform.com/blog/html5-screen-orientation-api-uses-javascript-to-rotate-the-screen-89639/

https://usefulangle.com/post/105/javascript-change-screen-orientation

- also referred the ScreenOrientation Plugin (forge) - https://www.outsystems.com/forge/component-overview/1429/screen-orientation-plugin

Related Post: https://www.outsystems.com/forums/discussion/47073/landscape-video-on-mobile/

Kindly assist me on this. Thanks in advance for any help and suggestion.

Thanks & Regards,

Benjith Sam

Hi Community,

I succeeded in implementing the above mentioned objective. Below are the solution steps:

1) Add the below JSON in extensibility configuration (Application Module Level)

JS Code Snippet:

{
    "preferences": {
        "global": [
            {
                "name": "orientation",
                "value": "portrait"
            }
        ]
    },
   
    "plugin" : {
       "url": "https://github.com/apache/cordova-plugin-screen-orientation.git"
    }
}

2) Define a JS node in Screen OnReady action flow -  include the below JavaScript code: 

JS Code Snippet: 

(Event Handler for VideoWidget FullScreen)

// JS to unlock the existing screen orientation

var videoElement = document.getElementsByTagName('video')[0];   // get the video element


$(videoElement).bind('webkitfullscreenchange mozfullscreenchange fullscreenchange', function(e) {
    var state = document.fullScreen || document.mozFullScreen || document.webkitIsFullScreen;
    var event = state ? 'FullscreenOn' : 'FullscreenOff';
    
    if (event === 'FullscreenOn') {
        screen.orientation.unlock(); // unlock the existing orientation
    } else {
        $actions.OnDestroy();
    }
});

3) Define a OnDestroy Event Handler - include a JS node with below script:

screen.orientation.lock('portrait');

Hope this will help someone in need.

Regards,

Benjith Sam