How can I resume video from live?

[fahd313]

What do you want to do with Hls.js?

On live streaming when the live stream is paused and when we resume it. It is playing the video from where I left means from where I had paused the video but since it is a live stream, I want the video player to always play the live stream.

I am using HTML video tag play/pause methods.

Can someone please help me? How can I achieve that?

Thanks.

What have you tried so far?

No response

[zhiga90]

Same issue. @fahd313 Have you solved the problem yet?

[silltho]

To achieve a similar behaviour I implemented a class called TimeTracker which stores a timestamp (using perfromance.now()) and a value which is the currentTime of the video when the timestamp was created.

with these you can calculate exactly what position you should be and then set the player.currentTime.

The class im using looks something like this (can't share the whole file).

export class TimeTracker {
  private _value = 0
  private _timestamp = 0


  public constructor(value: number, timestamp?: number) {
    this._value = value
    this.setTimestamp(timestamp)
  }

  public set = (value: number, timestamp?: number) => {
    this._value = value
    this.setTimestamp(timestamp)
  }

  get currentTime() {
    const timeSince = performance.now() / 1000 - this._timestamp
    return this._value + timeSince
  }

  private setTimestamp = (timestamp?: number) => {
    this._timestamp = timestamp ?? performance.now() / 1000
  }
}

Here is an example on how you could use it.

	  video.addEventListener('paused', () => {
		  timetracker.set(video.currentTime)
	  })
	  
	  video.addEventListener('play', () => {
		  video.currentTime = timetracker.currentTime
	  })

How ever I have to say none of this has something todo with hls.js this can be achieved by using native html video features. So in the future I think StackOverflow would be a better place to ask questions like that.

[fahd313]

Unfortunately from hls js. I haven't found anything to in order achieve that but I have found out the workaround

` var videoTag = document.getElementById('video-player');

var playButton = document.getElementById('play-button');

playButton.onclick = function(){ videoTag.currentTime = videoTag.duration; videoTag.play(); } `

currentTime holds the current time of the video(where we are on the video). duration holds the duration of total video. Since it is a live stream it gets updated as more fragment downloaded.

[lpommers]

Can you just set the video's current time to the liveSyncPosition from HLS.js?

https://github.com/video-dev/hls.js/blob/master/docs/API.md#hlslivesyncposition

[dylanjha]

@fahd313 yup, you have the right idea here. Except that when jumping to the latest duration I imagine the player will have to buffer. Using liveSyncPosition as @lpommers suggests is what I would try.

[itsjamie]

Closing as answered.

[fahd313]

Same issue. @fahd313 Have you solved the problem yet?

Hi @zhiga90 please refer to my comment.

https://github.com/video-dev/hls.js/issues/4171#issuecomment-893476945