Silverlight视频播放器重叠web元素

时间:2012-07-12 14:46:01

标签: javascript css silverlight-4.0

我的网站上有一个嵌入式Silverlight视频播放器,它通过iframe(托管在Azure上)加载。

在我们的网站上,顶部导航有点长,它实际上显示在您无法看到菜单的银色灯光播放器后面。

我已经看了几个选项来解决这个问题,看起来设置windowless = true属性应该可以工作(http://msdn.microsoft.com/en-us/library/cc838156(v=vs.95).aspx)..这个解决方案似乎适用于IE,但是在Chrome和Firefox中如果windowless设置为true,尝试下载页面。任何想法,想法?

1 个答案:

答案 0 :(得分:0)

经过多次尝试后,我们终于能够将其用于:IE,Firefox和Chrome。


在对象数据中设置以下标记:

       <param name="background" value="transparent">
       <param name="windowless" value="true">

还在initprams中将autoload和autoplay设置为true。

       <AutoLoad>true</AutoLoad>
       <AutoPlay>true</AutoPlay>

这就是我们正在使用的完整html:


       <object data="data:application/x-silverlight," type="application/x-silverlight" width="100%" height="100%">
        <param name="source" value="MediaPlayerTemplate.xap"/>
        <param name="background" value="transparent" />
        <param name="windowless" value="true" />
        <param name="onerror" value="onSilverlightError" />
        <param name="autoUpgrade" value="true" />
        <param name="minRuntimeVersion" value="3.0.40624.0" />            
        <param name="enableHtmlAccess" value="true" />
        <param name="enableGPUAcceleration" value="true" />
        <param name="initparams" value='playerSettings = 
                    <Playlist>
                        <AutoLoad>true</AutoLoad>
                        <AutoPlay>true</AutoPlay>
                        <DisplayTimeCode>false</DisplayTimeCode>
                        <EnableCachedComposition>true</EnableCachedComposition>
                        <EnableCaptions>true</EnableCaptions>
                        <EnableOffline>true</EnableOffline>
                        <EnablePopOut>true</EnablePopOut>
                        <StartMuted>false</StartMuted>
                        <StretchMode>None</StretchMode>
                        <Items>
                            <PlaylistItem>
                                <AudioCodec>WmaProfessional</AudioCodec>
                                <Description></Description>
                                <FileSize>90818591</FileSize>
                                <FrameRate>5</FrameRate>
                                <Height>384</Height>
                                <IsAdaptiveStreaming>false</IsAdaptiveStreaming>
                                <MediaSource>i201700-1.wmv</MediaSource>
                                <ThumbSource>201700-1_Thumb.jpg</ThumbSource>
                                <Title>201700-1</Title>
                                <VideoCodec>VC1</VideoCodec>
                                <Width>512</Width>
                            </PlaylistItem>
                        </Items>
                    </Playlist>'/>       
        <!--  unused valid silverlight init parameters
        <param name="enableFrameRateCounter" value="bool" />
        <param name="enableRedrawRegions" value="bool" />
        <param name="maxFrameRate" value="int" />
        <param name="allowHtmlPopupWindow" value="bool"/>
        <param name="background" value="colorValue"/>
        <param name="splashScreenSource" value="uri"/>
        <param name="fullScreen" value="bool"/>
        <param name="onFullScreenChanged" value="functionname"/>
        <param name="onResize" value="functionname"/>
        <param name="onSourceDownloadComplete" value="functionname"/>
        <param name="onSourceDownloadProgressChanged" value="functionname"/>
        <param name="windowLess" value="bool"/>
         --> 

         <div onmouseover="highlightDownloadArea(true)" onmouseout="highlightDownloadArea(false)">
                <img src="700-1_Thumb.jpg" style="position:absolute;width:100%;height:100%;border-style:none;" onerror="this.style.display='none'"/>
                <img src="Preview.png" style="position:absolute;width:100%;height:100%;border-style:none;" onerror="this.style.display='none'"/>                                            
                <div id="overlay" class="fadeLots" style="position:absolute;width:100%;height:100%;border-style:none;background-color:white;"/></div>
                <table width="100%" height="100%" style="position:absolute;"><tr><td align="center" valign="middle">                       
                <img src="http://go2.microsoft.com/fwlink/?LinkId=108181" alt="Get Microsoft Silverlight"> 
                </td></tr></table>                   
                <a href="http://go2.microsoft.com/fwlink/?LinkID=124807">
                    <img src="" class="fadeCompletely" style="position:absolute;width:100%;height:100%;border-style:none;" alt="Get Microsoft Silverlight"/>
                </a>                   
         </div>             
    </object>