[Silverlight] 如何在Silverlight 中撥放Youtube

2010/10/26

這方法不是正解,但是目前解決手上專案要的需求…XD
因為Silverlight 內建的 WebBrowser
在網頁上面無法顯示…

sshot-77
除非你做成Out-Of-Browser ..
所以我們要用一些3rd-party的元件 HtmlHost - 下載網址 : http://www.divelements.com/silverlight/tools.aspx


下載之後…
首先在左邊ToolBox 按下滑鼠右鍵 選擇 Choose Items
sshot-79


之後 選擇下載解壓縮後的 Divelements.SilverlightTools.dll
sshot-80

之後你會看到 HtmlHost 被框選起來… 就大膽按下OK ..
sshot-81

這時候你會看到左邊ToolBox 多了一個 HtmlHost
sshot-82

這時候你就可以把這元件拖到你想要放置的地方…

XMAL  Code 如下:

<UserControl x:Class="HTMLHost.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    d:DesignHeight="500" d:DesignWidth="520" xmlns:divtools="clr-namespace:Divelements.SilverlightTools;assembly=Divelements.SilverlightTools">

    <Grid x:Name="LayoutRoot" Background="Black" Loaded="LayoutRoot_Loaded" >
        <divtools:HtmlHost Width="480" Height="385"  SourceHtml="" HorizontalAlignment="Left" Margin="20,20,0,0" Name="htmlHost1" VerticalAlignment="Top" />
    </Grid>
</UserControl>

這時候你Run 會出現

Warning : The HtmlHost control should always be used with a windowless plugin. It cannot work reliably if this property is not specified.

sshot-83

這時候我們要修改一下 插入這一顆Silverlight 的HTML 語法…
加入windowless 屬性為true

修改後的Code 如下:

<div id="silverlightControlHost">
    <object data="data:application/x-silverlight-2," type="application/x-silverlight-2" width="100%" height="100%">
      <param name="source" value="ClientBin/HTMLHost.xap"/>
      <param name="onError" value="onSilverlightError" />
      <param name="background" value="white" />
      <param name="minRuntimeVersion" value="4.0.50401.0" />
      <param name="autoUpgrade" value="true" />
      <param name="windowless" value="true" />
      <a href="http://go.microsoft.com/fwlink/?LinkID=149156&v=4.0.50401.0" style="text-decoration:none">
           <img src="http://go.microsoft.com/fwlink/?LinkId=161376" alt="Get Microsoft Silverlight" style="border-style:none"/>
      </a>
    </object><iframe id="_sl_historyFrame" style="visibility:hidden;height:0px;width:0px;border:0px"></iframe></div>

重點就是加入那一行瞜…
<param name="windowless" value="true" />

這樣就可以正常執行了..

我在 LayoutRoot_Loaded 加入嵌入 youtube 的html語法
private void LayoutRoot_Loaded(object sender, RoutedEventArgs e)
{
    string strYoutubePath=
        "<object width='480' height='385'><param name='movie' value='http://www.youtube.com/v/5wh4DGklCsg?fs=1&amp;hl=zh_TW'></param><param name='allowFullScreen' value='true'></param><param name='allowscriptaccess' value='always'></param><embed src='http://www.youtube.com/v/5wh4DGklCsg?fs=1&amp;hl=zh_TW' type='application/x-shockwave-flash' allowscriptaccess='always' allowfullscreen='true' width='480' height='385'></embed></object>";

    this.htmlHost1.SourceHtml = strYoutubePath;
}

這樣就可以順利撥放瞜…

sshot-84


注意喔..在 內嵌網頁裡面案右鍵依然跟瀏覽器案右鍵是一樣的…

sshot-85

但是在外面按滑鼠右鍵依然是Silverlight
sshot-86

這是很簡單得做法可以在Silverlight 嵌入Youtube ..
至少不用去操煩 Media Encoding  的問題…

關於 Silverlight 嵌入網頁的技巧 可以參考 黃偉榮的學習筆記 - 五款Silverlight呈現HTML方式測試
silverlight embed youtube
讚一下:


展示:



下載:


0 意見:

程式 . 生活 . D小調.@2010 | Binary Design: One Winged Angel.