Блог

У меня есть приложение, которое встраивает в него прямую трансляцию. Чтобы учесть задержки, я хотел бы знать, какова текущая временная метка потока, и сравнить ее со временем на сервере.

Что я тестировал до сих пор, так это проверку разницы между буферизованным временем видео и текущим временем видео:

player.bufferedEnd() - player.currentTime()

Однако вместо этого я хотел бы сравнить время с сервером, и для этого мне нужно получить временную метку последнего запрошенного файла .ts.

Итак, мой вопрос заключается в использовании video.js есть ли какой-нибудь способ получить временную метку последнего запрошенного файла .ts?

Video.js версия: 7.4.1

Мне удалось решить эту проблему, однако, пожалуйста, потерпите меня, я не помню, где я нашел документацию для этого фрагмента кода.

В моем случае я работал в приложении Angular, у меня был видеокомпонент, отвечающий за загрузку прямой трансляции с использованием video.js. В любом случае, давайте посмотрим некоторый код…

Инициализация видео

 private videoInit() {
    this.player = videojs('video', {
        aspectRatio: this.videoStream.aspectRatio,
        controls: true,
        autoplay: false,
        muted: true,
        html5: {
            hls: {
                overrideNative: true
            }
        }
    });

    this.player.src({
        src: '://some-stream-url.com',
        type: 'application/x-mpegURL'
    });

    // on video play callback
    this.player.on('play', () => {
        this.saveHlsObject();
    });
}
  

Сохранить объект HLS

 private saveHlsObject() {
    if (this.player !== undefined) {
        this.playerHls = (this.player.tech() as any).hls;

        // get and syncing server time...
        // make some request to get server time...
        // then calculate difference...
        this.diff = serverTime.getTime() - this.getVideoTime().getTime();
    }
}
  

Получить временную метку сегмента видео

 // access the player's playlists, get the last segment and extract time
// in my case URI of segments were for example: 1590763989033.ts
private getVideoTime(): Date {
    const targetMedia = this.playerHls.playlists.media();

    const lastSegment = targetMedia.segments[0];

    const uri: string = lastSegment.uri;
    const segmentTimestamp: number =  uri.substring(0, uri.length - 3);

    return new Date(segmentTimestamp);
}
  

Итак, выше главное — это getVideoTime функция. Время сегмента можно найти в URI сегмента, так что функция извлекает время из URI сегмента, а затем преобразует его в объект Date. Теперь, честно говоря, я не знаю, является ли этот формат URI чем-то стандартным для HLS или что-то, что было установлено для конкретного потока, к которому я подключался. Надеюсь, это поможет, и извините, у меня нет более конкретной информации!