Question

我正在尝试添加删除播放按钮的功能，一旦单击该按钮，视频就会开始播放。我的问题是我在页面上有多个视频，单击播放按钮并播放视频星标后，所有其他按钮也将被删除。

代码：

//JS - To remove image overlay and video starts playing (working)

$(function() {
  document.getElementById("playbutton").disabled = true;
  var player = $('iframe');
  var playerOrigin = '*';
  // Listen for messages from the player
  if (window.addEventListener) {
  window.addEventListener('message', onMessageReceived, false);
  } else {
  window.attachEvent('onmessage', onMessageReceived, false);
  }

  function onMessageReceived(event) {
  var data = JSON.parse(event.data);
  console.log(data.event);
  if (data.event === "ready") {
  //attach ready function to the image
  document.getElementById("playbutton").disabled = false;

  $('#playbutton').click(function() {
    player[0].contentWindow.postMessage({
      "method": "play"
    }, playerOrigin);
    $(this).remove();
   });
   }
 }
});



$('.overlay').click(function() {
$('.video-icon').fadeToggle(300)
})

<div id="showreel">
    <div id="container">
        <div style="padding:56.25% 0 0 0;position:relative;">
            <iframe src="https://player.vimeo.com/video/..."</iframe>
            <img class="overlay" src="../images/overlay.png" style ="position:absolute; top:0; left:0;width: 100%;height:100%" id="playbutton">
        </div>
        <script src="https://player.vimeo.com/api/player.js"></script>
        </img>
        <img class="video-icon" src="../../images/general/play-button.png">
    </div>
</div>

谢谢！

Answer 1

最佳做法是将ID唯一地用于元素。如果您有多个具有相同ID的元素，则会开始遇到这样的问题（无双关语）。

尝试将所有播放按钮的id="playbutton"更改为class="playbutton"，然后将$('#playbutton').click(function() {更改为$('.playbutton').click(function() {。

jQuery单击事件可在具有多个div时添加/删除特定的类

1 个答案: