[Problem/Bug]: High resolution videos are not displayed

[Sentak-Ita]

What happened?

When playing a 51201440 video using webview2's video tag, the audio is played, but the video is not displayed.
The image is displayed for videos of 40001440, but not for videos of 45001440.
Until 2023, videos of 51201440 were played normally, but from 2024 onwards they no longer play properly.

Importance

Important. My app's user experience is significantly compromised.

Runtime Channel

Stable release (WebView2 Runtime)

Runtime Version

120.0.2210.121

SDK Version

1.0.2210.55

Framework

Winforms

Operating System

Windows 10

OS Version

19045.3803

Repro steps

Specify a 5120*1440 video with the video tag of webview2.
When I check videoWIdth and videoHeight in developer tools, they are set to 0.

Thanks

Repros in Edge Browser

Yes

Regression

Don't know

Last working version (if regression)

No response

[johna-ms]

@Sentak-Ita apologies for the delayed response. There is not an officially supported video tag on the WinForms WebView2 control. I'm how you are displaying video in this case. Maybe I'm just misreading some terminology. Could you elaborate or provide some sample code for your scenario?

[Sentak-Ita]

Provide sample code.
It is created using Winforms of .netframework 7.0.
Replace MOVIE_FILE_PATH in Program.cs with your video file path.
Thanks

・Program.cs

using Microsoft.Web.WebView2.Core;

namespace sample
{
    public partial class Form1 : Form
    {
        private string MOVIE_FILE_PATH = @"your movie file path";

        private System.ComponentModel.IContainer components = null;
        private Microsoft.Web.WebView2.WinForms.WebView2 webView21;

        public Form1()
        {
            InitializeComponent();

            this.Load += (sender, e) => { InitializeWebViewAsync(); };
            webView21.NavigationCompleted += async (sender, e) => { await webView21.ExecuteScriptAsync($"document.getElementsByTagName('video')[0].src = 'file:///{MOVIE_FILE_PATH}';"); };
        }

        public async void InitializeWebViewAsync()
        {
            var options = new CoreWebView2EnvironmentOptions("--disable-web-security --user-data-dir --disable-site-isolation-trials");
            var environment = await CoreWebView2Environment.CreateAsync(null, null, options);

            await webView21.EnsureCoreWebView2Async(environment);

            var uri = new UriBuilder(Path.Combine(Application.StartupPath, "index.html"));
            webView21.CoreWebView2.Navigate(uri.ToString());
        }

        protected override void Dispose(bool disposing)
        {
            if (disposing && (components != null))
            {
                components.Dispose();
            }
            base.Dispose(disposing);
        }

        private void InitializeComponent()
        {
            webView21 = new Microsoft.Web.WebView2.WinForms.WebView2();
            ((System.ComponentModel.ISupportInitialize)webView21).BeginInit();
            SuspendLayout();
            // 
            // webView21
            // 
            webView21.AllowExternalDrop = true;
            webView21.CreationProperties = null;
            webView21.DefaultBackgroundColor = Color.Black;
            webView21.Dock = DockStyle.Fill;
            webView21.Location = new Point(0, 0);
            webView21.Name = "webView21";
            webView21.Size = new Size(477, 236);
            webView21.TabIndex = 0;
            webView21.ZoomFactor = 1D;
            // 
            // Form1
            // 
            AutoScaleDimensions = new SizeF(7F, 15F);
            AutoScaleMode = AutoScaleMode.Font;
            ClientSize = new Size(800, 450);
            Controls.Add(webView21);
            Name = "Form1";
            Text = "Form1";
            ((System.ComponentModel.ISupportInitialize)webView21).EndInit();
            ResumeLayout(false);
        }
    }
    internal static class Program
    {
        [STAThread]
        static void Main()
        {
            ApplicationConfiguration.Initialize();
            Application.Run(new Form1());
        }
    }

}

・index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="Content-Security-Policy" content="default-src 'self' 'unsafe-inline';" />
</head>
<body>
    <video autoplay></video>
</body>
</html>

[johna-ms]

Could you upload or link a test video with that resolution? I'm unable to check the repro myself. Youtube videos max resolution does not go to 5120x1440. Could you confirm does this repro in the edge browser?

[Sentak-Ita]

Upload the sample file.
Videos are 51201440 and 38701440. (Sorry, 4000*1440 video cannot be prepared.)
I also attach the results displayed in the PC browser.

Thanks

sample_video.zip

[johna-ms]

@Sentak-Ita I'm unable to play that video in the normal edge browser or in chrome. This is appears to be a chromium level issue, please file a bug on them. https://www.chromium.org/for-testers/bug-reporting-guidelines/

[Sentak-Ita]

I was able to play the video in Chrome browser, so it might be an issue with Edge browser. I'll try reporting a bug.
thank you very much.