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

Posted 2023-02-15

【中文标题】当页面视频全屏时，将 Webview2 切换到全屏

【英文标题】：Switch Webview2 to fullscreen when page video goes fullscreen

【发布时间】：2021-04-24 16:01:17

【问题描述】：

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

有人知道我该怎么做吗？

【问题讨论】：

分享你的代码，这样更容易理解

【参考方案1】：

当视频进入全屏模式时，它将覆盖WebView 控件的表面并引发一个事件，让您知道全屏模式已更改，然后由您决定做什么。如果您有一个设置为 Dock = Fill 的 WebVeiw 控件来填充表单，那么当视频进入全屏模式时处理该事件并让表单全屏显示就足够了。

正如另一个答案中提到的那样，当页面中 html 元素的全屏状态发生变化时，CoreWebView2.ContainsFullScreenElementChanged 将被提升。您可以处理该事件，然后检查 CoreWebView2.ContainsFullScreenElement 属性，该属性指示 WebView2 是否包含全屏 HTML 元素并根据该元素更改表单大小/模式。

示例

在此示例中，我在表单中添加了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;
        
    

【讨论】：

我使用了你展示的代码进行测试，是的，它把应用程序窗口变成了全屏，而不是 webview 本身。

如果您浏览例如 youtube 视频，然后单击视频的全屏按钮，则表单和视频将全屏显示。确保将Load 事件处理程序附加到Form1_Load。使用代码非常简单@Redstone145。

看了更多之后，webView 必须停靠在表单上。这是一个痛苦的原因，如果它没有停靠在表单上，​​那么只有表单变成全屏，如果我将它停靠到其他任何东西上，即使停靠到表单上，它仍然只会使表单全屏而不是 webview 本身。但是到目前为止，谢谢，您所提供的只是迄今为止唯一能产生结果的东西。

当视频全屏显示时，实际上它只是填充了 WebView 表面。如果你想让它填满整个表单，它基本上意味着 WebView 应该填满你的表单（Dock = Fill）。如果您有一个 WebView 是唯一子的表单，那么很容易，在设计模式下为 WebView 设置 Dock=Fill。但是，如果 WebView 不是唯一的孩子，您需要一些自定义逻辑来隐藏其余控件，然后停靠 WebView 以填充（进入全屏模式时）并在进入正常模式时撤消这些。

总的来说，我相信这是要走的路，并且帖子为您指明了正确的方向，但是您可能需要进行一些自定义以使其适合您的特定情况。希望你觉得它有用:)

【参考方案2】：

当WebView2 中的内容变为“全屏”时，它实际上只会填充WebView2 的区域，然后调度CoreWebView2.ContainsFullscreenElementChanged event。由宿主应用程序获取该事件并更改WebView2 控件的大小以填充屏幕或填充宿主应用程序窗口或适合该应用程序的任何内容。您可以在ContainsFullscreenElementChanged 事件文档中阅读更多相关信息，并查看sample code。

【讨论】：

我添加了一个 C# 示例。