7
Views
1
Comments
Allow user to play video in full screen mode only(mobile app).
Application Type
Mobile

Hi all,

I am creating a mobile application, in which a requirement is to play video in fullscreen mode only, and the user should not be able to change it back to normalscreen mode.

How can I achieve this? Is there a way to disable the fullscreen/normalscreen toggle option in the video widget as well?

Thanks and regards,

Amol Rane

mvp_badge
MVP
Rank: #72

Hi Amol,

For the mentioned use-case, I would suggest the following solution which I tried and tested in Android native device.

Steps to follow:

  • Add OnReady event handler for the respective screen/block
  • Within the OnReady action-flow introduce a JS node with a single input parameter i.e. VideoPlayerId (respective widget Id)
  • Define the below-mentioned JavaScript within the same JS node (point 2)

JavaScript Snippet

var videoPlayer = document.querySelector('#' + $parameters.VideoPlayerId + ' video');

videoPlayer.onplay = function () {
    this.webkitEnterFullscreen();
};

function onFullScreen(e) {
  var isFullscreenNow = document.webkitFullscreenElement !== null;
  
  if (!isFullscreenNow) {
    videoPlayer.pause();
  }
}

videoPlayer.addEventListener('webkitfullscreenchange', onFullScreen);


If you want to hide the fullscreen control from the video player, define the below-mentioned CSS definition in the respective screen/block stylesheet section

video::-webkit-media-controls-fullscreen-button { 
    display: none;
}


See this sample app | FullScreenVideo

Let me know if you need the sample .oml file.


Hope this helps you!


Kind regards,

Benjith Sam