Question

我有一个angularjs应用程序，我想在新闻源中显示一些youtube视频。我已经创建了一个加载播放器的指令，当我第一次进入包含视频的视图时，我的视频会加载。但如果我离开视图，再次打开视频，则视频未加载。

似乎只有在我第一次进入视图时才会触发“onYouTubeIframeAPIReady”事件。

观点：

        <div bind-html-compile="newsitem.description"></div>

newsitem.description是原始html发送到应用程序的json。

所以看起来像：

{'this is a video <youtube videoid="myYoutubeVideoId"></youtube>'}

这也是我使用bind-html-compile指令的原因。

指令

.directive('youtube', function($window) {
return {
    restrict: "E",

    scope: {
        videoid: "@"
    },

    template: '<div></div>',

    link: function(scope, element, attrs) {
        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(element.children()[0], {
                 playerVars: {
                    autoplay: 0,
                    html5: 1,
                    theme: "light",
                    modesbranding: 1,
                    color: "white",
                    iv_load_policy: 3,
                    showinfo: 0,
                    controls: 0,
                    rel: 0,
                },
                videoId: scope.videoid
            });
        };
    }
}})

当我从onYoutubeIFrameAPIReady我的console.log时，我只是第一次得到输出.. 因此我认为事件在功能准备好之前以某种方式被触发，但我无法理解它。

有什么想法吗？

Answer 1

我遇到了同样的问题。阅读本文，由于您的代码非常接近文章的代码，我假设您遵循了这篇文章，您只是没有读到文章的底部：

http://blog.oxrud.com/posts/creating-youtube-directive/

我在底部找到了解释原因，并展示了多个视频的工作原理。我还没有尝试自己解决，但想回答你的问题：

http://run.plnkr.co/plunks/8lxuN8/

onYoutubeIFrameAPIReady只触发一次

1 个答案: