javascript – 如何使用Angularjs显示来自网址的youtube缩略图

我刚开始使用angularjs,我想从youtube视频网址显示youtube缩略图…当人们在输入中插入网址然后点击按钮时,有没有办法显示视频缩略图,

PLUNKER

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

解决方法:

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

您可以使用以下示例URL来创建缩略图图像.

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

您需要从给定网址和网址中搜索ID的位置像上面这样创建网址会给你缩略图.

调节器

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在这里

标签：angularjs-controller,javascript,angularjs,youtube,youtube-api
来源： https://codeday.me/bug/20190728/1558932.html