Javascript AngularJS onYoutubeIframeAPIReady仅在刷新后工作

我有一个AngularJS应用程序，我正在处理嵌入的youtube视频，但我现在正在与一个特定的错误作斗争。在Stackoverflow上有一些关于它的帖子，但我无法解决它

当我打开页面并按下“播放”按钮（或div）时，视频和自定义mediaplayer将显示并工作，但当我返回或转发到另一页面时，该功能将不会再次调用，并且不会显示任何内容

html（视频将在此处显示）：

<div id="video-placeholder">

</div>

<div class="title-artist-button" ng-click="openYoutubeLink(upload.uploadUrl,upload.startSec,upload.endSec)">
    <div id="title-artist">

    </div>
</div>

$scope.openYoutubeLink = function (uploadUrl, startSec, endSec) {

    $('#video-placeholder').show();
    $('.mediaplayer').fadeIn(800);
    $('.glyphicon-play').hide();
    $('.glyphicon-pause').show();
    player.playVideo();
    getTrackInfo(uploadUrl, startSec, endSec);
    initialize();
};

function getTrackInfo (uploadUrl, startSec, endSec) {
    player.loadVideoById({videoId:uploadUrl, startSeconds:startSec, endSeconds:endSec});
}; 

var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

var player;
window.onYouTubeIframeAPIReady = function () {
    player = new YT.Player('video-placeholder', {
        width: 300,
        height: 200,
        playerVars: {
            color: 'white',
            enablejsapi:1,
            showinfo:0,
            rel:0,
            iv_load_policy:3,
            controls:0,
            autoplay:0
        },
        events: {
            onReady: initialize,
            onReady: getTrackInfo,
            onReady: getTitle
        }
    });
}

当然还有YoutubeApi函数：

<div id="video-placeholder">

</div>

<div class="title-artist-button" ng-click="openYoutubeLink(upload.uploadUrl,upload.startSec,upload.endSec)">
    <div id="title-artist">

    </div>
</div>

$scope.openYoutubeLink = function (uploadUrl, startSec, endSec) {

    $('#video-placeholder').show();
    $('.mediaplayer').fadeIn(800);
    $('.glyphicon-play').hide();
    $('.glyphicon-pause').show();
    player.playVideo();
    getTrackInfo(uploadUrl, startSec, endSec);
    initialize();
};

function getTrackInfo (uploadUrl, startSec, endSec) {
    player.loadVideoById({videoId:uploadUrl, startSeconds:startSec, endSeconds:endSec});
}; 

var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

var player;
window.onYouTubeIframeAPIReady = function () {
    player = new YT.Player('video-placeholder', {
        width: 300,
        height: 200,
        playerVars: {
            color: 'white',
            enablejsapi:1,
            showinfo:0,
            rel:0,
            iv_load_policy:3,
            controls:0,
            autoplay:0
        },
        events: {
            onReady: initialize,
            onReady: getTrackInfo,
            onReady: getTitle
        }
    });
}

因此，当我刷新时，不会出现错误，但当我前后移动时，会出现以下控制台错误：

angular.js:13294 TypeError: Cannot read property 'postMessage' of null
at X.g.K (https://s.ytimg.com/yts/jsbin/www-widgetapi-vflQQmM0D/www-    widgetapi.js:98:332)
at S (https://s.ytimg.com/yts/jsbin/www-widgetapi-vflQQmM0D/www-widgetapi.js:90:99)
at X.(anonymous function).Nb.(anonymous function) [as playVideo] (https://s.ytimg.com/yts/jsbin/www-widgetapi-vflQQmM0D/www-widgetapi.js:131:124)
at Scope.$scope.openYoutubeLink (http://127.0.0.1:50643/js/controllers/profileController.js:53:10)
at fn (eval at <anonymous> (https://ajax.googleapis.com/ajax/libs/angularjs/1.5.2/angular.js:14138:15), <anonymous>:4:716)
at expensiveCheckFn (https://ajax.googleapis.com/ajax/libs/angularjs/1.5.2/angular.js:15151:18)
at callback (https://ajax.googleapis.com/ajax/libs/angularjs/1.5.2/angular.js:24674:17)
at Scope.$eval (https://ajax.googleapis.com/ajax/libs/angularjs/1.5.2/angular.js:16895:28)
at Scope.$apply (https://ajax.googleapis.com/ajax/libs/angularjs/1.5.2/angular.js:16995:25)
at HTMLDivElement.<anonymous> (https://ajax.googleapis.com/ajax/libs/angularjs/1.5.2/angular.js:24679:23)

angular.js:13294 TypeError:无法读取null的属性“postMessage”
在X.g.K(https://s.ytimg.com/yts/jsbin/www-widgetapi-vflQQmM0D/www-    widgetapi.js:98:332）
在S(https://s.ytimg.com/yts/jsbin/www-widgetapi-vflQQmM0D/www-widgetapi.js:90:99)
at X.（匿名函数）.Nb.（匿名函数）[作为播放视频](https://s.ytimg.com/yts/jsbin/www-widgetapi-vflQQmM0D/www-widgetapi.js:131:124)
在范围内。$Scope.openYoutubeLink(http://127.0.0.1:50643/js/controllers/profileController.js:53:10)
fn时（评估时）(https://ajax.googleapis.com/ajax/libs/angularjs/1.5.2/angular.js:14138:15), :4:716)
昂贵的(https://ajax.googleapis.com/ajax/libs/angularjs/1.5.2/angular.js:15151:18)
回拨时(https://ajax.googleapis.com/ajax/libs/angularjs/1.5.2/angular.js:24674:17)
在范围内。$eval(https://ajax.googleapis.com/ajax/libs/angularjs/1.5.2/angular.js:16895:28)
在范围内。$apply(https://ajax.googleapis.com/ajax/libs/angularjs/1.5.2/angular.js:16995:25)
在HTMLDEVELENT。(https://ajax.googleapis.com/ajax/libs/angularjs/1.5.2/angular.js:24679:23)

---

我知道这是很多东西，但我尽量说清楚。有人知道如何解决这个问题吗

YouTube公共问题跟踪器中的A表示调用脚本时DOM可能仍然为空。尝试在触发脚本之前先设置容器，希望这样可以解决问题。您解决了这个问题吗？我现在面临着同样的问题。不，我解决的有点不同。我没有将视频占位符单独放在每个html页面上，而是将它放在带有ng include的索引中（因为我使用的是Angular），然后使用ng show对其进行了调整。它对我的应用程序有效，但我没有找到解决上述问题的好方法。YouTube公共问题跟踪器中的a表示调用脚本时DOM可能仍然为空。尝试在触发脚本之前先设置容器，希望这样可以解决问题。您解决了这个问题吗？我现在面临着同样的问题。不，我解决的有点不同。我没有将视频占位符单独放在每个html页面上，而是将它放在带有ng include的索引中（因为我使用的是Angular），然后使用ng show对其进行了调整。它对我的应用程序有效，但我没有找到一个解决上述问题的好方法。