使用脚本停止Vimeo视频--在循环中并使用模式窗口

时间:2017-09-05 作者:Fernando V. Grossman

大家晚安,当点击一个标签时,我正在尝试停止vimeo视频。模式窗口在“while循环”中调用。我找到了一个使用vimeo api的代码(http://jsfiddle.net/joan_r/dutzh512/) 但这只适用于我的第一个视频,其他视频在单击标记时不会停止。

我的代码就是这样运行的:

    <script src="http://a.vimeocdn.com/js/froogaloop2.min.js"></script>

    <?php

    $paged = ( get_query_var(\'paged\') ) ? get_query_var(\'paged\') : 1;
    $query_args = array(
        \'post_type\' => \'post\',
        \'order\'   => \'DESC\',
        \'orderby\'   => \'date\',
        \'paged\' => $paged
    );

    $the_query = new WP_Query( $query_args );

    if ( $the_query->have_posts() ) : while ( $the_query->have_posts() ) : $the_query->the_post(); 

        $slug = $post->post_name;

        $thumb_id = get_post_thumbnail_id();
        $thumb_url = wp_get_attachment_image_src($thumb_id,\'thumbnail-size\', true); 

        ?>

        <a href="#<?php echo $slug ?>" rel="modal">
            <div class="thumb" style="background-image: url(<?php if (has_post_thumbnail()) { echo $thumb_url[0]; } ?>)">
                <p class="legenda"><?php the_title(); ?></p>
            </div>
        </a>

        <div class="window" id="<?php echo $slug ?>">
            <?php the_content(); ?>
            <a class="stop" href="#">STOP</a>           
        </div>

       <script> 

            var iframe = $(\'.video-player\')[0];
            var player = $f(iframe);

            $(\'.stop\').click(function() {
                //alert(\'stoped\');
                player.api(\'unload\');
            });

        </script> 

    <?php endwhile; endif; ?> 

    <?php wp_reset_postdata(); ?>
这是可行的,但仅在第一个视频中。我做错了什么?

非常感谢。

1 个回复
最合适的回答,由SO网友:Fernando V. Grossman 整理而成

最后我得到了解决方案:

        <script> 

            jQuery("#mascara").click(function() { 
                $(\'.video-player\').each(function(index) {
                    $(this)[0].contentWindow.postMessage(\'{"method":"unload"}\',\'*\');


                });
            });

        </script>

结束

相关推荐

WP REST API:检查用户是否已登录

其想法是在一个主题中显示或隐藏站点的某些部分,该主题使用AngularJS从REST API获取所有数据。我认为这个检查对我有帮助(nonce作为标题传递,正如docs所建议的那样):wp_localize_script(\'angularjs\', \'params\', array( \'nonce\' => wp_create_nonce(\'wp_rest\'), \'nonce_verify\' => wp_verify_nonce($_REQUEST