88197

seekTo() is not a function YouTube iframe API error

Question:

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:

<blockquote>

Uncaught TypeError: STT.media.seekTo is not a function <a href="https://i.stack.imgur.com/W2mHa.png" rel="nofollow"><img alt="enter image description here" class="b-lazy" data-src="https://i.stack.imgur.com/W2mHa.png" data-original="https://i.stack.imgur.com/W2mHa.png" src="https://etrip.eimg.top/images/2019/05/07/timg.gif" /></a>

</blockquote>

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.

Answer1:

Based from this <a href="https://developers.google.com/youtube/iframe_api_reference#Playback_controls" rel="nofollow">documentation</a>, you need to set both the two parameter of the player.seekTo(seconds:Number, allowSeekAhead:Boolean).

<blockquote>

Seeks to a specified time in the video. If the player is paused when the function is called, it will remain paused. If the function is called from another state (playing, video cued, etc.), the player will play the video.

</blockquote> <ul><li>

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.

</li> <li>

The allowSeekAhead parameter determines whether the player will make a new request to the server if the seconds parameter specifies a time outside of the currently buffered video data.

</li> </ul>

It should be like: Player.seekTo(120, true)//120 seconds

Recommend

  • seekTo() is not a function YouTube iframe API error
  • Php add time to time
  • Not allowed to load local resource:
  • Play multiple Plyr Vimeo embeds on hover
  • Scrollview of UiTableview with multiple textfield shows copy value from one to another
  • Javascript email opt-in form event on youtube API
  • Custom ListField With Checkboxes in Blackberry
  • Best alternative to the 'title' attribute for storing data, like alternative meanings of w
  • getting java.lang.ClassCastException: class java.lang.String in running a simple MapReduce Program
  • d3.js create stacked bar chart from values in object
  • Getting directory of input file (Applescript)
  • Finding parents in a tree hierarchy for a given child LINQ (lambda expression)
  • How to sort things out in ListView?
  • Python: Split a String Field into 3 Separate Fields using Lambda
  • how can I compare dates in array to find the earliest one?
  • Javascript Array, Object, Date not defined
  • Divide a $1 by 3 and adjusting 1 cent
  • XMLBeans Duplicate Class and Class Not Found Errors
  • Is there a way to dynamically embed PDF Files in a JSP pulled from the file system?
  • How do I shift the decimal place in Python?
  • Invalid Date on validation Date of js
  • Is it possible to open regedit and navigate to straight to a specific key using process.start?
  • Detect when Facebook like button is clicked
  • print() is showing quotation marks in results
  • Q promise. Difference between .when and .then
  • Illegal mix of collations for operation for date/time comparison
  • retrieve vertices with no linked edge in arangodb
  • File upload with ng-file-upload throwing error
  • A cron job substitute?
  • How to set the response of a form post action to a iframe source?
  • FormattedException instead of throw new Exception(string.Format(…)) in .NET
  • Change div Background jquery
  • apache spark aggregate function using min value