Youtube API - 使用“this”播放当前视频

Question

我使用的是YouTube API，我想播放当前被点击的视频并停止它，但我的问题是我使用相同的ID每个视频，我想用选择器“this”来播放或停止当前的视频，但我不知道该怎么做。

这是我的代码：

<script src="https://www.youtube.com/iframe_api"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
 

 
<div class="embeded-video"> 
 
    <iframe id="player" type="text/html" width="348" height="196" 
 
    src="http://www.youtube.com/embed/M7lc1UVf-VE?enablejsapi=1&fs=0&showinfo=0&rel=0" 
 
    frameborder="0"></iframe> 
 
</div> 
 
<div class="controls"> 
 
    <input type="button" value="Play" onclick="play();"> 
 
    <div id="stop">Stop</div> 
 
</div> 
 

 
<div class="embeded-video"> 
 
    <iframe id="player" type="text/html" width="348" height="196" 
 
    src="http://www.youtube.com/embed/M7lc1UVf-VE?enablejsapi=1&fs=0&showinfo=0&rel=0" 
 
    frameborder="0"></iframe> 
 
</div> 
 
<div class="controls"> 
 
    <input type="button" value="Play" onclick="play();"> 
 
    <div id="stop">Stop</div> 
 
</div> 
 

 
<script> 
 
    $(document).ready(function(){ 
 
    \t $("#stop").click(function(){ 
 
    \t \t var video = $(this).closest(".controls").prev().find("#player").attr("src"); 
 
    \t \t $(this).closest(".controls").prev().find("#player").attr("src",""); 
 
    \t \t $(this).closest(".controls").prev().find("#player").attr("src",video); 
 
\t }); 
 
    }); 
 

 
    var player; 
 
    function onYouTubeIframeAPIReady() { 
 
    player = new YT.Player('player'); 
 
    } 
 
    function play(){ 
 
    player.playVideo(); 
 
    player.setVolume(100); 
 
    } 
 
</script>

任何人可以帮助我吗？

Answer 1

也许类似this可以帮助你。基本上，我制作了一个通用代码，要求将视频容器div添加到您的代码中，以识别每个视频的容器并播放或停止特定视频。

var players = {}; 
function onYouTubeIframeAPIReady() { 
    $('.player').each(function(){ 
     var $this = $(this); 
     var playerId = $this.attr('id'); 
     players[playerId] = new YT.Player(playerId); 
    }); 
} 
$('.play').click(function(){ 
    var $this = $(this); 
    var currentPlayer = $this.parents('.video-container').find('.player'); 
    players[currentPlayer.attr('id')].playVideo(); 
}); 
$('.stop').click(function(){ 
    var $this = $(this); 
    var currentPlayer = $this.parents('.video-container').find('.player'); 
    players[currentPlayer.attr('id')].stopVideo(); 
});