Question

我想在我的视频样式页面上自动播放youtube视频，即http://picovico.com/video-styles/。我可以通过点击给定代码的图像缩略图自动播放视频。但是，这会影响页面中具有相同类的其他元素。我的代码是：

jQuery( function($) {    
 $('.cq-expandgrid-toggle').on('click', function(ev) {
    $("#pvideo")[0].src += "&autoplay=1";
    ev.preventDefault(); 
  });
});

我怎么能实现它。我有点困惑＆＃34;这个＆＃34;宾语。

Answer 1

我认为您可以使用eq(index)选择第一个类名为.cq-expandgrid-toggle的节点。并且，id选择器在一个页面中是唯一的，因此不必为它添加[0]。对不起我的英语，我希望你能理解我的意思

jQuery(function($) {
    $('.cq-expandgrid-toggle').eq(0).on('click', function(ev) {
        $("#pvideo").src += "&autoplay=1";
        ev.preventDefault(); 
    });
});

Answer 2

您需要将jQuery选择器的范围限制为单击的div标签内的元素。

这应该有用。

jQuery('.cq-expandgrid-toggle').click(function(ev) { 
    jQuery(this).parent().find("iframe")[0].src += "&autoplay=1";
    ev.preventDefault();
});

<强>更新

当用户在播放第一个视频时点击第二个视频时，第一个视频也会与第二个视频一起开始播放，因为第一个视频也有autoplay=1。在将autoplay=1添加到第二个iframe之前，您需要重置第一个iframe的网址。

var url = jQuery('#YourIFrameID').attr('src').replace('&autoplay=1', '');
jQuery('#YourIFrameID').setAttribute('src', '');
jQuery('#YourIFrameID').setAttribute('src', url);

此外，您已将每个iframe的ID设置为pvideo这是错误的HTML，因为ID应该是唯一的。

如果您问我实施此视频库的方式是完全错误的。有很多问题

您正在加载页面加载的所有iframe。您应该使用YouTube Player API在缩略图点击时加载播放器。
在页面加载时加载所有iframe需要花费大量时间。大多数用户都不会播放您的所有视频。
此外，当您追加autoplay=1时，iframe仍会再次加载，因此加载页面加载是一种浪费。

YouTube API还为您提供stopVideo和playVideo方法来停止和启动视频。因此，在缩略图上，您可以停止当前视频，加载新视频并播放。

Answer 3

我使用了一些伪代码来测试它，

HTML

<div class="cq-expandgrid-toggle">
  <span id="pvideo">
      Click me
  </span>
</div>


<div class="cq-expandgrid-toggle">
  <span id="pvideo">
      Click me
  </span>
</div>

</body>
</html>

JQuery的

jQuery( function($) {    
 $('.cq-expandgrid-toggle').on('click', function(ev) {
     var pvideo = this.querySelector("#pvideo");
     pvideo.innerHTML = "You clicked on me"; 
  });
});

这是小提琴https://jsfiddle.net/flyinggambit/LcbLb386/

因此，您应该将代码更改为

jQuery( function($) {    
 $('.cq-expandgrid-toggle').on('click', function(ev) {
    var pvideo = this.querySelector("#pvideo");
    pvideo.src += "&autoplay=1";
    ev.preventDefault(); 
  });
});

我不确定是否有更好的方法在JQuery中编写此this.querySelector("#pvideo");。

<强>更新

现在我对您的HTML代码了如指掌，我尝试了以下代码，您应该对HTML代码进行一些修改以使事情变得更容易。

确保cq-expandgrid-toggle和cq-expandgrid-content位于父容器内。这将有助于我们将每个预览视为单个组件。对于示例代码，我使用了<div name="content-holder">
将cq-expandgrid-content设置为hidden="true"，以便默认情况下iframe不可见。
让预览缩略图负责设置iframe的网址，这样可以在显示/隐藏iframe时轻松播放/停止视频。另外，请确保将autoplay=1添加到src的末尾。

<div class="cq-expandgrid-toggle" src="https://www.youtube.com/embed/8SDWdlRzIF8?autoplay=1">

HTML

    <!-- Preview One -->
    <div name="content-holder">
      <div class="cq-expandgrid-toggle" src="https://www.youtube.com/embed/8SDWdlRzIF8?autoplay=1">Preview 1</div>
      <div name="cq-expandgrid-content" hidden="true">
        <iframe name="pvideo" width="560" height="300" frameborder="0" allowfullscreen="allowfullscreen"></iframe>
      </div>
    </div>

    <!-- Preview Two -->
    <div name="content-holder">
      <div class="cq-expandgrid-toggle" src="https://www.youtube.com/embed/eC4Rqa4eQy0?autoplay=1">Preview 2</div>
      <div name="cq-expandgrid-content" hidden="true">
        <iframe name="pvideo" width="560" height="300" frameborder="0" allowfullscreen="allowfullscreen"></iframe>
      </div>
    </div>

    <!-- Preview Three -->
    <div name="content-holder">
      <div class="cq-expandgrid-toggle" src="https://www.youtube.com/embed/oUC0FdMLUpQ?autoplay=1">Preview 3</div>
      <div name="cq-expandgrid-content" hidden="true">
        <iframe name="pvideo" width="560" height="300" frameborder="0" allowfullscreen="allowfullscreen">
        </iframe>
      </div>
    </div>

  </body>
</html>

JQuery的

jQuery(function($) {
  $('.cq-expandgrid-toggle').on('click', function(ev) {
    var contentHolder = $(this).parent('div[name=content-holder]');
    var expandGridContent = contentHolder.find("div[name=cq-expandgrid-content]");

    expandGridContent.toggle();
    var iframe = contentHolder.find('iframe');
    if (expandGridContent.is(":visible")) {
      iframe.attr("src", $(this).attr("src"));
    } else {
      iframe.attr("src", "#");
    }
    ev.preventDefault();
  });

这是工作小提琴https://jsfiddle.net/flyinggambit/4zqks7w5/

on click函数会影响jquery中具有相同类名的多个元素

3 个答案: