Jquery tumblr音频/视频播放器&x2B；无限卷轴砌体

这是一个测试页面：

我在tumblr上使用带有无限滚动的jquery砌体。除音频播放器外，一切正常。他们不会在第二页加载并显示此消息[需要Flash 9才能收听音频。]

做了一点调查，找到了解决办法。一个（），这是一个成功的例子（第35行）

问题是我不知道在哪里以及如何在代码中实现它。我试过的所有东西要么都不起作用，要么在砖块周围留下了一个小缺口。我的代码：

    $(document).ready(function () {

    var $container = $('.row');

    $container.imagesLoaded(function () {
        $container.masonry({
            itemSelector: '.post',
            columnWidth: 1
        });
    });


    $container.infinitescroll({
        navSelector: '#page-nav',
        nextSelector: '#page-nav a',
        itemSelector: '.post',
        loading: {
            finishedMsg: "No more entries to load.",
            img: "http://static.tumblr.com/7wtblbo/hsDlw78hw/transparent-box.png",
            msgText: "Loading..."
        },
        debug: true,
        bufferPx: 5000,
        errorCallback: function () {
            $('#infscr-loading').animate({
                opacity: 0.8
            }, 2000).fadeOut('normal');
        }
    },

    function (newElements) {

    //tried this but doesn't work

        /* repair video players*/
        $('.video').each(function(){
            var audioID = $(this).attr("id");
            var $videoPost = $(this);
            $.ajax({
                url: '/api/read/json?id=' + audioID,
                dataType: 'jsonp',
                timeout: 50000,
                success: function(data){
                    $videoPost.append('\x3cdiv class=\x22video_player_label\x22\x3e' + data.posts[0]['video-player'] +'\x3c/div\x3e');
                    }
                }
            });
        });  

        /* repair audio players*/
        $('.audio').each(function(){
            var audioID = $(this).attr("id");
            var $audioPost = $(this);
            $.ajax({
                url: '/api/read/json?id=' + audioID,
                dataType: 'jsonp',
                timeout: 50000,
                success: function(data){
                    $audioPost.append('\x3cdiv class=\x22audio_player\x22\x3e' + data.posts[0]['audio-player'] +'\x3c/div\x3e');
                    }
                }
            });
        }); 

        var $newElems = $(newElements).css({
            opacity: 0
        });
        $newElems.imagesLoaded(function () {
            $newElems.animate({
                opacity: 1
            });
            $container.masonry('appended', $newElems, true);
        });
    });


    $(window).resize(function () {
        $('.row').masonry();
    });

});

---

我注意到了一些事情，这就是我建议您尝试的：

要使该脚本正常工作，类为“audio”的元素都应该有一个带有post id的“id”属性

<div class="audio" id={PostID}>{AudioPlayerWhite}</div>

---

默认情况下，API将返回白色音频播放器。 您可以通过使用jQuery方法分别用黑色或白色播放器替换flash播放器来更改它

.replace("audio_player.swf", "audio_player_black.swf")

或者干脆改变颜色本身

.replace("color=FFFFFF", "color=EA9D23");

例如：

$('.audio').each(function(){
        var audioID = $(this).attr("id");
        var $audioPost = $(this);
        $.ajax({
            url: '/api/read/json?id=' + audioID,
            dataType: 'jsonp',
            timeout: 50000,
            success: function(data){
                $audioPost.append('\x3cdiv class=\x22audio_player\x22\x3e' + data.posts[0]['audio-player'].replace("audio_player.swf","audio_player_black.swf") +'\x3c/div\x3e');
                }
            }
        });

---

我在这方面遇到了很多麻烦，希望它能帮助别人。我在这里找到了上述信息。

当我需要在创建的模板中实现相同的功能时，我提出了一个解决方案

在HTML中，在注释之间包含AudioPlayer Tumblr标记。这是为了防止调用加载的脚本。还添加了一个类“unload”，以跟踪我们是否已加载此帖子的音频播放器

...
{block:AudioPlayer}
    <div class="audio-player unloaded">
        <!--{AudioPlayerBlack}-->
    </div>
{/block:AudioPlayer}
...

。。。
{block:AudioPlayer}
{/block:AudioPlayer}
...

如果在加载页面后查看注释代码，您会注意到一个嵌入标记被传递到一个Tumblr javascript函数。因为我们对它进行了注释，所以它不会执行。相反，我们希望提取这个字符串并用它替换div内容

创建一个javascript函数来实现这一点。这可以通过常规javascript实现，但为了节省时间，我将使用jQuery实现，因为这是我为模板实现的方式：

function loadAudioPosts() {
    // For each div with classes "audio-player" and "unloaded"
    $(".audio-player.unloaded").each(function() {

        // Extract the <embed> element from the commented {AudioPlayer...} tag.
        var new_html = $(this).html().substring(
            $(this).html().indexOf("<e"),    // Start at "<e", for "<embed ..."
            $(this).html().indexOf("d>")+2   // End at "d>", for "...</embed>"
        );

        // Replace the commented HTML with our new HTML
        $(this).html(new_html);

        // Remove the "unloaded" class, to avoid reprocessing
        $(this).removeClass("unloaded");
    });
}

函数loadAudioPosts（）{
//对于具有“音频播放器”和“卸载”类的每个div
$（“.audio player.unload”）.each（函数（）{
//从注释的{AudioPlayer…}标记中提取元素。
var new_html=$（this.html（）.substring(
$（this.html（）.indexOf（“谢谢！忘记添加{PostID}对于html.D'oh！就实现而言，Burt更新了他的代码，它为我工作。这里：Daniel，我使用的是infinite-scroll.com，具有所需的最低配置。我将调用放在哪里？@SanDiago尝试在开关/案例后的第371行
infscr\u loadcallback（）中调用函数
。这在文件
js/front-end/jquery.infinitescroll.dev.js
中。祝你好运！丹尼尔，我无法让它工作，但感谢你花时间研究代码和帮助：）
function loadAudioPosts() {
    // For each div with classes "audio-player" and "unloaded"
    $(".audio-player.unloaded").each(function() {

        // Extract the <embed> element from the commented {AudioPlayer...} tag.
        var new_html = $(this).html().substring(
            $(this).html().indexOf("<e"),    // Start at "<e", for "<embed ..."
            $(this).html().indexOf("d>")+2   // End at "d>", for "...</embed>"
        );

        // Replace the commented HTML with our new HTML
        $(this).html(new_html);

        // Remove the "unloaded" class, to avoid reprocessing
        $(this).removeClass("unloaded");
    });
}