Can't fullscreen html5 videos in chrome's webview

Question

I've been searching around for this answer for a while but I'm not really getting anywhere. My question is regarding a webview inside of a chrome application on a computer, not for Android. If I have any embedded html5 video inside the webview, the fullscreen button does not work. All of the other video controls are working properly. I've done some searching and people are saying that webview doesn't fully support the html5 API. Is this still the case? The answers I saw are fairly old and I haven't been able to find anything recent.

Any suggestions/answers would be greatly appreciated! Thanks!

Answer 1

It supports html5 fullscreen from version 43, you can use fullscreen permission API: See event-permissionrequest and FullscreenPermissionRequest. Basically, you have to "allow()" the permission, sth like:

webview.addEventListener('permissionrequest', function(e) {
  if (e.permission === 'fullscreen') {
    e.request.allow();
  }
});

Answer 2

In addition to lazyboy's answer of setting the fullscreen permission and allowing it by:

webview.addEventListener('permissionrequest', function(e) {
    if (e.permission === 'fullscreen') {
    e.request.allow();
    }
});

It might also be needed to set the webview dimensions itself to the screen dimensions as sometimes the HTML5 video might get fullscreened inside the webview only (and not the screen). This can be done as:

document.addEventListener('webkitfullscreenchange', function(){
if (chrome.app.window.current().isFullscreen()){
    webview.style.height = screen.height + 'px';
    webview.style.width = screen.width + 'px';
}
else{
   /*get webview to original dimensions*/
};
});

webkitfullscreenchange listens to changes in fullscreen. If chrome window is fullscreen chrome.app.window.current().isFullscreen(), it sets the webview width and height to screen width and height respectively. If the window is not fullscreen, webview dimensions can be returned to desired.