winforms 如何在webViewer中显示YouTube视频？

mwg9r5ms 于 2022-11-17 发布在其他

关注(0)|答案(2)|浏览(174)

我正在尝试在C# WinForm中播放视频。
以下是我目前所掌握的情况：
我的表单中有一个webViewer控件，以及以下代码：

// Play YouTube video in webBrowser1
string url = "https://www.youtube.com/watch?v=5aCbWqKl-wU";
string html = "<html><head>";
html += "<meta content='IE=Edge' http-equiv='X-UA-Compatible'/>";
html += "<iframe id='video' src='https://www.youtube.com/embed/{0}' style=\"padding: 0px; width: 100%; height: 100%; border: none; display: block;\" allowfullscreen></iframe>";
html += "</body></html>";
webBrowser1.DocumentText = string.Format(html, url.Split('=')[1]);

以下是我运行应用时的外观：

问题是视频没有填满整个webViewer（即图像中的白色部分）。

我将webViewer1.Anchor属性设置为all，因此当我调整表单大小时，webViewer会根据表单调整大小。

备注：

当用户点击全屏按钮时，问题就解决了。但这对我来说是一个糟糕的解决方案，因为这对用户来说是一个糟糕的体验。另外，用户可能不知道他们需要点击全屏按钮。它看起来像这样：

如何让视频占据整个webViewer而无需用户单击全屏按钮？

另外，作为一个附带问题，当用户点击“YouTube”按钮时，它会打开Internet Explorer，而不是默认的浏览器。

winforms

来源：https://stackoverflow.com/questions/73795000/how-do-i-display-a-youtube-video-in-webviewer

2条答案

按热度按时间

6pp0gazn1#

您需要修复页面的样式：

// Play YouTube video in webBrowser1
string url = "https://www.youtube.com/watch?v=5aCbWqKl-wU";
string html = "<html style='width: 100%; height: 100%; margin: 0; padding: 0;'><head>";
html += "<meta content='IE=Edge' http-equiv='X-UA-Compatible'/>";
html += "</head><body style='width: 100%; height: 100%; margin: 0; padding: 0;'>";
html += "<iframe id='video' src='https://www.youtube.com/embed/{0}' style=\"padding: 0px; width: 100%; height: 100%; border: none; display: block;\" allowfullscreen></iframe>";
html += "</body></html>";
webBrowser1.DocumentText = string.Format(html, url.Split('=')[1]);

这确保了HTML和BODY标记占据了页面的100%，并且允许子iframe占据页面的100%。

<html style='width: 100%; height: 100%; margin: 0; padding: 0;'>
    <head>
        <meta content='IE=Edge' http-equiv='X-UA-Compatible'/>
    </head>
    <body style='width: 100%; height: 100%; margin: 0; padding: 0;'>
        <iframe id='video' src='https://www.youtube.com/embed/5aCbWqKl-wU' style="padding: 0px; width: 100%; height: 100%; border: none; display: block;" allowfullscreen></iframe>
    </body>
</html>

赞(0）回复(0）举报 2022-11-17

wqnecbli2#

我认为你需要设置一个纵横比。
https://www.w3schools.com/howto/howto_css_responsive_iframes.asp

赞(0）回复(0）举报 2022-11-17