Question

我有一个AngularJS应用程序，我正在使用嵌入式YouTube视频，但我现在正在努力解决特定错误。 Stackoverflow上有一些关于它的帖子，但我无法解决它。

当我打开页面并按下播放“按钮”（或div）时，视频和自定义媒体播放器会显示并正常工作，但当我返回到另一个页面时，该功能将不再被调用什么也没说。

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

当然还有YoutubeApi功能：

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)

我知道这很多东西，但我试着尽可能清楚。有人知道如何解决这个问题吗？

AngularJS onYoutubeIframeAPIReady仅在刷新后有效

0 个答案: