Question

我有两个vimeo视频和一个在按下播放按钮时淡入的标题... 它适用于一个视频，但如果我添加更多相同的类，它会打破... 我尝试使用.this只选择一个但不知何故它不起作用......

这里是一个视频的小提琴......

这里有两个视频的小提琴......

这是查询代码：

var iframe = document.querySelector('iframe');
var player = new Vimeo.Player(iframe);

player.on('play', function() {
    $(".text").fadeIn( "slow" );
});

 player.on('pause', function() {
   $(".text").fadeOut( "slow" );
});

$( "html" ).click(function() {
$( ".text" ).fadeOut("slow")
});

这是html：

<div class="video" id="item_1">
<iframe src="https://player.vimeo.com/video/155851922?color=ffffff&title=0&byline=0&portrait=0" width="320" height="320"     frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen>        </iframe></div>
<div class="text">Text_1</div>
<div class="video" id="item_2">
<iframe src="https://player.vimeo.com/video/155851922?color=ffffff&title=0&byline=0&portrait=0" width="320" height="320"    frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen>    </iframe></div>
<div class="text">Text_2</div>

如果按下＃item_1中的播放按钮，我想要显示Text_1 如果按下＃item_2，则会显示Text_2 ...

我该如何写这个？

Answer 1

尝试这个小提琴https://jsfiddle.net/4h1xfmrk/21/

$.each($('.video'), function(index, element){
        var iframe = $(this).find("iframe");
        var player = new Vimeo.Player(iframe);
    player.on('play', function() {
            console.log($(this.element).parent().attr('id'));
        $(this.element).parent().children('.text').fadeIn("slow");
    });

    player.on('pause', function() {
       $(this.element).parent().children('.text').fadeOut("slow");
    });
});

你必须遍历视频对象并单独设置他们的点击处理程序

Answer 2

将文本嵌套在视频元素中并执行以下操作：

player.on('play', function() {
    $(this.element).next('.text').fadeIn( "slow" );
});

 player.on('pause', function() {
   $(this.element).next('.text').fadeOut( "slow" );
});

请参阅https://jsfiddle.net/4h1xfmrk/19/

$(this)对vimeo播放器不起作用，因为播放器设置了自己的对象上下文。因此，如果你检查玩家，你可以看到它有一个＆＃39;元素＆＃39;表示单击当前元素的属性。因此，您需要使用$(this.element)代替$(this)。

要解决多个视频问题，请参阅此处： https://jsfiddle.net/4h1xfmrk/27/

只选择一个班级中的一个div。这不起作用

2 个答案: