我试图在角度应用程序中使用YouTube的api播放一些视频，我正在使用“youtube-player”：“^ 5.5.0”npm包 .
应用程序在localhost上运行正常，可以播放所有视频，当部署到服务器上时，大多数示例视频都无法正常工作 .
由于视频是可播放的YouTube网站以及localhost，我不确定我在这里缺少什么，我也没有看到任何关于开发工具的警告 .
例如，这里是示例视频ID：vlkNcHDFnGA，我还可以看到视频可直接在iframe上播放：https://jsfiddle.net/skjagini/419wcuod/
我可以确认视频是可嵌入的和联合的，这是我发出的查询结果的查询
YouTubeService youtubeService = new YouTubeService(new BaseClientService.Initializer()
{
ApiKey = "key",
ApplicationName = this.GetType().ToString()
});
var searchListRequest = youtubeService.Search.List("snippet");
searchListRequest.Q = searchText;
searchListRequest.MaxResults = 5; // 50
searchListRequest.Type = "video";
searchListRequest.VideoSyndicated = SearchResource.ListRequest.VideoSyndicatedEnum.True__;
searchListRequest.VideoEmbeddable = SearchResource.ListRequest.VideoEmbeddableEnum.True__;
在.html文件中我有
<section class="app-footer footer">
<div class="container-fluid">
<span class="float-left">
<div class="player-defaults" id="video-player"></div>
</span>
在.ts文件中我有
this.player = YouTubePlayer('video-player', {
height: 60, width: 100
});
this.player.on('stateChange', (event) => {
if (!this.stateNames[event.data]) {
throw new Error('Unknown state (' + event.data + ').');
// console.log()
} else if (event.data === 0) {
this.playNext();
}
});
playVideoById(vidoeId: string) {
if (vidoeId == null) {
if (this.activeSong) {
vidoeId = this.activeSong.videoId;
} else {
return;
}
}
this.isPlaying = true;
// 'loadVideoById' is queued until the player is ready to receive API calls.
this.player.loadVideoById(vidoeId); // player.loadVideoById('M7lc1UVf-VE');
this.playVideo();
}
playVideo() {
this.isPlaying = true;
// 'playVideo' is queue until the player is ready to received API calls and after 'loadVideoById' has been called.
this.player.playVideo();
}
编辑：当我右键单击youtube播放器并选择嵌入视频时，它似乎产生了正确的html，它与我的JSFiddle相同
<iframe width="1920" height="1080" src="https://www.youtube.com/embed/vlkNcHDFnGA" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
如果我点击youtube徽标，它会在youtube浏览器中打开并播放视频就好了 .
只是不确定为什么它在JSFiddle，localhost中播放，但不在服务器上播放 .
EDIT: 我注意到我得到了CORD（不是CORS错误），因为我的服务器是http，而youtube在幕后调用的谷歌广告服务是https . 这可能是个问题吗？
2 回答
Youtube IFrame在后台调用其广告API，并且需要托管网站在https上运行 .
api可以区分本地主机与公共域，因此该服务在本地工作得很好，但是当在公共域上托管时，它需要通过Https提供 .
我使用了LetsEncrypt的免费证书，之后就开始工作了 .
对我来说似乎很清楚 . 这意味着服务器不支持嵌入式视频 .