Tumblr Vimeo 视频破解

Question

我想在 tumblr.com 上发布来自 vimeo.com 的视频，宽度超过 500 像素。

它存在一个适用于来自 youtube.com 的视频的代码。 (http://pastie.org/871790)

<!-- Widescreen YouTube Embeds by Matthew Buchanan & Hayden Hunter
  http://matthewbuchanan.name/451892574
  http://blog.haydenhunter.me

  Hacked around by Simon Starr to break out of Tumblr's max width of 500px
  http://www.simonstarr.com

  Original source here: http://pastie.org/871790

  Released under a Creative Commons attribution license:
  http://creativecommons.org/licenses/by/3.0/nz/ -->

  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
  <script type="text/javascript">
  $(function() {
    // Change this to whatever width you like
    var contentWidth = 700;

    $("object").each(function () {
      if ($(this).find("embed[src^='http://www.youtube.com']").length > 0) {
        // Identify and hide embed(s)
        var parent = $(this).parent();
        parent.css("visibility","hidden");
        var youtubeCode = parent.html();
        var params = "";
        if (youtubeCode.toLowerCase().indexOf("<param") == -1) {
          // IE doesn't return params with html(), so…
          $("param", this).each(function () {
            params += $(this).get(0).outerHTML;
          });
        }
        // Set colours in control bar to match page background
        var oldOpts = /rel=0/g;
        var newOpts = "rel=0&amp;color1=0xeeeeee&amp;color2=0xeeeeee;hd=1";
        youtubeCode = youtubeCode.replace(oldOpts, newOpts);
        if (params != "") {
          params = params.replace(oldOpts, newOpts);
          youtubeCode = youtubeCode.replace(/<embed/i, params + "<embed");
        }
        // Extract YouTube ID and calculate ideal height
        var youtubeIDParam = $(this).find("embed").attr("src");
        var youtubeIDPattern = /\/v\/([0-9A-Za-z-_]*)/;
        var youtubeID = youtubeIDParam.match(youtubeIDPattern);
        var youtubeHeight = Math.floor(contentWidth * 0.75 + 25);
        var youtubeHeightWide = Math.floor(contentWidth * 0.5625 + 25);
        // Test for widescreen aspect ratio
        $.getJSON("http://gdata.youtube.com/feeds/api/videos/" + youtubeID[1] + "?v=2&alt=json-in-script&callback=?", function (data) {
          oldHeight = /height="?([0-9]*)"?/g;
          oldWidth = /width="?([0-9]*)"?/g;

          newWidth = 'width="' + contentWidth + '"';
          if (data.entry.media$group.yt$aspectRatio != null) {
            newHeight = 'height="' + youtubeHeightWide + '"';
          } else {
            newHeight = 'height="' + youtubeHeight + '"';
          }
          youtubeCode = youtubeCode.replace(oldHeight, newHeight);
          youtubeCode = youtubeCode.replace(oldWidth, newWidth);
          if (params != "") {
            params = params.replace(oldWidth, newWidth);
            params = params.replace(oldHeight, newHeight);
            youtubeCode = youtubeCode.replace(/<embed/i, params + "<embed");
          }
          // Replace YouTube embed with new code
          parent.html(youtubeCode).css("visibility","visible");
        });
      }
    });
  });
  </script>

那么，是否可以为 vimeo.com 更改此代码？

谢谢。

Answer 1

这是此脚本的更新版本，似乎结合了两者的优点

<!--Better Vimeo Embeds on Tumblr by Matthew Buchanan http://matthewbuchanan.name/141302328
    Updated by Alex Hallajian http://journal.alexhallajian.com/post/1153909350
    Tweaked by UnAmazing to remove portrait & title info and fix color http://unamazing.com -->

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
    var color = "55AAAA";
    var opts = "title=0&byline=0&portrait=0";
    $("iframe").each(function() {
        var $obj = $(this);
        var data = $obj.attr("data");
        var vsrc = $obj.attr("src");
        var oldW = $obj.attr("width");
        var newW = 600;
        var oldH = $obj.attr("height");
        var p = oldW/newW;
        var newH = (oldH / p);
        if (vsrc.search("vimeo") > 0) {
            $obj.replaceWith("<iframe src='"+vsrc+"?"+opts+"&color="+color+"' width='"+newW+"' height='"+newH+"' frameborder='0'></iframe>");
        }
    });
})
</script>

Answer 2

这里的这个主题：http://www.tumblr.com/theme/8631 允许您这样做。不过，从中提取代码似乎有点棘手，因为它似乎被集成到一个脚本中，该脚本还可以做一些其他事情（虽然我真的不知道我在做什么，但我在编码方面的专业知识并没有去远远超出复制和粘贴）

我在此处的测试博客中嵌入了一个视频： x-men-bike-gang.tumblr . com （对不起，由于新用户的链接限制，我不得不断开链接）

我将继续寻找另一种解决方案，但显然它可以做得很好。

Answer 3

因此，与其他人（主要是他）一起，我想出了如何在 tumblr 上缩放 vimeo 嵌入，同时在同一个脚本中控制嵌入颜色。

改变颜色：var color = “55AAAA”; 改变宽度：var newW = 700;

嵌入到您的 tumblr 中（与 youtube 代码所在的位置相同）

<script type=”text/javascript”> 
$(function() {
    var color = “55AAAA”;
    $(“object[data^=’http://vimeo.com’]”).each(function() {
        var $obj = $(this);
        var data = $obj.attr(“data”);
        var temp = data.split(“clip_id=”)[1];
        var id = temp.split(“&”)[0];
        var server = temp.split(“&”)[1];
        var oldW = $obj.attr(“width”);
        var newW = 700;
        var oldH = $obj.attr(“height”);
        var p = ((newW - oldW) * 100)/newW;
        var newH = (oldH * parseFloat(‘1.’+p)); 
        $obj.replaceWith(
            ”<iframe src=’http://player.vimeo.com/video/”+id+
            ”?”+server+”&title=0&byline=0&portrait=0&color=”+color+”’ “+
            ”width=’”+newW+”’ height=’”+newH+”’ frameborder=’0’></iframe>”
        );
    });
})
</script>

感谢 alex，您可以在此处关注论坛帖子：http://vimeo.com/forums/topic:29292