Plyr: Enhancment: Custom seeking

Created on 10 Jan 2018  路  2Comments  路  Source: sampotts/plyr

I want to use ply player, but I want to be able to manage my own seeking instead of byterange (default in html5 video)

My backend is transcoding a video and I when I call url?time=4234234 . It stops and seek the video before restarting the transcoding session.

What I want is the ability to force a duration (I can already do this in ply) and the ability to manage my own seek (provide an updated url) after seek is done.

So the player can resume the video.

I have implemented it using the standard html5 video with custom controls, but I would like to implement the same thing with ply.

Is there a way I can customize the seek functionality and the position of the video to be manually controlled ?

Question

Most helpful comment

You should be able to do this with the existing listeners functionality. I needed similar functionality and have successfully overridden the play/pause behavior of plyr.

Here's the bare minimum you need to get started.

var plyr = new Plyr('#video', {
    listeners: {
        seek: function (e) {
            e.preventDefault() // required on v2
            // Your code here
            return false    // required on v3
        }
    }
})

This works because all functions specified in listeners are bound before the default handlers. By using event.preventDefault() / return false, you are able to override the default plyr behavior. This is documented in the Options part of the Readme.

All 2 comments

You should be able to do this with the existing listeners functionality. I needed similar functionality and have successfully overridden the play/pause behavior of plyr.

Here's the bare minimum you need to get started.

var plyr = new Plyr('#video', {
    listeners: {
        seek: function (e) {
            e.preventDefault() // required on v2
            // Your code here
            return false    // required on v3
        }
    }
})

This works because all functions specified in listeners are bound before the default handlers. By using event.preventDefault() / return false, you are able to override the default plyr behavior. This is documented in the Options part of the Readme.

Thanks it is exactly what I was looking for.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

ahmadshc picture ahmadshc  路  3Comments

onigetoc picture onigetoc  路  3Comments

jwjcmw picture jwjcmw  路  4Comments

michaelmano picture michaelmano  路  3Comments

Generalomosco picture Generalomosco  路  3Comments