I am using a Wordpress plugin to add timestamp links of videos that will seek the video automatically to a certain timeframe.
Javascript:
function onYouTubeIframeAPIReady(){
console.log('Confirmation of call to onYouTubeIframeAPIReady()');
var STT = {
settings: STTSettings,
media: undefined,
skipTo: undefined,
isHTML5: false,
isYoutube: true,
doHTML5Skip: function() {
STT.media.removeEventListener('canplaythrough', STT.doHTML5Skip);
STT.media.currentTime = STT.skipTo;
STT.media.play();
},
doYoutubeSkip: function() {
STT.media.seekTo(STT.skipTo);
STT.media.playVideo();
}
};
STTSkipTo = function(time) {
var audio = document.getElementsByTagName('audio'),
video = document.getElementsByTagName('video'),
iframe = document.getElementsByTagName('iframe'),
timeArray = time.split(':').reverse(),
seconds = parseInt(timeArray[0]),
minutes = timeArray.length > 1 ? parseInt(timeArray[1]) : 0,
hours = timeArray.length > 2 ? parseInt(timeArray[2]) : 0;
STT.skipTo = seconds + (minutes * 60) + (hours * 3600);
if (STT.media) {
console.log(STT.media.seekTo);
STT.doSkip();
return;
}
if ((parseInt(STT.settings.link_audio) && audio.length) ||
(parseInt(STT.settings.link_video) && video.length))
{
STT.doSkip = STT.doHTML5Skip;
if (parseInt(STT.settings.link_audio) && audio.length) {
STT.media = audio[0];
} else {
STT.media = video[0];
}
STT.media.addEventListener('canplaythrough', STT.doHTML5Skip);
STT.media.load();
STT.media.play();
return;
} else if (parseInt(STT.settings.link_youtube && iframe.length)) {
// Inspect the iframes, looking for a src with youtube in the URI
for (var i = 0; i < iframe.length; i++) {
if (iframe[i].src.search('youtube') !== -1) {
// Set up the JS interface
STT.doSkip = STT.doYoutubeSkip;
iframe[0].id = 'stt-youtube-player';
STT.media = new YT.Player('stt-youtube-player', {
events: {
onReady: STT.doYoutubeSkip
}
});
return;
}
}
}
console.log('Skip to Timestamp: No media player found!');
return;
}
}
On my localhost, the plugin works seamlessly but on my hosted website, I get the following error with the stack as follows:
I think for some reason the website is unable to load the www-widgetapi.js which is a dependency for YouTube iframe API and thus is unable to generate the required function definition. However, I did try to include the script manually in the header but it still didn't work.
If anyone knows of any other wordpress plugin, please advice.
Based from this documentation, you need to set both the two parameter of the
player.seekTo(seconds:Number, allowSeekAhead:Boolean)
.The
seconds
parameter identifies the time to which the player should advance.The player will advance to the closest keyframe before that time unless the player has already downloaded the portion of the video to which the user is seeking.
The
allowSeekAhead
parameter determines whether the player will make a new request to the server if theseconds
parameter specifies a time outside of the currently buffered video data.It should be like:
Player.seekTo(120, true)//120 seconds