0

我在 ASP.NET 中编写了一个页面，它显示了一个从 YouTube 播放列表填充的 GridView，显示了该播放列表中的视频列表，每个视频都在自己的行中。用户可以单击缩略图在 ModalPopup 面板中打开视频并自动开始播放。

这在 Internet Explorer 10 和 Firefox 中运行良好，但在 Chrome 或 Safari 中却不行。在后两种浏览器中，不是视频加载，而是视频应该在的地方有一个很大的空白区域，没有任何反应。我希望有人能帮我找出原因。

我的代码发布在下面。我应该指出，我对使用 YouTube API 完全陌生，并且在阅读了很多关于它的网站后，我很确定我在这里写的不是标准的！我试图将其更改为使用 iFrames 并更好地理解 API，以使我的 JavaScript 更像我在 YouTube API 教程中看到的那样，但它似乎从来没有工作过，而我所写的却是。所以我正在使用“如果它没有损坏......”的方法。但是，如果有人有时间和倾向告诉我如何以更正确的方式重写它，那就太棒了。如果没有，我们将非常感谢您帮助将视频加载到 Chrome 和 Safari 中。

<%--Javascript--%>
<script type="text/javascript" >
    var jsvideoid

    function play() {
        var ytplayer = document.getElementById('ytplayer');
        if (ytplayer) {
            ytplayer.playVideo();
        }
    }
    function stop() {
        var ytplayer = document.getElementById('ytplayer');
        if (ytplayer) {
            ytplayer.stopVideo();
        }
    }
    function loadVideo(id, startSeconds) {
        var ytplayer = document.getElementById('ytplayer');
        if (ytplayer) {
            ytplayer.loadVideoById(id, startSeconds);
        }
    }
    function unloadVideo() {
        var ytplayer = document.getElementById('ytplayer');
        if (ytplayer) {
            ytplayer.destroy();
        }
    }
</script> 

<asp:button ID="btnWatch" runat="server" Text="Watch" Height="30px" style="display:none" />
<div id="plVideo" runat="server" class="modalPopup" >
    <embed id="ytplayer" width="640" height="480" allowfullscreen="true" allowscriptaccess="always" style="" name="ytplayer"
        src='http://www.youtube.com/apiplayer?enablejsapi=1&version=3&modestbranding=1&rel=0&theme=light&playerapiid=ytplayer' >
    <br />
    <asp:Button ID="btnCloseVideo" runat="server" Text="Close" OnClientClick="stop()" />
</div>
<asp:ModalPopupExtender ID="mpVideo" runat="server" PopupControlID="plVideo" TargetControlID="btnWatch" CancelControlID="btnCloseVideo" BackgroundCssClass="modalBackground" ClientIDMode="Static" >
<Animations>
        <OnShown>
            <Parallel Duration="2" Fps="30">
                <FadeIn Duration=".5" Fps="30" />
                <ScriptAction Script="loadVideo(jsvideoid,0)" />
            </Parallel>
        </OnShown>
        <OnHiding>
            <Parallel Duration="2" Fps="30">
                <FadeOut Duration=".5" Fps="30" />
                <ScriptAction Script="unloadVideo()" />
            </Parallel>
        </OnHiding>
    </Animations>
</asp:ModalPopupExtender>


<asp:GridView ID="gvPlaylist" runat="server" AutoGenerateColumns="false" EnableViewState="false" ShowHeader="false" BorderStyle="none" CssClass="playlistgrid" >
    <Columns>
        <asp:TemplateField ItemStyle-CssClass="thumbnail">
            <ItemTemplate>                               
                <img src='http://img.youtube.com/vi/<%# Eval("videoId") %>/0.jpg' width="240" height="180" 
                    onclick="$find('<%=mpVideo.ClientID%>').show();jsvideoid='<%# Eval("videoId")%>';" style="cursor:pointer;" />           
            </ItemTemplate>
        </asp:TemplateField>
        <asp:TemplateField ItemStyle-CssClass="description" >
            <ItemTemplate>
                <label class="title" style="cursor:pointer;"><%# Eval("title") %></label><br />
                <b>Duration: </b><%# TimeSpan.FromSeconds(Eval("duration")).ToString%>       
            </ItemTemplate>
        </asp:TemplateField>
    </Columns>
</asp:GridView>
<asp:XmlDataSource ID="xmlPlaylist" runat="server" TransformFile="PlaylistTransform.xslt" >
</asp:XmlDataSource>

PS 当你在这里时，unloadVideo 功能似乎也不起作用。当用户观看一个视频，然后单击另一个视频的缩略图来观看该视频时，ModalPopup 会显示，在加载请求的视频之前显示前一个视频的停止实例片刻。毫无疑问，这也是我写这篇文章的奇怪方式的结果。

4

2 回答 2

0

通过在您的视频网址的最后html5附加来将您的嵌入式视频网址转换为?html5=1

于 2014-03-25T15:21:21.200 回答
0

Chrome 或 Safari 是Webkit浏览器，有时行为与 IE\FF 不同。

请尝试在您的.modalBackgroundCSS 中添加以下行：

.modalBackground
{
   ...
   z-index:10000;
   ...
}

并确保您使用的是 ToolkitScriptManager 而不是使用 ScriptManager。

于 2014-03-27T09:28:11.137 回答