6
Tôi gặp sự cố với Youtube Iframe Api được sử dụng với angularjs.Youtube iframe Api và Angularjs route
Tôi nghĩ rằng sự cố là cuộc gọi của chức năng "onYouTubeIframeAPIReady".
Tôi sử dụng angularjs với các tuyến đường và chức năng không kích hoạt khi tuyến đường được thay đổi, tuy nhiên khi tôi nhấn F5, người chơi sẽ được tải.
Có cách nào để tạo góc cạnh với các tuyến đường và API youtube hoạt động không?
tôi không quản lý để thêm tập tin hơn trong các mã nhưng "pageX.htm" trông như thế này:
<button ng-click="video()">Create</button>
<div youtube-player id="test-playerX" ></div>
Và có mã cho "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>Any help is appreciated :)
[EDIT]: Tôi đã cập nhật mã để kiểm tra fonction createPlayer và xác nhận rằng trình phát đang hoạt động khi thay đổi các trang
Làm thế nào đã làm bạn sử dụng nó cuối cùng? Làm thế nào tôi có thể sử dụng nó với nhiều video youtube trên cùng một trang? Vì vậy, về cơ bản tôi sẽ có tất cả các ID video youtube trong một mảng, và tôi muốn khởi tạo chúng trên trang như video trong một ng-lặp lại và sau đó nắm bắt các sự kiện trên mỗi một trong số họ cá nhân. Bất kỳ ý tưởng làm thế nào mà có thể được thực hiện? –
Xin chào cuối cùng tôi không còn sử dụng youtube api nhưng thẻ iframe youtube ... Nó thực sự không dễ dàng để thực hiện api youtube trên một ứng dụng angularjs. Xin lỗi tôi đã không giúp đỡ – djutopie
Tìm cách tốt nhất để làm điều đó. Nếu bạn muốn tự mình triển khai, hãy sử dụng API iFrame của Google. hoặc sử dụng repo góc https://github.com/brandly/angular-youtube-embed. Tôi đã sử dụng cái sau. :) –