點擊不同的播放按鈕

我有一個進全的短片時如何更新YouTube視頻ID。當用戶點擊播放按鈕時，我想要將該特定視頻ID加載到YouTube API中找到的videoID變量中。現在，我已成功地在現場進行編程，以開始播放視頻每次播放按鈕被點擊，但是，ID（被指定爲編輯文章時使用ACF $video_id一個自定義字段）不更新的時間。下面是我進的樣子：點擊不同的播放按鈕

我試着將看player.loadVideoById，但沒有多少運氣。

這裏是我的YouTube API代碼：

function onYouTubeIframeAPIReady() { 
    player = new YT.Player("player", { 
     videoId: "HoVWmW0Zdmo", 
     playerVars: { 
      controls: '0', 
      html5: '1', 
      cc_load_policy: '0', 
      disablekb: '1', 
      iv_load_policy: '3', 
      modestbranding: '1', 
      showinfo: '0', 
      rel: '0', 
      autoplay: '0', 
     }, 
     events: { 
      "onReady": onPlayerReady, 
      "onStateChange": onPlayerStateChange 
     } 

    }); 
} 

//the id placed below is just a sample id to see if I could even get the ID to change...which I couldnt 
jQuery(".media-circle").on("click", function() { 
     player.loadVideoById("Vw4KVoEVcr0"); 
    });

這是播放按鈕的HTML代碼段。類.media-circle是包含覆蓋專輯插圖的playpause按鈕的圓形。

<div class="album-dark-overlay play"> 
    <div class="media-circle"> 
     <i class="icon ion-ios-play"></i><i class="icon ion-pause"></i> 
    </div> 
</div>

是否必須拉出帖子ID以便JavaScript知道要查找哪個視頻ID？

來源

2016-12-28 Jordan Lewallen

這就是我現在很困惑的東西。我正在使用用戶在編輯帖子時添加videoID的自定義字段。然後我把它變成一個php $ video_id = get_field（'video_id'）。 'media-circle'是圍繞播放按鈕的圓圈。所以當用戶點擊圓圈區域的任何地方時，播放按鈕（圓圈內）會切換到暫停按鈕（我已成功完成此部分）。我還設法在播放按鈕切換時觸發視頻開始播放，而不是鏈接到特定帖子的視頻，該視頻被點擊了@NewToJS –

您是如何傳遞新視頻ID的？它與'media-circle'元素被點擊有什麼關係？您需要傳遞新的視頻ID，以便玩家知道該玩什麼。目前，您每次點擊「媒體圈」時都會告訴它播放相同的視頻。爲什麼不給「媒體圈」一個「ID」，你可以將他的'ID'設置爲視頻ID，這樣當你點擊媒體圈時，你可以定位該元素的ID，播放器將知道哪個視頻玩...示例'player.loadVideoById（this.id）;' – NewToJS

@NewToJS我對loadVideoByID的理解是，它採用的參數是視頻的ID（一串隨機字符），而不是html元素？這個html元素如何鏈接到在帖子中發現的視頻？ –

如果使用player.loadVideoById("Vw4KVoEVcr0");它會播放視頻Vw4KVoEVcr0。

既然你有跟團的每一次media-circle所有元素的onclick事件偵聽器單擊該元素將繼續加載相同的視頻ID除非你告訴它來播放不同的ID。

當你構建的視頻效果/列表，你需要告訴它運行功能時ID應該發揮什麼樣的視頻。如果你給每個media-circle的ID相匹配的視頻應該發揮你可以針對觸發改變功能的元件的ID /加載新的視頻。

下面是一個例子。我已經設置了圖像的視頻IDID點擊時應該發揮。你可以看到他們全部共享同一個media-circle類。 JsFiddle Demo

演示的源代碼

HTML

<div id="player"></div><hr/> 
<img id="ovrGzbsQZqc" class="media-circle" src="http://i.ytimg.com/vi/ovrGzbsQZqc/0.jpg"/>Pegboard Nerds - Emoji VIP [Monstercat Official Music Video]<br> 
<img id="YnwsMEabmSo" class="media-circle" src="http://i.ytimg.com/vi/YnwsMEabmSo/0.jpg"/> Marshmello - Alone [Monstercat Official Music Video]<br> 
<img id="-7Ok0O2nQaA" class="media-circle" src="http://i.ytimg.com/vi/-7Ok0O2nQaA/0.jpg"/> Pegboard Nerds - Melodymania [Monstercat EP Release]<br>

的Javascript/jQuery的

var tag = document.createElement('script'); 
tag.src = "https://www.youtube.com/iframe_api"; 
var firstScriptTag = document.getElementsByTagName('script')[0]; 
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag); 
var player; 
function onYouTubeIframeAPIReady() { 
    player = new YT.Player('player', { 
     height: '200', 
     width: '350', 
     videoId: 'HoVWmW0Zdmo', 
     events: { 
      'onReady': onPlayerReady 
     } 
    }); 
} 
function onPlayerReady(event) { 
    event.target.playVideo(); 
} 
$(function() { 
    jQuery(".media-circle").on("click", function() { 
     player.loadVideoById(this.id); 
    }); 
});

CSS

img{max-height:100p;max-width:150px;}

如果您對源代碼的任何問題，上述請在下面發表評論，我會盡快回復您。

我希望這會有所幫助。快樂的編碼！

來源

2016-12-28 04:33:20 NewToJS

點擊不同的播放按鈕

回答

相關問題