none
Render HTML5 content in WPF frame control

    Question

  • I'm trying to render an HTML5 page in the frame control in a WPF app, but somehow this doesn't seem to work. I've installed IE9 on my computer and did a couple of tweaks in the registry to force the application to use IE9 features. We have added a video using HTML5 features to test whether it works correctly.

    I'm using a little test script to detect the browser and it looks like the internet browser that is started in the frame is indeed an IE9, but the video on the page doesn't get displayed.

    I've tried the same page with a standard IE9 browser (outside of a WPF application) and the video is displayed correctly.

    Are there any known issues with the WPF frame control and HTML5 and/or the video feature of HTML5?

    Friday, October 28, 2011 8:47 AM

Answers

  • > I was wondering whether anyone knew of a problem with Frame and WebBrowser controls and HTML5 video embedding, but I guess it is a very specific constellation and not something that a lot of people have an issue with.

     
    there is not problem. just remember to specify the following tag:
     

    <meta http-equiv='X-UA-Compatible' content='IE=9' /> 
    
     

    below is an example. works fine for me.
     

    <Window x:Class="WpfApplication7.MainWindow"
            xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
            xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
            xmlns:local="clr-namespace:WpfApplication7"
            Title="MainWindow" Height="500" Width="550" FontSize="16">
    </Window>
    
    
    using System.Windows;
    using System.Windows.Controls;
    
    namespace WpfApplication7
    {
        public partial class MainWindow : Window
        {
            public MainWindow()
            {
                InitializeComponent();
                var wb = new WebBrowser();
                this.Content = wb;
                wb.NavigateToString(@"
                    <!DOCTYPE html>
                    <html>
                    <head>
                        <meta http-equiv='Content-Type' content='text/html; charset=unicode' />
                        <meta http-equiv='X-UA-Compatible' content='IE=9' /> 
                        <title></title>
                    </head>
                    <body>
                        <div>
                             <video autoplay='autoplay' preload='metadata'>
                                <source src='http://html5demos.com/assets/dizzy.mp4' type='video/mp4' />
                            </video>
                        </div>
                    </body>
                    </html>");
            }
        }
    }
    
    

    Friday, November 25, 2011 1:18 AM

All replies

  • > I'm trying to render an HTML5 page in the frame control in a WPF app, but somehow this doesn't seem to work.
     
     
    use WebBrowser for html5 rendering  
    <WebBrowser x:Name="myWebBrowser" />
    



    Friday, October 28, 2011 9:07 AM
  • Hi Anne SchuBler,

    I am marking your issue as "Answered", if you have new findings about your issue, please let me know.

     

    Best regards,


    Sheldon _Xiao[MSFT]
    MSDN Community Support | Feedback to us
    Get or Request Code Sample from Microsoft
    Please remember to mark the replies as answers if they help and unmark them if they provide no help.

    Wednesday, November 09, 2011 8:36 AM
    Moderator
  • No, sorry. It seems to me like that it could be a specific issue with videos.

    I tried using the WebBrowser control instead, but it didn't make a difference regarding displaying a video correctly.

    I currently have stopped investigating because I couldn't find anything on the internet about it and couldn't get it work properly. It seems like IE9 is used with HTML5, but the video issue persists. I was wondering whether anyone knew of a problem with Frame and WebBrowser controls and HTML5 video embedding, but I guess it is a very specific constellation and not something that a lot of people have an issue with.

    Thursday, November 24, 2011 2:53 PM
  • > I've tried the same page with a standard IE9 browser (outside of a WPF application) and the video is displayed correctly.


    could you please provide html which works in IE, but doesn't in WebBrowser?
    i'm wondering about !DOCTYPE and about html tag for the player.
     
    Thursday, November 24, 2011 3:05 PM
  • <!DOCTYPE html>
    <html>
    <head>
    <meta http-equiv=Content-Type content="text/html; charset=unicode">
    </head>
    
    <body>
      <video src="video.mp4" width="640" height="480" preload controls>
        This is an alternative text to be displayed when the video element is not supported in a browser.
      </video>
    </body>
    </html>

    This is a code sample. I just tried it both with IE9 and inside the Frame control.

    Please note that I don't get the alternative text in the Frame control which leads me to believe that the Frame control runs a browser which at least thinks that it is able to handle the video element.

    Any thoughts?

    Thursday, November 24, 2011 3:29 PM
  • > I was wondering whether anyone knew of a problem with Frame and WebBrowser controls and HTML5 video embedding, but I guess it is a very specific constellation and not something that a lot of people have an issue with.

     
    there is not problem. just remember to specify the following tag:
     

    <meta http-equiv='X-UA-Compatible' content='IE=9' /> 
    
     

    below is an example. works fine for me.
     

    <Window x:Class="WpfApplication7.MainWindow"
            xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
            xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
            xmlns:local="clr-namespace:WpfApplication7"
            Title="MainWindow" Height="500" Width="550" FontSize="16">
    </Window>
    
    
    using System.Windows;
    using System.Windows.Controls;
    
    namespace WpfApplication7
    {
        public partial class MainWindow : Window
        {
            public MainWindow()
            {
                InitializeComponent();
                var wb = new WebBrowser();
                this.Content = wb;
                wb.NavigateToString(@"
                    <!DOCTYPE html>
                    <html>
                    <head>
                        <meta http-equiv='Content-Type' content='text/html; charset=unicode' />
                        <meta http-equiv='X-UA-Compatible' content='IE=9' /> 
                        <title></title>
                    </head>
                    <body>
                        <div>
                             <video autoplay='autoplay' preload='metadata'>
                                <source src='http://html5demos.com/assets/dizzy.mp4' type='video/mp4' />
                            </video>
                        </div>
                    </body>
                    </html>");
            }
        }
    }
    
    

    Friday, November 25, 2011 1:18 AM
  • Great, that did the trick! Thanks a lot!
    Thursday, December 01, 2011 1:55 PM