多个自定义 Vimeo 播放按钮

Question

我一直在寻找一种创建自定义 Vimeo 播放按钮的方法，我找到了 Chris Coyier 的这个解决方案。就像我也需要它一样工作，但我不知道如何让它与页面上的多个视频一起工作。

我已将 .getElementById() 替换为 .getElementsByClassName() 并且我希望使用 .closest() 将每个按钮与视频联系起来，但到目前为止还没有运气。

http://codepen.io/anon/pen/VYLrXP

HTML

<div class="video_contain">
  <iframe src="//player.vimeo.com/video/80312270?api=1" width="500" height="281" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen class="video"></iframe>

  <div class="play-button">
    play 
  </div>
</div>

JS - 包括 Frogaloop

var iframe = document.getElementsByClassName('video');

// $f == Froogaloop
var player = $f(iframe);

// bind events
var playButton = document.getElementsByClassName("play-button");
playButton.addEventListener("click", function() {
   player.api("play");
   $(this).hide();
});

有人可以帮忙吗？

Answer 1

最后我没有使用 Frogaloop 的东西 - 我做了一些简单的 jQuery 将“?autoplay=1”附加到 iframe 源的末尾（刷新 iframe 并播放它）。显然，这仅在视频的 src 最后没有其他任何内容时才有效，但它适用于我的用例。

我的解决方案： http://jsfiddle.net/cqpwn2vh/

JS

// When you click the play button image
$('.play-button').click(function(){
    // Find the iframe in the same element as the image and replace it's src with its own source + "?autoplay=1"
    $(this).siblings("iframe").attr('src', $(this).siblings("iframe").attr('src')+'?autoplay=1');
    // Then in my case I hid the image, but you could do whatever after this, but this wont support pausing.
    $(this).hide();
});

HTML

<li>
    <!--- When this is clicked, find the iframe inside the same <li> and add autoplay to it --->
    <img class="play-button" src="images/play-button.jpg" style="cursor: pointer; position: relative; z-index: 999;" />
    <iframe class="video" src="//player.vimeo.com/video/80312270" width="500" height="281" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</li>
<li>
    <img class="play-button" src="images/play-button.jpg" style="cursor: pointer; position: relative; z-index: 999;" />
    <iframe class="video" src="//player.vimeo.com/video/80312270" width="500" height="281" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</li>