onYoutubeIFrameAPIReady 只触发一次

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 只触发一次

onYoutubeIFrameAPIReady only fired once

angularjs

angularjs-directive

youtube-iframe-api