我在使用 angularjs 时遇到了 Youtube Iframe Api 的问题。
我认为问题出在“onYouTubeIframeAPIReady”函数的调用上。
我将 angularjs 与路线一起使用，并且当路线更改时该函数不会触发，但是当我按 F5 时，播放器已加载。
有没有办法让 AngularJS 与路由和 youtube API 一起工作？
我没能在代码中添加更多文件，但“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>感谢任何帮助:)
[编辑]:我已经更新了代码来测试 createPlayer 功能并确认播放器在更改页面时正常工作
最佳答案
正如 Karan Kapoor 在最后一条评论中所说，将 youtube api 与 angularjs 结合使用的最佳方法是使用 github.com/brandly/angular-youtube-embed
关于angularjs - Youtube iframe Api 和 Angularjs 路线，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31828569/