Hi folks.
I have a page on my app where i have the Youtube Player APi to see youtube videos, im using adrianliaw:youtube-iframe-api and create a template with the sample code in the package page and add some functions to can provide a progress bar and the player current time and video duration.
Template.player.events({
'click #play-btn': function() {
if ($('#play-btn').hasClass('fa fa-play'))
player.playVideo();
if ($('#play-btn').hasClass('fa fa-pause'))
player.pauseVideo();
}
});
Template.player.onRendered(function() {
Session.set('currentVideoId', this.data.ytId);
// YouTube API will call onYouTubeIframeAPIReady() when API ready.
// Make sure it's a global variable.
onYouTubeIframeAPIReady = function() {
// New Video Player, the first argument is the id of the div.
// Make sure it's a global variable.
player = new YT.Player("player", {
height: "400",
width: "600",
// videoId is the "v" in URL (ex: http://www.youtube.com/watch?v=LdH1hSWGFGU, videoId = "LdH1hSWGFGU")
videoId: Session.get('currentVideoId'), // '-zW1zHqsdyc',
playerVars: {
enablejsapi: 1,
autoplay: 0,
fs: 0,
showinfo: 0,
cc_load_policy: 0,
controls: 0,
disablekb: 0,
modestbranding: 1,
rel: 0
},
// Events like ready, state change,
events: {
onReady: initialize,
'onStateChange': onPlayerStateChange
}
});
};
YT.load();
function initialize() {
// Update the controls on load
updateTimerDisplay();
updateProgressBar();
// Clear any old interval.
clearInterval(time_update_interval);
// Start interval to update elapsed time display and
// the elapsed part of the progress bar every second.
var time_update_interval = setInterval(function() {
updateTimerDisplay();
updateProgressBar();
}, 1000)
}
// This function is called by initialize()
function updateTimerDisplay() {
// Update current time text display.
$('#current-time').text(formatTime(player.getCurrentTime())+' /');
// $('#current-note').text(formatTime(player.getCurrentTime()));
$('#duration').text(formatTime(player.getDuration()));
}
function formatTime(time) {
time = Math.round(time);
var minutes = Math.floor(time / 60),
seconds = time - minutes * 60;
seconds = seconds < 10 ? '0' + seconds : seconds;
return minutes + ":" + seconds;
}
$('#progress-bar').on('mouseup touchend', function(e) {
// Calculate the new time for the video.
// new time in seconds = total duration in seconds * ( value of range input / 100 )
var newTime = player.getDuration() * (e.target.value / 100);
// Skip video to new time.
player.seekTo(newTime);
});
// This function is called by initialize()
function updateProgressBar() {
// Update the value of our progress bar accordingly.
$('#progress-bar').val((player.getCurrentTime() / player.getDuration()) * 100);
}
function onPlayerStateChange(event) {
switch (event.data) {
case YT.PlayerState.PLAYING:
$('#play-btn').removeClass('fa fa-play');
$('#play-btn').addClass('fa fa-pause');
break;
case YT.PlayerState.PAUSED:
$('#play-btn').removeClass('fa fa-pause');
$('#play-btn').addClass('fa fa-play');
break;
default:
return;
}
}
});
Everithing seems to work ok in terms of operation, in fact the Current time update every second and progress bar move and progress correctly, but this is in development enviroment and i got a lot of this kind of errors any time i go to any video page
Uncaught TypeError: player.getCurrentTime is not a function
at updateTimerDisplay (player.js?hash=95116cf…:97)
at player.js?hash=95116cf…:86
updateTimerDisplay @ player.js?hash=95116cf…:97
(anonymous) @ player.js?hash=95116cf…:86
player.js?hash=95116cf…:97 Uncaught TypeError: player.getCurrentTime is not a function
at updateTimerDisplay (player.js?hash=95116cf…:97)
at player.js?hash=95116cf…:86
updateTimerDisplay @ player.js?hash=95116cf…:97
(anonymous) @ player.js?hash=95116cf…:86
sw.js:5 Uncaught TypeError: Object.defineProperty called on non-object
r @ sw.js:5
(anonymous) @ sw.js:57
w @ sw.js:11
(anonymous) @ sw.js:52
player.js?hash=95116cf…:97 Uncaught TypeError: player.getCurrentTime is not a function
at updateTimerDisplay (player.js?hash=95116cf…:97)
at player.js?hash=95116cf…:86
updateTimerDisplay @ player.js?hash=95116cf…:97
(anonymous) @ player.js?hash=95116cf…:86
player.js?hash=95116cf…:97 Uncaught TypeError: player.getCurrentTime is not a function
at updateTimerDisplay (player.js?hash=95116cf…:97)
at player.js?hash=95116cf…:86
updateTimerDisplay @ player.js?hash=95116cf…:97
(anonymous) @ player.js?hash=95116cf…:86
player.js?hash=95116cf…:97 Uncaught TypeError: player.getCurrentTime is not a function
at updateTimerDisplay (player.js?hash=95116cf…:97)
at player.js?hash=95116cf…:86
updateTimerDisplay @ player.js?hash=95116cf…:97
(anonymous) @ player.js?hash=95116cf…:86
player.js?hash=95116cf…:97 Uncaught TypeError: player.getCurrentTime is not a function
at updateTimerDisplay (player.js?hash=95116cf…:97)
at player.js?hash=95116cf…:86
updateTimerDisplay @ player.js?hash=95116cf…:97
(anonymous) @ player.js?hash=95116cf…:86
player.js?hash=95116cf…:97 Uncaught TypeError: player.getCurrentTime is not a function
at updateTimerDisplay (player.js?hash=95116cf…:97)
at player.js?hash=95116cf…:86
updateTimerDisplay @ player.js?hash=95116cf…:97
(anonymous) @ player.js?hash=95116cf…:86
player.js?hash=95116cf…:97 Uncaught TypeError: player.getCurrentTime is not a function
at updateTimerDisplay (player.js?hash=95116cf…:97)
at player.js?hash=95116cf…:86
updateTimerDisplay @ player.js?hash=95116cf…:97
(anonymous) @ player.js?hash=95116cf…:86
sw.js:5 Uncaught TypeError: Object.defineProperty called on non-object
I think could be something relative to the scope of the function, im really too new to know what in doing bad, someone can advice me about what i could be doing worng?
thanks