如何使用Angularjs从url显示youtube缩略图答案

【问题标题】：how to display youtube thumbnail image from url with Angularjs如何使用Angularjs从url显示youtube缩略图
【发布时间】：2015-07-05 00:56:13
【问题描述】：

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

PLUNKER

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

【问题讨论】：

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

【解决方案1】：

这对我有用：D

<video>
  <source [src]="yourvideo.mp4">
</video>

【讨论】：

【解决方案2】：

import { HttpClient } from '@angular/common/http';
import { map } from 'rxjs/operators';
import { Observable } from 'rxjs';
const YOUTUBE_API_KEY = 'abcd--z';
const YOUTUBE_API_URL = 'https://www.googleapis.com/youtube/v3/search';

类

export class VideoDetail {
  id: string;
  title: string;
  description: string;
  thumbnailUrl: string;
  videoUrl: string;

  constructor(obj?: any) {
      this.id = obj && obj.id || null;
      this.title = obj && obj.title || null;
      this.description = obj && obj.description || null;
      this.thumbnailUrl = obj && obj.thumbnailUrl || null;
      this.videoUrl = obj && obj.videoUrl || `https://www.youtube.com/watch?v=${this.id}`;
  }
}

组件

@Component({
  selector: 'app-video-listing',
  templateUrl: './video-listing.component.html',
  styleUrls: ['./video-listing.component.scss']
})
export class VideoListingComponent implements OnInit {

  constructor(private http: HttpClient) {}
  ngOnInit()
  {
    // bpLmn-oO60E is the videoId of video
    this.search("bpLmn-oO60E").subscribe((data)=>{
      console.log(data);
    });
  }
  search(query: string): Observable<VideoDetail[]> {
    const params: string = [
      `q=${query}`,
      `key=${YOUTUBE_API_KEY}`,
      `part=snippet`,
      `type=video`,
      `maxResults=10`
    ].join('&');

    const queryUrl = `${YOUTUBE_API_URL}?${params}`;

    return this.http.get(queryUrl).pipe(map(response => {
      return response['items'].map(item => {
        return new VideoDetail({
          id: item.id.videoId,
          title: item.snippet.title,
          description: item.snippet.description,
          thumbnailUrl: item.snippet.thumbnails.high.url
        });
      });
    }));
  }
}

【讨论】：

【解决方案3】：

使用 AngularJS

首先，您需要在console.google.developers中创建一个项目。
启用 API YouTube API V3（设置为开启）。
在凭据部分，创建一个公共访问密钥。

以控制器VideoCtrl为例：

'use strict';

function init() {
    window.initGapi(); // Calls the init function defined on the window
}

angular.module('team')
    .service('googleService', ['$http', '$q', function ($http, $q) {

        var deferred = $q.defer();
        this.googleApiClientReady = function () {
            gapi.client.setApiKey('YOUR API KEY');
            gapi.client.load('youtube', 'v3', function() {
                var request = gapi.client.youtube.playlistItems.list({
                    part: 'snippet',
                    playlistId: 'PLila01eYiSBjOtR8oqXkY0i5c1QS6k2Mu',
                    maxResults: 8
                });
                request.execute(function(response) {
                    deferred.resolve(response.result);
                });
            });
            return deferred.promise;
        };
    }])
    .controller('VideosCtrl', function ($scope, $window, $sce, googleService) {

        $window.initGapi = function() {
            $scope.$apply($scope.getChannel);
        };

        $scope.getChannel = function () {
            googleService.googleApiClientReady().then(function (data) {
                $scope.channel = data;
            }, function (error) {
                console.log('Failed: ' + error)
            });
        };
    });

别忘了init API。在index.html 末尾添加这一行

<script src="https://apis.google.com/js/client.js?onload=init"></script>

对于初学者，您可能对此答案感兴趣：https://stackoverflow.com/a/25783421/2274530

【讨论】：

【解决方案4】：

Here 是一个简单的 Plunker，它使用过滤器从输入的 URL 中提取 Youtube ID，然后使用 Youtube 提供的 image paths 将图像 url 应用到图像源。

app.js

var app = angular.module('plunker', []);


app.filter('getVideoId', function() {
    return function(input) {

     // get video id
     var output = input.substr(input.indexOf("=") + 1);

     return output;
   }
})

index.html

<body>
    <div>
      <input type="text" ng-model="input.url" placeholder="Youtube URL" />
      <img class="ythumb" ng-src="http://img.youtube.com/vi/{{input.url | getVideoId}}/0.jpg"/>
    </div>

【讨论】：

如果我也想使用 vimeo 我该如何使用它？
您必须使用 Vimeo API。它不像 Youtube 那样简单。

【解决方案5】：

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

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

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

如果您需要从给定的 url 搜索 id 并像上面那样创建 url，将为您提供缩略图。

控制器

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

【讨论】：

非常感谢，它就像一个魅力，，，，我也可以使用相同输入的 vimeo 吗？？？
@AydIn 不知道 vimeo 有没有这样的功能
或者我可以显示 youtube 视频和 vimeo 视频而不是图像吗？就像在 iframe 中一样
是的，您可以这样做..eaisly..要获得好的 UI 控制器，您应该使用一些插件
更好的办法是使用 YouTube 的官方 API。想象有一天他们改变了图片的网址......