Tumblr Vimeo Video Hack - PullRequest
       18

Tumblr Vimeo Video Hack

0 голосов
/ 30 августа 2010

Я хочу опубликовать видео с vimeo.com на tumblr.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?

спасибо.

Ответы [ 3 ]

2 голосов
/ 15 сентября 2011

Вот обновленная версия этого скрипта, которая, кажется, сочетает в себе лучшее из обоих

<!--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>
0 голосов
/ 20 сентября 2010

Итак, с кем-то другим (в основном с ним) я разобрался, как масштабировать вставки vimeo на tumblr, в то время как в рамках того же сценария управляйте цветом вставки.

Изменить цвет: 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

0 голосов
/ 17 сентября 2010

Эта тема здесь: http://www.tumblr.com/theme/8631 позволяет вам сделать именно это.Извлечение кода из него кажется немного сложным, поскольку он, кажется, интегрирован в сценарий, который также выполняет некоторые другие функции (хотя я на самом деле не знаю, что я делаю, мой опыт в кодировании не идетнамного больше, чем копирование и вставка)

У меня есть видео, вставленное в тестовый блог здесь: x-men-bike-gang.tumblr.com (извините, мне пришлось разорвать ссылку из-за ограничений на ссылки от новых пользователей)

Я собираюсь продолжать искать другое решение, хотя, очевидно, это можно сделать просто отлично.

...