停止使用Jquery滑塊播放YouTube視頻，使用Jquery

我有一個選項卡式的jquery滑塊，用於在頁面上顯示整體項目的元素。其中一件事恰好是一個YouTube視頻，但我沒有任何運氣能夠弄清楚當用戶點擊滑塊中的其他內容時如何停止視頻。停止使用Jquery滑塊播放YouTube視頻，使用Jquery

我看着其他計算器的問題，但無法找到任何這符合我想要的東西，除了在這裏：Stop a youtube video with jquery?

但似乎過度添加/刪除視頻的DOM，使這項工作何時可以通過vimeo視頻更簡單地完成。（見http://www.taprootfoundation.org/ ......不，我不能只用VIMEO：S）

我已經試過這樣：

$(document).read(function() { 
    $("ul#subNav li a").click(function() { 
     $('#video').stopVideo(); 
    }); 
});

我也試圖改變$('#video').stopVideo();到$(window).find(embed).stopVideo(); ...或者類似的東西，我不記得它在我的頭上。

而且我想這個問題，以及：

$(document).read(function() { 
    $("ul#subNav li a").click(function() { 
     var myPlayer = document.getElementById('video'); 
     myPlayer.stopVideo(); 
    }); 
});

「UL＃subNav李一」是我的鏈接，以控制滑塊「＃部影片」名單是我給嵌入對象的ID。（我使用舊的Youtube嵌入，而不是內聯框）。

任何想法如何使用youtube視頻專門做到這一點？

來源

2011-05-21 lzheidi

好吧，經過Google API文檔（谷歌擁有Youtube）的一些嚴重頭痛和困惑之後，我將自己的示例中的代碼拼湊在一起，以完成一些工作。這並不理想，因爲我不能100％地理解正在發生的事情，以及爲什麼當我試圖編寫自己的等價物時，事情並不奏效。

我的滑塊設置爲使用div作爲每個幻燈片的「容器」。這整個代碼進入我想在視頻中的DIV

<!--this is only displayed when the browser does not have flash or js --> 
<div id="ytapiplayer">You need Flash player 8+ and JavaScript enabled to view this video. 
</div> 

<script type="text/javascript"> 
//calls the video player by ID so it can be accessed later 
function onYouTubePlayerReady(playerId){ytplayer = document.getElementById("playerID");} 
    //playerID is arbitrary, what you would normally give to your object or embed element 
    var params = { allowScriptAccess: "always" };var atts = { id: "playerID" }; 

    //this next line totally replaces the object/embed element normally used. 
    //be careful when replacing the URL below, only replace the URL up to the question mark (the end of the video ID), the bits after that are REQUIRED for this to work. 
    //425/356 etc are sizes of the video 
    swfobject.embedSWF("http://www.youtube.com/e/videoID?enablejsapi=1&version=3&playerapiid=ytplayer","ytapiplayer", "425", "356", "8", null, null, params, atts); 

    //function to have the video play 
    function play() {if (ytplayer) {ytplayer.playVideo();}} 

    //function to have the video pause -- apparently using stopVideo isn't best practice. Check GoogleApi for more info: http://code.google.com/apis/youtube/js_api_reference.html#Playback_controls 
    function pause() {if (ytplayer) {ytplayer.pauseVideo();}} 
</script>

這是我的鏈接代碼，在一個完全不同的div發現：

<a href="#one" rel="1" onclick="pause();"> One</a> 
<a href="#two" rel="1" onclick="pause();"> Two</a> 
<a href="#three" rel="1" onclick="play();"> Three</a>

我認爲具有視頻自動播放（通過使用「播放（）;「在鏈接）包含視頻的div，但我認爲我其實不會那麼做，自動播放視頻讓我瘋狂在其他人的網站上，所以我不想讓其他人對我的自己的網站。

所以你有它。一些有效的代碼。雖然我不完全知道爲什麼。希望別人認爲這有幫助！

**不要忘記確保你的swfobject.js文件鏈接到你的頁面！我做這在我的文檔的頭：

<script src="http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js" type="text/javascript"></script><!--Uses Google API library-->

**更新：不以Safari或Firefox的工作，但確實在IE8和Chrome的工作。很想知道爲什麼，因爲它通常是Firefox或IE，它們自己並不擅長，而Safari則是基於Chrome的webkit。

任何想法你可能會有所幫助。在此之前，我將努力尋找新的解決方案，並在發現它時發佈它。

**更新＃2：實際上在所有四種主流瀏覽器（Chrome，Safari，Firefox 3.6,& IE8 - 未經過IE8或FF3.6以下的測試）都能正常工作。事實證明，我需要更新兩個Safari的插件和FF來支持Flash，因此非Flash消息實際上在顯示時應該具有。請想象我的臉掌。

Yay for working solutions！

來源

2011-05-27 05:50:15 lzheidi

更新的數字2：它實際上在所有四個主要瀏覽器（IE8，Chrome，Firefox和Safari - 尚未測試過低於IE8）中都能正常工作。 – lzheidi 2011-05-30 17:51:40

停止使用Jquery滑塊播放YouTube視頻，使用Jquery

回答

相關問題