Offset timeline?

[Danetag]

• [x] Issue does not already exist
• [ ] Issue observed on https://plyr.io

Is there a way to specify an "offset left/right" on the duration to be able to have the timeline representing a specific part of the video?

To be more specific, I have a long video with an intro. Once the intro has past, I display the controls. But I don't want the user to be able to scrub back to the intro, but only from that current timecode to the end of the video. Is there a way to currently do that?

Thanks!

[friday]

This should be possible using separate videos (loading the second one after the first has ended), but not with the same video (I don't think this is something worth supporting).

See the docs: https://github.com/sampotts/plyr#the-source-setter

Also, if playlists (#3) are added, this would make it even easier.

[friday]

Closing since this should answer the question ^

Messing with the progress positioning is probably not a good idea at all since it's also used for seeking (displaying tooltips with time and then seeking to the time based on the relative position of the cursor).

[caltabid]

If this is still of interest, I managed to do this in Vue, exploiting vue-plyr (but should be applicable also to plain JS or other frameworks) and creating my custom component:

<div ref="videoWrapper">
  <vue-plyr ref="vuePlayer" :options="plyrOptions">
    <video controls playsinline></video>
  </vue-plyr>
</div>

I then used my custom plyr controls as described in plyr documentation:

<div class="plyr__controls">
  ...
  <div class="plyr__controls__item plyr__progress__container"><div class="plyr__progress">
    <input id="plyrSeek" type="range" min="0" max="0" step="0.01" value="0" autocomplete="off" role="slider" aria-label="Seek" aria-valuemin="0" aria-valuemax="0" aria-valuenow="0" aria-valuetext="00:00" style="--value:6.54%;" seek-value="0">
    <progress id="plyrProgress" class="plyr__progress__buffer" min="0" max="100" value="0" role="progressbar" aria-hidden="true">% buffered</progress>
  </div>
  ...
</div>

and had to handle manually:

  this.$refs.vuePlayer.player.on('timeupdate', this.timeupdate);
  this.$refs.vuePlayer.player.on('progress', this.timeupdate);
  input.addEventListener('input', this.setSeekTimeCB);
  input.addEventListener('change', this.setSeekTimeCB);

where in timeupdate you need to update the dom with your computed time and take care of time overflows, while in setSeekTimeCB you update plyr currentTime from your customised time.