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

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

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.