在 angularjs 应用程序中防止多个 youtube 视图不得 运行

Question

我有一个 Angularjs 应用程序，我在其中使用 videogular node module.

渲染 Youtube 视频列表

问题是用户可以 运行 同时播放多个 YouTube 视频。哪一项违反了 Youtube 政策？ 我们如何限制使用必须不能在同一页面上一次播放一个视图。

Answer 1

这就是我取得的成就

(function () {

'use strict';

angular
    .module('app')
    .directive('youtubePost', youtubeEmbedDir)

function youtubeEmbedDir($rootScope, $http, config, logger) {
    'ng-inject';
    return {
        restrict: 'A',
        scope: {
            item: '<item'
        },
        link: function (scope, element, attrs) {
            var thisPlayer;
            scope.isLoading = true;
            var videoId = null;

            $rootScope.$on('stopOtherYouttubePlayer', function (traget, id) {
                if (videoId && (id != videoId) && thisPlayer) {
                    try {
                        thisPlayer.stopVideo()
                    } catch (error) {
                        logger.error(error);
                    }
                }
            });

            /**
             *  YT is a windows object from youtube embed js
             */
            function createYoutubeWidget() {

                if (YT && YT.Player && new RegExp(/^(http(s)?:\/\/(www.)?youtube.com\/)/g).test(attrs.href)) {
                    videoId = attrs.href.match(/v=(\w|-)*/g)[0];
                    var el = angular.element(element).find('.youtube-player')[0];
                    videoId = videoId.replace('v=', '').replace('&', '');
                    thisPlayer = new YT.Player(el, {
                        width: '100%',
                        // related videos - off, watch later/ share - off, Annotations - off
                        playerVars: { rel: 0, showinfo: 0, iv_load_policy: 3 },
                        events: {
                            'onReady': onPlayerReady,
                            'onStateChange': onStateChange,
                            'onError': onError
                        }
                    });

                    function onStateChange(event) {
                        if (event.data == YT.PlayerState.PLAYING) {
                            $rootScope.$emit('stopOtherYouttubePlayer', videoId);
                        }
                    }

                    function onPlayerReady() {
                        thisPlayer.cueVideoById(videoId);
                    }

                    function onError(err) {
                        scope.$emit('failedToLoadSocialData', true);
                    }
                }
            }

            $http({
                method: 'GET',
                url: config.apiUrl + '/V1.0/proxy/youtube?url=' + attrs.href
            }).then(function (instagramEmbedJson) {
                if (instagramEmbedJson.status == 200) {
                    scope.isLoading = false;
                    createYoutubeWidget();
                }
                else {
                    scope.$emit('failedToLoadSocialData', true);
                }
            }, function () {
                scope.$emit('failedToLoadSocialData', true);
            });
        },
        template: '<div loading-pulse="isLoading"></div><div class="youtube-player"></div></div>'
    }
}

})();