Add markers after initialization

[mixalistzikas]

Expected behaviour

I want to add new markers after initialization

Actual behavior

Keep showing the old markers

Steps to reproduce

defaultOptions.markers = { enabled: true, points: [{ time: 1, label: 'Label 1' }] } var player = new Plyr(video, defaultOptions); player.config.markers = { enabled: true, points: [{ time: 1, label: 'Label 1' }, { time: 2, label: 'Label 2' }] }

Environment

• Browser: All
• Version: 3.7.0
• Operating System: Windows
• Version: 11

[sampotts]

This ties back to several other issues where the config is immutable after creating the player. It's not great but it's probably not going to change but is something we'll consider for the new Vidstack player which will be Plyr's next evolution.

[mixalistzikas]

@sampotts I created my own solution extending your component, so I'm ok for now. Thanks anyway

[parkersprouse]

@mixalistzikas

Would you be willing to share your solution to this? I also need to be able to dynamically add markers and would prefer not to have to create one from scratch if one already exists, especially since I'm on a tight schedule.

[v-stempel]

you can add ponits with overriding .points array) something like this: player.config.markers.points = [{ time: 1, label: 'Label 1' }, { time: 2, label: 'Label 2' }]

[paradix]

you can add ponits with overriding .points array) something like this: player.config.markers.points = [{ time: 1, label: 'Label 1' }, { time: 2, label: 'Label 2' }]

does it really work? I tried doing the same, but the view does not refresh correctly. The labels show but the marker is not visible

[v-stempel]

@paradix check styles, maybe you have white timeline (markers are white by default if I'm not wrong)

[paradix]

@paradix check styles, maybe you have white timeline (markers are white by default if I'm not wrong)

Could be I'll check again, but statically added markers are visible

[v-stempel]

@paradix did you add an empty marker array to the Plyr settings?

[paradix]

I did something like that

    player = new Plyr('#player', {
        markers: { 
            enabled: true, 
            points: [
                { 
                    time: 60,
                    label: "Test" 
                },
            ] 
        },
        volume: 0,
        invertTime: false,
    });

and than programatically

    let points = [...player.config.markers.points];
    points.push( {time: 10, label: "Test"} );
    player.config.markers.points = points;

And this results in this for the static one

and this for the programatic one

[v-stempel]

@paradix don't know, it works for me)

[paradix]

@paradix don't know, it works for me)

With the same piece of code?

[v-stempel]

Almost

[paradix]

wierd as the markers are created only at this three events

on.call(player, player.media, 'durationchange loadeddata loadedmetadata', (event) =>
    controls.durationUpdate.call(player, event),
);

So the question is when are you adding markers dynamically or do you somehow force any of this events?

[gitbucket-crypto]

Its possible use class markers