6
Angularjs ile kullanılan Youtube Iframe Api ile ilgili bir sorunla karşılaştı.Youtube iframe Api ve Angularjs rotası
Sorunun "onYouTubeIframeAPIReady" işlevinin çağrısı olduğunu düşünüyorum.
Rotaları olan angularjleri kullanıyorum ve rota değiştiğinde işlev tetiklenmiyor, ancak F5 tuşuna bastığımda oyuncu yüklü.
Rotaları ve youtube API'sı çalışmalarıyla angularjs oluşturmanın bir yolu var mı?
Ben "pageX.htm" kodunda daha dosya eklemek ama başaramadışöyle :
<button ng-click="video()">Create</button>
<div youtube-player id="test-playerX" ></div>
Ve kod "index.htm"
<!DOCTYPE html>
<html ng-app="sc">
<body>
Homepage - <a href="#page1">Page1</a> - <a href="#page2">Page2</a>
<div ng-view></div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.min.js"></script>
<script src="https://code.angularjs.org/1.4.3/angular-route.min.js"></script>
<script>
var sc = angular.module('sc', ['ngRoute']);
sc.config(['$routeProvider', function($routeProvider) {
$routeProvider
.when('/page1', {
templateUrl: 'page1.htm'
})
.when('/page2', {
templateUrl: 'page2.htm'
})
}]);
// Run
sc.run(['$rootScope', function($rootScope) {
var tag = document.createElement('script');
// This is a protocol-relative URL as described here:
// http://paulirish.com/2010/the-protocol-relative-url/
// If you're testing a local page accessed via a file:/// URL, please set tag.src to
// "https://www.youtube.com/iframe_api" instead.
tag.src = "http://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
}]);
sc.service('youtubePlayerApi', ['$window', '$rootScope', '$log', function ($window, $rootScope, $log) {
var service = $rootScope.$new(true);
// Youtube callback when API is ready
$window.onYouTubeIframeAPIReady = function() {
$log.info('Youtube API is ready');
service.ready = true;
service.createPlayer();
};
service.ready = false;
service.playerId = null;
service.player = null;
service.videoId = "sGPrx9bjgC8";
service.playerHeight = '390';
service.playerWidth = '640';
service.bindVideoPlayer = function (elementId) {
$log.info('Binding to player ' + elementId);
service.playerId = elementId;
};
service.createPlayer = function() {
$log.info('Creating a new Youtube player for DOM id ' + this.playerId + ' and video ' + this.videoId);
return new YT.Player(this.playerId, {
height: this.playerHeight,
width: this.playerWidth,
videoId: this.videoId
});
};
service.loadPlayer = function() {
// API ready?
if (this.ready && this.playerId && this.videoId) {
if(this.player) {
this.player.destroy();
}
this.player = this.createPlayer();
}
};
return service;
}]);
sc.directive('youtubePlayer', ['youtubePlayerApi', function (youtubePlayerApi) {
return {
restrict:'A',
link:function (scope, element) {
youtubePlayerApi.bindVideoPlayer(element[0].id);
}
};
}]);
sc.controller('replaycontroller', function ($scope,youtubePlayerApi) {
$scope.video = function() {
youtubePlayerApi.createPlayer();
console.log("test");
}
});
</script>
</body>
</html>bir yardım takdir :)
[DÜZENLEME]: codection createPlayer'ı test etmek için kodu güncelledim ve oynatıcının
kullanmak: Burada
kodudur sonunda kullan? Aynı sayfada birden fazla youtube videosuyla nasıl kullanabilirim? Temel olarak, tüm youtube video kimliklerini bir diziye ekleyeceğim ve bunları bir ng-yinelemede videolar olarak başlatmak ve ardından her biri için ayrı ayrı etkinlik yakalamak istiyorum. Bunun nasıl yapılabileceği hakkında bir fikrin var mı? –Merhaba sonunda youtube api'yi kullanmam ama youtube iframe etiketi ... Bir angularjs uygulamasında youtube api'yi uygulamak gerçekten kolay değil. Üzgünüz, – djutopie
Yardım etmedim. Bunu yapmanın en iyi yolunu buldum. Kendiniz uygulamak istiyorsanız, Google'ın iFrame API'sini kullanın. veya https://github.com/brandly/angular-youtube-embed köşeli repo kullanın. Sonunu kullandım. :) –