如何通過點擊封面圖片（jQuery）來啓動YouTube視頻？

我有一些可以正常顯示YouTube視頻的代碼。如何通過點擊封面圖片（jQuery）來啓動YouTube視頻？

我想要的是當我點擊封面圖片時，它應該開始播放視頻。

我該如何實現它？

謝謝！

<div id="video" style="display: none;"> 
      <object width="370" height="230"> 
       <param name="movie" value="http://www.youtube.com/v/QN20iMIMxvk?version=3&autohide=1&showinfo=0"> 
       </param> 
       <param name="allowScriptAccess" value="always"></param> 
       <embed src="http://www.youtube.com/v/QN20iMIMxvk?version=3&autohide=1&showinfo=0" 
        type="application/x-shockwave-flash" allowscriptaccess="always" width="370" height="230"></embed> 
      </object> 
     </div> 
     <a href="javascript:document.getElementById('video').style.display = 'block'; javascript:document.getElementById('videopic').style.display = 'none'; void(0);"> 
      <img id="videopic" src="@Url.Content("~/images/coverimage1.jpg")" style="width:370px; height:230px;" alt="Media" /></a>

來源

2012-01-16 Academy of Programmer

我找到了解決方案。

實施http://code.google.com/p/swfobject/
添加2個JS功能

功能的playVideo（） { 的document.getElementById（ '視頻'）的style.display = '塊'。 document.getElementById（'videopic'）。style.display ='none'; }

功能onYouTubePlayerReady（playerId）{
變種YouTube播放=的document.getElementById（「myytplayer」）;如果（ytplayer）{ ytplayer.playVideo（）; }}

，並使用代碼來顯示YouTube視頻&封面圖片

< DIV ID = 「視頻」的風格= 「顯示：無;」> 您需要安裝Flash Player 8 +和已啓用JavaScript以查看此視頻。

    var params = { allowScriptAccess: "always" }; 
        var atts = { id: "myytplayer" }; 
        swfobject.embedSWF("http://www.youtube.com/v/QN67iMIMxvk?enablejsapi=1&playerapiid=ytplayer&version=3", 
          "ytapiplayer", "370", "230", "8", null, null, params, atts); 

       </script> 
      </div> 
      <img id="videopic" src="@Url.Content("~/images/coverimage1.jpg")" onclick="playvideo();" style=" cursor:pointer; width:370px; height:230px;" alt="" />

來源

2012-01-16 13:29:11

如何通過點擊封面圖片（jQuery）來啓動YouTube視頻？

回答

相關問題