CODEWITHSUNDEEP
youtube-apiyoutube-iframe-api
RusinaRange
RusinaRange

Reputation: 431

Player.seekTo is not a function

I have the following init:

Player.init(element.id, playerId, () => {
    this.onReady(videoId, socket)
})

and callback:

onReady(videoId, socket){
    let msgContainer = document.getElementById("msg-container")
    let msgInput     = document.getElementById("msg-input")
    let postButton   = document.getElementById("msg-submit")
    let vidChannel   = socket.channel("videos:" + videoId)

    postButton.addEventListener("click", e => {
        let payload = {body: msgInput.value, at: Player.getCurrentTime()}
        vidChannel.push("new_annotation", payload)
            .receive("error", e => console.log(e) )
        msgInput.value = ""
    })

    msgContainer.addEventListener("click", e => {
        e.preventDefault()
        let seconds = e.target.getAttribute("data-seek") ||
                      e.target.parentNode.getAttribute("data-seek")
        if (!seconds) { return }

        Player.seekTo(seconds)
    })

    ...
}

However the Player.seekTo function fails with _player2.default.seekTo is not a function while the Player.getCurrentTime() function call works just as expected.

edit: I have also tried it with the seekahead parameter, same result.

Upvotes: 1

Views: 3935

Answers (2)

David Ruskin
David Ruskin

Reputation: 1

I know this is an old question, but I just struggled with this, too. Here's what I ran into.

In my HTML code, I had

<iframe id="player" type="text/html"
    width="640"
    height="390"
    src="http://www.youtube.com/embed/...?enablejsapi=1&origin=https://[my_domain].com/"
    frameborder="1"
></iframe>

It was the &origin= ... part of the src attribute. Mixing HTTPS and HTTP led to the issue. Even though the YouTube API reference has this example code:

<iframe id="player" type="text/html" width="640" height="390"
  src="http://www.youtube.com/embed/M7lc1UVf-VE?enablejsapi=1&origin=http://example.com"
  frameborder="0"></iframe>

This is no longer current. HTTPS must be used to cooperate with some browsers, especially mobile.

Upvotes: 0

adjuremods
adjuremods

Reputation: 2998

From the documentation of YouTube, the player.seekTo(seconds:Number, allowSeekAhead:Boolean) has two parameter that you need to set.

  • The seconds parameter that identifies the time to which the player should advance.

And

  • 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.

So your code must look like this:

msgContainer.addEventListener("click", e => {
    e.preventDefault()
    let seconds = e.target.getAttribute("data-seek") ||
    e.target.parentNode.getAttribute("data-seek")
    if (!seconds) { return }

    Player.seekTo(120, true)//120 seconds
})

For more information, check this SO question:

Upvotes: 1

Related Questions