嵌入的YouTube視頻不要加載到Chrome或Safari

我已經在ASP.NET中編寫了一個頁面，該頁面顯示一個GridView，從YouTube播放列表填充，顯示該播放列表中的視頻列表，每個視頻都有自己的視頻行。用戶可以點擊縮略圖在ModalPopup面板中打開視頻並開始自動播放。嵌入的YouTube視頻不要加載到Chrome或Safari

這適用於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>

P.S.當你在這裏時，unloadVideo函數似乎也不起作用。當用戶觀看一個視頻時，點擊另一個視頻的縮略圖觀看ModalPopup顯示的那一個，在加載所請求的視頻之前片刻顯示先前視頻的停止實例。毫無疑問，這也是我寫這個奇怪方式的結果。

來源

2013-06-18 Philip Stratford

你在Chrome/Safari中檢查過控制檯嗎？有沒有錯誤？另外，請檢查IE和Firefox控制檯，確保它們不顯示可能導致Webkit出錯的警告。 – gretro

你有ScriptManager或ToolkitScriptManager嗎？ – kobe

由去年的11位字符

來源

2014-03-25 15:21:21

Chrome或Safari瀏覽器是一個Webkit瀏覽器有時行爲與IE \ FF不同的附加?html5=1轉換你的嵌入式視頻網址爲html5。

請儘量添加到您的.modalBackground CSS以下行：

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

，並確保您使用的是ToolkitScriptManager而不是使用的ScriptManager。

來源

2014-03-27 09:28:11 kobe

嵌入的YouTube視頻不要加載到Chrome或Safari

回答

相關問題