6
У меня возникла проблема с Youtube Iframe Api, используемым с угловыми.Youtube iframe Api и Angularjs route
Я думаю, что проблема заключается в вызове функции onYouTubeIframeAPIReady.
Я использую angularjs с маршрутами, и функция не срабатывает при изменении маршрута, однако, когда я нажимаю F5, все нормально, что плеер загружен.
Есть ли способ сделать angularjs с помощью маршрутов и API-интерфейса youtube?
мне не удалось добавить еще файл в коде, но «pageX.htm» выглядит следующим образом:
<button ng-click="video()">Create</button>
<div youtube-player id="test-playerX" ></div>
И есть код «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>Любая помощь приветствуется :)
[EDIT]: я обновил код, чтобы протестировать fonction createPlayer и подтвердить, что плеер работает при смене страниц.
Как вам использовать его наконец? Как я могу использовать его с несколькими видео YouTube на одной странице? Поэтому в основном у меня будут все ID видео youtube в массиве, и я хотел бы инициализировать их на странице как видео в ng-repeat, а затем записывать события по каждому из них по отдельности. Любая идея, как это можно сделать? –
Здравствуйте, наконец, я больше не использую youtube api, но тег iframe youtube ... Настроить youtube api в приложении angularjs действительно непросто. Извините, я не помог – djutopie
Нашел лучший способ сделать это. Если вы хотите реализовать его самостоятельно, используйте API iFrame Google. или используйте угловое репо https://github.com/brandly/angular-youtube-embed. Я использовал последний. :) –