javascript - 防止多个 youtube 视图不得在 angularjs 应用程序中运行
问题描述
我有一个 Angularjs 应用程序,我在其中使用videogular node module
.
问题是用户可以同时运行多个 youtube 视频。哪个违反了 Youtube 政策?我们如何限制使用一定不能在同一页面上一次播放一个视图。
解决方案
这就是我的成就
(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>'
}
}
})();
推荐阅读
- javascript - react native:从对象中显示特定项目的正确方法是什么?
- c# - ASP.NET 4 FileUpload 和 OpenFileDialog
- git - 什么决定了 git 引用事务挂钩何时运行?
- node.js - 即使服务器出错,快递也会返回 200
- sharepoint - 自定义 Sharepoint 在线列表和站点页面
- botframework - 通话和会议机器人团队,演讲
- javascript - 表格宽度在 Firefox html 上无法按预期工作
- php - 如何在php中获取sql执行的返回值
- html - 为什么你需要在下面的引导手风琴代码中显示 fontawesome chevron 的 "::before" css 修饰符
- python - 全局命名空间中的 argparse 参数将覆盖其他文件的参数