Question

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

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

我的代码发布在下面。我应该指出，我对使用YouTube API完全不熟悉，并且阅读了很多关于它的网站，我很确定我在这里写的不是标准的！我已经尝试将其更改为使用iFrame并更好地理解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>

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

Answer 1

通过在视频网址的最后添加html5，将嵌入的视频网址转换为?html5=1

Answer 2

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

请尝试在.modalBackground css中添加以下内容：

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

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

嵌入的YouTube视频不会在Chrome或Safari中加载

2 个答案: