首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >当页面视频转到全屏时,将Webview2切换到全屏

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

Stack Overflow用户
提问于 2021-01-20 09:47:38
回答 2查看 2.3K关注 0票数 3

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

有人知道我是怎么做到的吗?

EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2021-01-22 19:00:54

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

正如在另一个答案中所提到的,当页面中的HTML元素的全屏状态发生变化时,将引发CoreWebView2.ContainsFullScreenElementChanged。您可以处理该事件,然后检查CoreWebView2.ContainsFullScreenElement属性,该属性指示WebView2是否包含全屏HTML元素,并在此基础上更改表单大小/模式。

示例

在本例中,我向表单中添加了一个FullScreen属性,并处理了ContainsFullScreenElement,并在窗体中切换了全屏模式和普通模式。

要使其工作,请确保窗体上有一个WebView控件,并将其Dock设置为Fill,然后处理表单的Load事件,如下所示:

代码语言:javascript
运行
复制
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;
        }
    }
}
票数 3
EN

Stack Overflow用户

发布于 2021-01-20 20:48:49

WebView2中的内容变成“全屏”时,它实际上只填充WebView2的区域,然后分派CoreWebView2.容器--全屏幕元素更改事件。由主机应用程序获取该事件,并更改WebView2控件的大小以填充屏幕或填充主机应用程序窗口或任何适合该应用程序的内容。您可以在ContainsFullscreenElementChanged事件文档中阅读更多有关这方面的内容,并参见样本代码

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/65806994

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档