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

2019-07-28 00:42:24 阅读：214 来源： 互联网

标签：angularjs-controller javascript angularjs youtube youtube-api

我刚开始使用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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

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