Search code examples
c#.netwindows-phone-7webbrowser-controlembedded-video

Displaying embedded video in WP7 browser control - Updated

I have a youtube video that is embedded in an iframe on an html page. I am trying to display this video (i.e. a representation of the video with a button that you can click to launch the default wp7 video player) using the web browser control in a WP7 app. The browser refuses to display the video with button. Note: I updated the sample code below with a different embedded video. The test code is shown below:

    private void PageTitle_DoubleTap(object sender, GestureEventArgs e)
{
  string _htmlView = "<html><head><style type=\"text/css\">";
  _htmlView += " body { margin: 0; }";
  _htmlView += "</style></head><body>";
  _htmlView += "<iframe height=\"315\" src=\"http://www.youtube.com/embed/0KA4xPUJKtw?rel=0\" frameborder=\"0\" width=\"420\"></iframe>";

  _htmlView += "</body></html>";

  webBrowser.NavigateToString(_htmlView);

  // Navigating directly to the embedded video below does work though
  //webBrowser.Navigate(new Uri("http://www.youtube.com/embed/0KA4xPUJKtw?rel=0\"));

}

The XAML is 

<phone:PhoneApplicationPage 
x:Class="WebTest.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d" d:DesignWidth="480" d:DesignHeight="768"
FontFamily="{StaticResource PhoneFontFamilyNormal}"
FontSize="{StaticResource PhoneFontSizeNormal}"
Foreground="{StaticResource PhoneForegroundBrush}"
SupportedOrientations="Portrait" Orientation="Portrait"
shell:SystemTray.IsVisible="True">

<!--LayoutRoot is the root grid where all page content is placed-->
<Grid x:Name="LayoutRoot" Background="Transparent">
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>

    <!--TitlePanel contains the name of the application and page title-->
    <StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
        <TextBlock x:Name="ApplicationTitle" Text="MY APPLICATION" Style="{StaticResource PhoneTextNormalStyle}"/>
        <TextBlock x:Name="PageTitle" Text="page name" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}" DoubleTap="PageTitle_DoubleTap"/>
    </StackPanel>

    <!--ContentPanel - place additional content here-->
    <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
  <phone:WebBrowser x:Name="webBrowser" Margin="0,0,0,0" Width="Auto" IsScriptEnabled="True"/>


</Grid>
</Grid>

I get "The Adobe Flash Player or an HTML5 supported browser is required for video playback"

Anybody come across this issue and have some ideas on solving it?

Note: I am not able to control the content as it comes from a third party.

Solution

  • Unfortunately the embedded browser control does not behave the same as the native browser on Windows Phone 7.

    To have a placeholder image for a youtube video that the user can click on to start the video you'll need to create (or source) the image yourself.