当页面视频全屏时将 Webview2 切换到全屏

Switch Webview2 to fullscreen when page video goes fullscreen

我有一个网页,基本上是一个带有自定义控件的视频,已放在 webview2 中,当我尝试使用该页面具有的全屏控件时,它不会进入全屏。 我没有对代码进行任何更改,因为它是一个全新的 webview2 和项目。

有人知道我该怎么做吗?

WebView2 中的内容变为“全屏”时,它实际上只填充 WebView2 的区域,然后调度 CoreWebView2.ContainsFullscreenElementChanged event. It is up to the host app to get that event and change the size of the WebView2 control to fill the screen or fill the host app window or whatever is appropriate for that application. You can read more about this in the ContainsFullscreenElementChanged event documentation and see sample code

当视频进入全屏模式时,它会覆盖WebView控件的表面并引发一个事件让你知道全屏模式已经改变,然后由你决定该怎么办。如果您有一个设置为 Dock = Fill 的 WebVeiw 控件来填充表单,当视频进入全屏模式时您可以处理该事件,然后使您的表单全屏显示。

正如另一个答案中提到的那样,当页面中 HTML 元素的全屏状态更改时 CoreWebView2.ContainsFullScreenElementChanged will be raised. You can handle that event and then check the CoreWebView2.ContainsFullScreenElement 属性 指示 WebView2 是否包含全屏HTML 元素并根据该元素更改表单 size/mode。

例子

在此示例中,我在我的表单中添加了 FullScreen 属性 并处理了 ContainsFullScreenElement 并在我的表单中在全屏模式和正常模式之间切换。

要使其正常工作,请确保您的表单上有一个 WebView 控件并将其 Dock 设置为 Fill,然后处理 Load 事件形式如下:

private async void Form1_Load(object sender, EventArgs e)
{
    webView21.Source = new Uri("https://youtube.com");
    await webView21.EnsureCoreWebView2Async();
    webView21.CoreWebView2.ContainsFullScreenElementChanged += (obj, args) =>
    {
        this.FullScreen = webView21.CoreWebView2.ContainsFullScreenElement;
    };
}

private bool fullScreen = false;
[DefaultValue(false)]
public bool FullScreen
{
    get { return fullScreen; }
    set
    {
        fullScreen = value;
        if (value)
        {
            this.WindowState = FormWindowState.Normal;
            FormBorderStyle = FormBorderStyle.None;
            WindowState = FormWindowState.Maximized;
        }
        else
        {
            this.Activate();
            this.FormBorderStyle = FormBorderStyle.Sizable;
            this.WindowState = FormWindowState.Normal;
        }
    }
}