我使用两个使用YouTube Iframe API的指令在我的角度应用中嵌入了Youtube视频。第一个加载库异步
angular.module('myApp')
.service('youTubeService', function($rootScope, $window) {
var self = this;
self.ready = false;
$window.onYouTubeIframeAPIReady = function () {
self.ready = true;
console.log("Youtube service ready");
$rootScope.$broadcast('youTubeServiceReady', true);
};
var tag = document.createElement('script');
tag.src = '//www.youtube.com/iframe_api';
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
});
然后我使用javascript库嵌入视频
angular.module('myApp')
.directive('youtube', function (youTubeService) {
return {
link: function (scope, element, attrs) {
var player;
var playerReady = false;
var playerState;
var callback;
var carouselScope = element.parent().parent().scope();
function createPlayer() {
player = new YT.Player(element[0], {
height: attrs.height,
width: attrs.width,
videoId: attrs.youtube,
playerVars: { 'start' : attrs.starttime, 'end' : attrs.endtime, 'origin': 'https://', showinfo: 0, modestbranding: 1 },
events: {
onReady: function () {
playerReady = true;
// if (callback !== null) {
// callback();
// }
},
onStateChange: function (event) {
//console.log("Time:" + getCurrentTime() + ", Duration:" + getDuration() );
playerState = event.data;
if (playerState === YT.PlayerState.PAUSED) {
carouselScope.play();
}
}
}
});
}
if (youTubeService.ready) {
createPlayer();
} else {
scope.$on('youTubeServiceReady', function () {
createPlayer();
});
}
...
直到昨天这已经工作了几个月,但现在我得到了以下视频,因为我在所有桌面浏览器中嵌入了
https://support.google.com/youtube/answer/6098135?hl=en-GB
我的问题是我无法弄清楚我应该改变什么,因为据我所知,iframe api是正确的。有谁知道我应该改变什么?
答案 0 :(得分:0)
所以我们的网站遇到了完全相同的问题。
事实证明,我们的客户端使用与您的代码非常类似的代码正常运行。我们的问题最终成为我们将视频和视频元数据添加到数据库的方式。
这可能不是您的问题,但我们正在使用
http://gdata.youtube.com/feeds/api/videos/<video id>?v=2&alt=json
将视频添加到我们的系统中。由于这是一个不推荐使用的端点,我们不得不升级到v3系统,这将在此解释:ftp://ns432777.ip-37-59-27.eu/Program%20Files%20%28x86%29/Windows%20Kits/8.0/Include/um/baseaudioprocessingobject.h