javascript - 如何使用 Angularjs 从 url 显示 youtube 缩略图

Question

我刚开始使用 angularjs，我想显示来自 youtube 视频 url 的 youtube 缩略图...当人们在输入中插入 url 然后单击按钮时，有没有办法显示视频缩略图，

PLUNKER

http://plnkr.co/edit/9SBbTaDONuNXvOQ7lkWe?p=preview

Answer 1

Youtube 提供其视频的默认缩略图。

您可以使用下面的示例 URL 创建缩略图。

http://img.youtube.com/vi/<insert-youtube-video-id-here>/default.jpg

你需要从给定的 url 中搜索 id 并像上面那样创建 url 会给你缩略图。

Controller

app.controller('MyCtrl', ['$scope',
  function($scope) {
    $scope.inputs = [];

    $scope.addInput = function() {
      $scope.inputs.push({
        field: ''
      });
    }

    $scope.removeInput = function(index) {
      $scope.inputs.splice(index, 1);
    }

    $scope.set2 = function($ayd) {
      var thumb = getParameterByName(this.input.ayd, 'v'),
        url = 'http://img.youtube.com/vi/' + thumb + '/default.jpg';
      this.thumb = url
    }

    function getParameterByName(url, name) {
      name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");
      var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
        results = regex.exec(url);
      return results === null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
    }
  }
]);

方法很多，可以引用from here

Working Plunkr这里