CefSharp OnFullscreenModeChange event

Question

I'm currently working on a CefSharp project, and I'm currently working on getting HTML5 videos to open in fullscreen, inside my application.

I've searched the internet for answers about how this kind of event works, which I don't quite understand yet.

I my winforms project I've gotten this far:

public partial class Form1 : Form
{
    public ChromiumWebBrowser chromeBrowser;

    public Form1()
    {
        InitializeComponent();
        InitializeChromium();
    }

    private void Form1_Load(object sender, EventArgs e)
    {

    }

    private void InitializeChromium()
    {
        CefSettings settings = new CefSettings();

        Cef.Initialize(settings);

        chromeBrowser = new ChromiumWebBrowser("http://youtube.com/");

        this.Controls.Add(chromeBrowser);
        chromeBrowser.Dock = DockStyle.Fill;
    }

    private void Form1_FormClosed(object sender, FormClosedEventArgs e)
    {
        Cef.Shutdown();
    }
}

But every time I load a youtube video (or a video from a different website) and hit on a "Fullscreen" button, the video only fills the application, and not the entire monitor screen. I guess this is due to the fact that I havn't implemented the OnFullscreenModeChange method yet, from the IDisplayHandler interface.

In my search for answers I've seen that I can use a method to overload CefSharp's IDisplayHandler.OnFullscreenModeChange method, with something like this:

class DisplayHandler : IDisplayHandler
{
...
    void IDisplayHandler.OnFullscreenModeChange(IWebBrowser browserControl, IBrowser browser, bool fullscreen)
    {
        var chromiumWebBrowser = (ChromiumWebBrowser)browserControl;

        chromiumWebBrowser.InvokeOnUiThreadIfRequired(() =>
        {
            if (fullscreen)
            {
                parent = chromiumWebBrowser.Parent;

                parent.Controls.Remove(chromiumWebBrowser);

                fullScreenForm = new Form();
                fullScreenForm.FormBorderStyle = FormBorderStyle.None;
                fullScreenForm.WindowState = FormWindowState.Maximized;

                fullScreenForm.Controls.Add(chromiumWebBrowser);

                fullScreenForm.ShowDialog(parent.FindForm());
            }
            else
            {
                fullScreenForm.Controls.Remove(chromiumWebBrowser);

                parent.Controls.Add(chromiumWebBrowser);

                fullScreenForm.Close();
                fullScreenForm.Dispose();
                fullScreenForm = null;
            }
        });
    }
...
}

So my question is: How do I add this overload to my ChromiumWebBrowser control?

score 4 · Answer 1 · answered Oct 31 '18 at 04:51

Please implement IDisplayHandler interface completely as example code showing below:

using CefSharp;
using CefSharp.MinimalExample.WinForms.Controls;
using CefSharp.WinForms;
using System.Collections.Generic;
using System.Windows.Forms;
namespace FullScreen
{
    public class DisplayHandler : IDisplayHandler
    {
        private Control parent;
        private Form fullScreenForm;
        void IDisplayHandler.OnAddressChanged(IWebBrowser browserControl, AddressChangedEventArgs addressChangedArgs)
        {
        }
        void IDisplayHandler.OnTitleChanged(IWebBrowser browserControl, TitleChangedEventArgs titleChangedArgs)
        {
        }
        void IDisplayHandler.OnFaviconUrlChange(IWebBrowser browserControl, IBrowser browser, IList<string> urls)
        {
        }
        void IDisplayHandler.OnFullscreenModeChange(IWebBrowser browserControl, IBrowser browser, bool fullscreen)
        {
            var chromiumWebBrowser = (ChromiumWebBrowser)browserControl;
            chromiumWebBrowser.InvokeOnUiThreadIfRequired(() =>
            {
                if (fullscreen)
                {
                    parent = chromiumWebBrowser.Parent;
                    parent.Controls.Remove(chromiumWebBrowser);
                    fullScreenForm = new Form();
                    fullScreenForm.FormBorderStyle = FormBorderStyle.None;
                    fullScreenForm.WindowState = FormWindowState.Maximized;
                    fullScreenForm.Controls.Add(chromiumWebBrowser);
                    fullScreenForm.ShowDialog(parent.FindForm());
                }
                else
                {
                    fullScreenForm.Controls.Remove(chromiumWebBrowser);
                    parent.Controls.Add(chromiumWebBrowser);
                    fullScreenForm.Close();
                    fullScreenForm.Dispose();
                    fullScreenForm = null;
                }
            });
        }
        bool IDisplayHandler.OnTooltipChanged(IWebBrowser browserControl, string text)
        {
            return false;
        }
        void IDisplayHandler.OnStatusMessage(IWebBrowser browserControl, StatusMessageEventArgs statusMessageArgs)
        {
        }
        bool IDisplayHandler.OnConsoleMessage(IWebBrowser browserControl, ConsoleMessageEventArgs consoleMessageArgs)
        {
            return false;
        }
    }
}

And assign a new displayhandler to a ChromiumWebBrowesr using on a WinForm, the example code is showing as below:

public ChromiumWebBrowser WebBrowser2;  
public Form1()
{
  InitializeComponent();
  DisplayHandler displayer = new DisplayHandler();
  WebBrowser2 = new ChromiumWebBrowser("https://www.google.com");
  WebBrowser2.Dock = DockStyle.Fill;
  this.Panel1.Controls.Add(this.WebBrowser2);
  this.WebBrowser2.DisplayHandler = displayer;         
}

score 3 · Answer 2 · answered Aug 24 '19 at 19:48

I implemented McMillian's answer. Worked great!

Additionally, if you want the Esc key to exit fullscreen in CefSharp, you need to implement the IKeyboardHandler. Here's how I did it:

using CefSharp;
using CefSharp.WinForms;
using System.Windows.Forms;

namespace WatchNow
{
    public class KeyboardHandler : IKeyboardHandler
    {
        public bool OnKeyEvent(IWebBrowser chromiumWebBrowser, IBrowser browser, KeyType type, int windowsKeyCode, int nativeKeyCode, CefEventFlags modifiers, bool isSystemKey)
        {
            return false;
        }

        public bool OnPreKeyEvent(IWebBrowser browserControl, IBrowser browser, KeyType type, int windowsKeyCode, int nativeKeyCode, CefEventFlags modifiers, bool isSystemKey, ref bool isKeyboardShortcut)
        {
            var chromiumWebBrowser = (ChromiumWebBrowser)browserControl;

            if ((Keys)windowsKeyCode == Keys.Escape)
            {
                chromiumWebBrowser.Invoke((MethodInvoker)delegate 
                {
                    bool fullScreen = Screen.FromControl(chromiumWebBrowser).Bounds.Size == chromiumWebBrowser.Size;
                    if (fullScreen)
                    {
                        chromiumWebBrowser.DisplayHandler.OnFullscreenModeChange(browserControl, browser, false);
                    }
                });
            }

            return false;
        }
    }
}

score 0 · Accepted Answer · answered Sep 17 '17 at 19:00

I've solved the issue by using GeckoFX web browser instead of using CefSharp.

I've choosen to use version 33 of GeckoFX due to a issue with the FullScreen API in version 45.

My solution:

...
Xpcom.Initialize(@"..\..\xulrunner");

GeckoPreferences.User["full-screen-api.enabled"] = true;
GeckoPreferences.Default["full-screen-api.enabled"] = true;

geckoWebBrowser1.EnableDefaultFullscreen();

geckoWebBrowser1.Navigate(url);

geckoWebBrowser1.GetDocShellAttribute().SetIsBrowserInsideApp(0);
geckoWebBrowser1.GetDocShellAttribute().SetFullscreenAllowed(true);
...

CefSharp OnFullscreenModeChange event

3 Answers3