wpfiframeyoutubecefsharpyoutube-iframe-api

How to display HD Youtube Playlist Videos with CefSharp in WPF window


I have these problem for quite some time now. At first I thought it requieres some time until youtube videos HD quality is available, but is already 2 weeks since that and nothing had change.

I have 2 different youtube PlayList(all videos uploaded in HD) that work different, one in HD an the other in SD, in a web project that is displayed in a WPF window with CefSharp.

I tried everything but I could not get this bad quality playlist in HD quality. The default quality in youtube channel is HD and if I open the index.html file in any other browser is also HD quality, but only in Cefsharp is not displaying the HD option.

In WPF window with CefSharp:

playlist with low quality

enter image description here

playlist with hd quality

enter image description here

In any browser (Mozilla firefox and Edge tested):

playlist with low quality

enter image description here

playlist with hd quality

enter image description here

After trying all possible settings, but nothing worked.

My currrent Cefsharp nugets: CefSharp.Common, CefSharp.Wpf and CefSharp.OffScreen version 109.1.110.

These are my current codes:

In Cefsharp settings

Cef.EnableHighDPISupport();
if (settings.CefCommandLineArgs.ContainsKey("enable-system-flash"))
{
  settings.CefCommandLineArgs["enable-system-flash"] = "0";
}
else
{
  settings.CefCommandLineArgs.Add("enable-system-flash", "0");
}
var featuresToDisable = "NetworkService,VizDisplayCompositor";
if (WpfUtils.IsDarkThemeUsed())
{
  settings.CefCommandLineArgs.Add("force-dark-mode", "1");
}
else
{
  featuresToDisable = $"{featuresToDisable},DarkMode";
}
settings.EnableAudio();
settings.CefCommandLineArgs.Add("no-proxy-server");
//settings.CefCommandLineArgs.Add("disable-plugins-discovery", "1");
//settings.CefCommandLineArgs.Add("disable-remote-playback-api", "1");
settings.CefCommandLineArgs.Add("disable-sync", "1");
settings.CefCommandLineArgs.Add("disable-wake-on-wifi", "1");
settings.CefCommandLineArgs.Add("disable-voice-input", "1");
settings.CefCommandLineArgs.Add("disable-features", featuresToDisable);
settings.CefCommandLineArgs.Add("disable-gpu-shader-disk-cache", "1");
settings.CefCommandLineArgs.Add("disable-gpu-vsync");
settings.SetOffScreenRenderingBestPerformanceArgs();
Cef.Initialize(settings, performDependencyCheck: false, browserProcessHandler: null);

In youtube player iframe

vid_frame[m] = new YT.Player('vid_frame' + m, {
            width: '1280',
            height: '720',
            videoId: vidIDs[n][0],
            host: 'https://www.youtube-nocookie.com',
            playerVars: {
              'html5': 1,
              'showinfo': showVideoInfo,
              'autoplay': 1,
              'disablekb': 1,
              'controls': showPlayerControls,
              'playsinline': 1,
              'modestbranding': 1,
              'hl': 'en-US',
              'rel': showRelatedVideos,
              'widget-referrer': 'resource://web'
        },
            frameborder: 0,
            enablejsapi: 1,
            events: {
              'onStateChange': onPlayerStateChange
            }
          });

I expect both playlist displaying videos in HD in Cefsharp and the browsers.

Does somebody know what could be the problem?

What are the viewing conditions that make effect in one list but not in the other?, refer to this link: iframe_api_reference


Solution

  • Resolution Problem

    There was a mistake when uploading the video in youtube, the format uploaded was 1920x1080, but it was not enough for the HD resolution option in CefSharp. After transforming the video into 4K and upload to youtube, it worked!