我在 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 会显示，在加载请求的视频之前显示前一个视频的停止实例片刻。毫无疑问，这也是我写这篇文章的奇怪方式的结果。