在 WebBrowser 控件中全屏播放 youtube

Posted

技术标签:

【中文标题】在 WebBrowser 控件中全屏播放 youtube【英文标题】:Playing youtube in full screen in WebBrowser control 【发布时间】:2012-07-04 23:32:56 【问题描述】:

我有以下 XAML:

<Window x:Class="WpfApplication1.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="MainWindow" Height="350" Width="525">

<Grid>

    <WebBrowser x:Name="webBrowser1"/>

</Grid>

我尝试播放 youtube 视频。这是我尝试过的:

this.webBrowser1.Source = new Uri("http://youtube.googleapis.com/v/L8bE5-g8VC0");

这个显示带有所有播放器控件的 YouTube 播放器。但是全屏按钮不起作用。我点击它,但播放器没有全屏显示。按钮变为禁用状态。

我也试过这个:

this.webBrowser1.Source = new Uri("http://www.youtube.com/embed/L8bE5-g8VC0");

这还会显示带有所有播放器控件的 YouTube 播放器。全屏按钮工作正常。但是,当我再次观看该视频或另一个视频(通过设置 Source 属性)时,播放器按钮会消失。要再次查看播放器按钮,我需要删除 IE 的临时 Internet 文件。我可以在每次播放视频之前删除临时文件,但这不是我的解决方案。

我正在运行 Windows 7 64 位并使用 WPF 4.0。我想要的是在我的 WebBrowser 中显示 YouTube 播放器并让全屏按钮正常工作。有人有什么想法吗?

【问题讨论】:

我不知道答案。但我认为有两种方法可以做到这一点。 1) 获取当前电脑的屏幕分辨率,并使用 GDI+/WPF 或其他东西扩展 webBrowser 的大小... 2) 尝试使用 javascript 进行操作,哪个 webbrowser 组件可以处理该 js 代码以提高嵌入 flash 对象的全屏。顺便提个有趣的问题.. 【参考方案1】:

对我有用的解决方案 - 构建一个带有嵌入式视频播放器的小型 html 页面:

public static class WebBrowserExtensions

    private static string GetYouTubeVideoPlayerHTML(string videoCode)
    
        var sb = new StringBuilder();

        const string YOUTUBE_URL = @"http://www.youtube.com/v/";

        sb.Append("<html>");
        sb.Append("    <head>");
        sb.Append("        <meta name=\"viewport\" content=\"width=device-width; height=device-height;\">");
        sb.Append("    </head>");
        sb.Append("    <body marginheight=\"0\" marginwidth=\"0\" leftmargin=\"0\" topmargin=\"0\" style=\"overflow-y: hidden\">");
        sb.Append("        <object width=\"100%\" height=\"100%\">");
        sb.Append("            <param name=\"movie\" value=\"" + YOUTUBE_URL + videoCode + "?version=3&amp;rel=0\" />");
        sb.Append("            <param name=\"allowFullScreen\" value=\"true\" />");
        sb.Append("            <param name=\"allowscriptaccess\" value=\"always\" />");
        sb.Append("            <embed src=\"" + YOUTUBE_URL + videoCode + "?version=3&amp;rel=0\" type=\"application/x-shockwave-flash\"");
        sb.Append("                   width=\"100%\" height=\"100%\" allowscriptaccess=\"always\" allowfullscreen=\"true\" />");
        sb.Append("        </object>");
        sb.Append("    </body>");
        sb.Append("</html>");

        return sb.ToString();
    

    public static void ShowYouTubeVideo(this WebBrowser webBrowser, string videoCode)
    
        if(webBrowser == null) throw new ArgumentNullException("webBrowser");

        webBrowser.NavigateToString(GetYouTubeVideoPlayerHTML(videoCode));
    

用法:

this.webBrowser1.ShowYouTubeVideo("L8bE5-g8VC0");

【讨论】:

以上是关于在 WebBrowser 控件中全屏播放 youtube的主要内容,如果未能解决你的问题,请参考以下文章

Ionic 3 - 内联视频在 iOS 10 的本机播放器中全屏打开

以纵向模式在videoview中全屏制作视频[重复]

java 在android webview中全屏播放HTML5视频。注意:我没有写这个,它来自http://stackoverflow.com/questions/

在 WebView 中全屏视频后隐藏菜单栏和停靠

带有自定义按钮的 HTML5 视频播放器无法在全屏模式下工作

托管 WebBrowser 控件尝试下载 Flash 内容而不是播放它