單擊按鈕時嵌入式YouTube視頻中的更改時間

我想嵌入YouTube視頻並提供按鈕，當您單擊它們時，會在視頻的特定時間內繼續播放。我使用jQuery和更改「src」屬性，像這樣嘗試：單擊按鈕時嵌入式YouTube視頻中的更改時間

原始來源：

<iframe src="http://www.youtube.com/embed/PjDw3azfZWI?&t=5m30s&rel=0&amp">

JS：

$("#link1").click(function() { 
    $("#video").attr("src", "http://www.youtube.com/embed/PjDw3azfZWI?&t=10m30s&rel=0&amp"); 
});

這導致刷新瀏覽器當我點擊按鈕。我想：http://i.imgur.com/sCFZSIn.png。點擊按鈕應使視頻跳轉到指定的時間。

來源

2014-10-08 Lightvvind

增加'＆t = 37'其中「37」是進入視頻的時間量應該做的伎倆。例如這是19秒到這個視頻... https://www.youtube.com/watch?v=WoZ2kTlwKTk&t=19（石玫瑰 - 愚人的黃金 - 如果你想知道;-) – scunliffe 2014-10-08 12:59:02

這只是刷新頁面 – Lightvvind 2014-10-08 13:08:35

@Lightvvind，我的答案是否適合你？ – 2014-10-08 15:06:20

您不應該重新加載iframe來控制視頻;使用Javascript API方法。退房seekTo here：https://developers.google.com/youtube/iframe_api_reference#Playback_controls

基本上，一旦你的iframe加載，JS API將調用onYouTubeIframeAPIReady（），在那裏你構造一個YouTube播放器對象。然後，您可以使用該播放器參考來控制視頻，例如player.seekTo（）。

你仍然可以使用你的iframe，截至this section的鈕描述：

正如在入門一節中提到的，而不是你的網頁上寫的空元素，該播放器API的JavaScript 代碼將用一個元素替換，您可以自己創建標籤。

...

如果你寫的代碼，那麼當你構建YT.Player對象，你並不需要爲寬度和高度，被指定爲標籤的屬性指定值，或者是在src URL中指定的videoId和player參數。

您的代碼缺失的部分是YT.Player對象，您必須在上述回調方法中構造該對象。這提供了對玩家控制的訪問。

這裏有一個Fiddle示範：

var player, seconds = 0; 
function onYouTubeIframeAPIReady() { 
    console.log("player"); 
    player = new YT.Player('player', { 
     events: { 
      'onReady': onPlayerReady 
     } 
     }); 
} 

function onPlayerReady(event) { 
    event.target.playVideo(); 
} 

function seek(sec){ 
    if(player){ 
     seconds += sec; 
     player.seekTo(seconds, true); 
    } 
}

你可以把這個代碼在一個單獨的腳本，但要確保它是在根範圍內（如在你的頭標記），而不是把它放在一個onLoad處理。

來源

2014-10-08 13:02:37

如何用angulas js控制器做到這一點？我試圖在控制器中使用這些函數，然後加載了api腳本以及資源。但它仍然行不通？ – Sham332 2015-08-02 16:20:20

單擊按鈕時嵌入式YouTube視頻中的更改時間

回答

相關問題