Angular YouTube嵌入式视频是；无法在服务器上播放"；，而应用程序；在本地主机上运行良好”；

我正在尝试在angular应用程序中使用YouTube的api播放一些视频，我正在使用“YouTube播放器”：“^5.5.0”npm软件包

该应用程序在本地主机上运行良好，可以播放所有视频，当部署到服务器上时，大多数示例视频都无法工作

由于视频可以在YouTube网站和localhost上播放，我不确定我在这里遗漏了什么，我也没有在开发工具上看到任何警告

例如，这里是示例视频id:vlkNcHDFnGA，我还可以看到视频可以直接在iframe上播放：

我可以确认视频是可嵌入和联合的，这是我发出的查询以查找结果

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>

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播放器并选择embedded video时，它似乎生成了正确的html，与我的JSFIDLE相同

<iframe width="1920" height="1080" src="https://www.youtube.com/embed/vlkNcHDFnGA" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>

如果我点击youtube徽标，它会在youtube浏览器中打开并播放视频

只是不知道为什么它在JSFIDLE、localhost中播放，而不是在服务器上播放

编辑：我注意到我收到的是CORD（不是CORS错误），因为我的服务器是http，而youtube在幕后调用的谷歌广告服务是https。这可能是个问题吗

YouTube嵌入视频“无法在服务器上播放”

---

我觉得很清楚。这意味着服务器不支持嵌入式视频。

Youtube IFrame希望主机在https域上运行

IFrame在localhost上可以正常工作，因为localhost被认为是安全的，但在公共域上托管时，需要通过Https提供服务

---

我使用了LetsEncrypt提供的免费证书来获取域的ssl，此后一切都开始正常运行。

有几段视频仍然可以播放，但有问题的视频虽然在本地主机上运行，但没有，他们在JSFIDLE上工作，如描述中所述。播放的视频和不播放的视频有什么区别？@crou这里有一个不播放的视频id:vlkNcHDFnGA和实际播放的视频id:YFfEFbC9_XQ，我检查了这两个视频都是可嵌入的、联合的，并且对我们没有任何限制。它们都可以在iFrame上的jsFiddle上直接播放。我真的不确定是什么原因造成的。