tumblr音頻/視頻播放器+砌體無限滾動

Question

這是一個測試頁面：http://masonry-test.tumblr.com/

我使用jQuery砌體與tumblr無限滾動。除了音頻播放器，一切都很好。它們不會加載到第二頁上，而是顯示此消息[需要Flash 9才能收聽音頻。]。

做了一點研究，找到了解決辦法。一個here（this one too），這裏的the js從Mesh theme，這成功（行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(); 
    }); 

}); 

Answer 1

我注意到一些東西，這是我建議你嘗試：

1. 對於腳本工作，與類「音頻」​​的元素應該各有一個帶有發佈ID的「id」屬性。 HTML應該看起來像這樣：

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

   Tumblr會自動填寫{PostID}部分，每個帖子的ID。我認爲它對視頻的工作方式相同（尚未嘗試使用視頻）。

2. 至於位置，我這樣做是這樣的：

   function (newElements) { 
   
       .... 
   
       $newElems.imagesLoaded(function() { 
        .... 
       }); 
   
       //audio repair goes here! 
   
   } 
   

Answer 2

默認情況下，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'); 
       } 
      } 
     }); 

我有很多的麻煩，這一點，並希望它可以幫助別人了。我在這裏找到了以上信息Change Tumblr audio player color with Javascript。

Answer 3

當我需要在創建的模板中實現相同的功能時，下面是我提出的解決方案。

在您的HTML中，請在註釋之間包含您的AudioPlayer Tumblr標記。這是爲了防止加載的腳本被調用。還要添加一個「卸載」類來跟蹤我們是否已經加載了該文章的音頻播放器。

... 
{block:AudioPlayer} 
    <div class="audio-player unloaded"> 
     <!--{AudioPlayerBlack}--> 
    </div> 
{/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()一旦在頁面加載，那麼每次你的無限滾動負載額外的職位。