我遇到了与angularjs一起使用的Youtube Iframe Api的问题。
我认为问题在于＆＃34; onYouTubeIframeAPIReady＆＃34;功能
我将angularjs与路线一起使用，当路线改变时，该功能不会被触发，但是当我按下F5时，玩家就被加载了。
有没有办法让angularjs与路由和youtube API一起工作？
我没有设法在代码中添加更多文件，但是＆＃34; pageX.htm＆＃34;看起来像这样：
<button ng-click="video()">Create</button>
<div youtube-player id="test-playerX" ></div>
还有＆＃34; index.htm＆＃34;
的代码
<!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并在更改页面时确认播放器正在工作
答案 0 :(得分：3)
正如Karan Kapoor在上一篇评论中所说，使用youtube api和angularjs的最佳方法是使用github.com/brandly/angular-youtube-embed
答案 1 :(得分：2)
好的我找到了一个解决方案，它并不是最干净的但是有效。
我承认，在更改路径时，在控制器中，youtube api已经初始化。所以控制器只是创建播放器。
当请求F5或首次加载时，我们必须触发YouTubeIframeAPIReady来实例化播放器。
以下是代码：
<!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',
controller: 'replaycontroller'
})
.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.getStatus = function () {
return service.ready;
};
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) {
if (youtubePlayerApi.getStatus() == true) {
youtubePlayerApi.bindVideoPlayer("test-player1");
youtubePlayerApi.createPlayer();
}
});
</script>
</body>
</html>
答案 2 :(得分：0)
我遇到了同样的问题，我所做的是将脚本重置为null，然后再次设置它：
init() {
if (window["YT"]) {
window["YT"] = null;
this.tag = document.createElement("script");
this.tag.src = "https://www.youtube.com/iframe_api";
this.firstScriptTag = document.getElementsByTagName("script")[0];
this.firstScriptTag.parentNode.insertBefore(this.tag, this.firstScriptTag);
}
this.tag = document.createElement("script");
this.tag.src = "https://www.youtube.com/iframe_api";
this.firstScriptTag = document.getElementsByTagName("script")[0];
this.firstScriptTag.parentNode.insertBefore(this.tag, this.firstScriptTag);
window["onYouTubeIframeAPIReady"] = () => this.startVideo();
}