Javascript 如何使用Angularjs从url显示youtube缩略图图像_Javascript_Angularjs_Youtube_Youtube Api_Angularjs Controller

Javascript 如何使用Angularjs从url显示youtube缩略图图像

javascript angularjs youtube youtube-api

Javascript 如何使用Angularjs从url显示youtube缩略图图像,javascript,angularjs,youtube,youtube-api,angularjs-controller,Javascript,Angularjs,Youtube,Youtube Api,Angularjs Controller,我刚开始使用angularjs，我想显示youtube视频url中的youtube缩略图。。。当人们在输入中插入url，然后单击按钮时，是否有办法显示视频缩略图 PLUNKER Youtube提供其视频的默认缩略图您可以使用下面的示例URL创建缩略图 http://img.youtube.com/vi/<insert-youtube-video-id-here>/default.jpg 有很多方法可以做到这一点，你可以参考这里是一个简单的Plunker，它使用过滤器从输入的U

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

PLUNKER

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

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

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

有很多方法可以做到这一点，你可以参考

这里是一个简单的Plunker，它使用过滤器从输入的URL中提取Youtube ID，然后使用提供的Youtube将图像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>

与AngularJS一起

首先，您需要在中创建一个项目
启用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)
            });
        };
    });

不要忘记初始化API。在

index.html

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

对于初学者，您可能会对以下答案感兴趣：

课程

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
        });
      });
    }));
  }
}

@组件({
选择器：“应用程序视频列表”，
templateUrl:'./video listing.component.html'，
样式URL:['./视频列表.component.scss']
})
导出类VideoListingComponent实现OnInit{
构造函数（私有http:HttpClient）{}
恩戈尼尼特（）
{
//bpLmn-oO60E是视频的视频ID
此.search（“bpLmn-oO60E”）.subscribe（（数据）=>{
控制台日志（数据）；
});
}
搜索（查询：字符串）：可观察{
常量参数：字符串=[
`q=${query}`，
`key=${YOUTUBE\u API\u key}`，
`part=代码段`，
`类型=视频`，
`maxResults=10`
].加入（“&”）；
const queryUrl=`${YOUTUBE\u API\u URL}？${params}`；
返回这个.http.get（queryUrl）.pipe（map（response=>{
返回响应['items'].map（item=>{
返回新的VideoDetail({
id:item.id.videoId，
标题：item.snippet.title，
描述：item.snippet.description，
缩略图url:item.snippet.thumbnails.high.url
});
});
}));
}
}

这对我有用：D

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

非常感谢，它就像一个符咒，，，，我能用同样的输入使用vimeo吗？@AydIn don；我不确定vimeo是否有这样的功能，或者我是否可以显示youtube视频和vimeo视频而不是图像？就像在iframeyes中一样，你可以这样做..当然..要想获得好的UI控制器，你应该选择一些更好的插件，最重要的是使用YouTube的官方API。想象有一天，他们改变了图片的url…如果我也想使用vimeo，我该如何使用它？你必须使用vimeo API。这不像Youtube那么容易。

@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
        });
      });
    }));
  }
}

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