video.js m3u8 sound and video not synced

m3u8 sound and video not synced

Open christoschronopoulos opened this issue 2 years ago • 20 comments

Description

I am trying to make a live streaming link play in my website but the sound and video are not synced.

Steps to reproduce

Explain in detail the exact steps necessary to reproduce the issue.

I include the following in the of my website

<head>
  <link href="https://unpkg.com/video.js/dist/video-js.css" rel="stylesheet">
  <script src="https://vjs.zencdn.net/ie8/ie8-version/videojs-ie8.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/videojs-contrib-hls/5.14.1/videojs-contrib-hls.js"></script>
  <script src="https://vjs.zencdn.net/7.2.3/video.js"></script>  
</head>

Include the following code of source in the

<video id="webtv" autoplay="true" class="video-js vjs-default-skin vjs-16-9 vjs-fluid" controls>
    <source src="https://antennaamdnoenc.akamaized.net/ant1_akamai/abr/playlist.m3u8" type="application/x-mpegURL">
</video>

<script>
var overrideNative = false;

var player = videojs('webtv', {
	html5: {
    hls: {
      overrideNative: overrideNative
    },
    nativeVideoTracks: !overrideNative,
    nativeAudioTracks: !overrideNative,
    nativeTextTracks: !overrideNative
  }
});
player.play();
</script>

Refresh the website and test

Results

Expected

The sound and video are synced

Actual

There is a few seconds delay in the sound and video

Error output

Additional Information

Please include any additional information necessary here. Including the following:

versions

videojs

videojs 7.2.3

browsers

WebOS 05.10.25 (LG)

OSes

WebOS 05.10.25 (LG)

plugins

are any videojs plugins being used on the page? If so, please list them below.

Note 1

If I use the latest version of video-js with the following code instead of 7.2.3, the video loads with SYNCED sound but it stucks in infinite loading after 20-30 seconds.

<!-- unpkg : use the latest version of Video.js -->
<link href="https://unpkg.com/video.js/dist/video-js.min.css" rel="stylesheet">
<script src="https://unpkg.com/video.js/dist/video.min.js"></script>

Note 2

The above code with video-js in version 7.2.3 works nicely on Google Chrome on my macbook but not on WebOS (LG smart TV)

Dec 01 '21 20:12 christoschronopoulos

Hey! We've detected some video files in a comment on this issue. If you'd like to permanently archive these videos and tie them to this project, a maintainer of the project can reply to this issue with the following commands:

for https://antennaamdnoenc.akamaized.net/ant1_akamai/abr/playlist.m3u8: say @video-archivist-bot save gjxJmA

Dec 01 '21 20:12 video-archivist-bot

👋 Thanks for opening your first issue here! 👋

If you're reporting a 🐞 bug, please make sure you include steps to reproduce it. We get a lot of issues on this repo, so please be patient and we will get back to you as soon as we can. To help make it easier for us to investigate your issue, please follow the contributing guidelines.

Dec 01 '21 20:12 welcome[bot]

Video.js 7.2.3 is more than 3 years old at this point, and we've done a lot of improvements to the playback engine in the last 3 years. In desktop Chrome, I see playback happening without any stalling and the audio and video are synced. Since you say you're testing with WebOS, can you check which version of WebOS? Chrome changed how to handle internal timing of video data in, I believe, Chrome 69, and our playback engine reflects that. Some older WebOS TVs use a Chromium version older than this and so playback may have issues. My recommendation is to make sure that native playback is being used, though, native playback is often not very good. Unfortunately, I don't have a good answer here as we don't have or test with webos on a regular basis.

Dec 01 '21 21:12 gkatsev

@gkatsev thanks a lot for taking the time to reply! If I am not mistaken, the WebOS version is 05.10.25 and the issue is observed on the pre-installed web browser app. I figured that the 7.2.3 is quite old version but it seems weird why with newer (or the latest) version the video is synced with the sound but stops playing after some seconds. I don't get it. Regarding the native playback, could you please elaborate? I am not sure how I can do that.

Dec 01 '21 21:12 christoschronopoulos

It seems that this solves (at least for now) the issue without any other changes.

<script>
var overrideNative = false;

var player = videojs('ant1', {
  html5: {  
    nativeAudioTracks: false,
    nativeVideoTracks: false,
    hls: {
      debug: true,
      overrideNative: true
    }
}});
player.play();
</script>

I will keep testing the m3u8 link and write here, in case anyone else faces similar issues with WebOS.

Dec 01 '21 21:12 christoschronopoulos

When overrideNative is true, Video.js will actually use our playback engine rather than the native playback engine. Though, if it works for you, that's great! Our playback engine, generally, works better.

Dec 01 '21 22:12 gkatsev

I am also having his issue using the latest version (7.18.1 (2022-02-23)). You can get the example files here: https://stoneprojectstaging.blob.core.windows.net/pub-f01fe15a-daf7-47f0-aa51-1587073ad1d2/f01fe15a-daf7-47f0-aa51-1587073ad1d2.m3u8 https://stoneprojectstaging.blob.core.windows.net/pub-f01fe15a-daf7-47f0-aa51-1587073ad1d2/full-000.ts https://stoneprojectstaging.blob.core.windows.net/pub-f01fe15a-daf7-47f0-aa51-1587073ad1d2/full-001.ts

or view them in the videojs instance we are using here: https://chalk.writeinstone.com/public/research/published-fecaddfa-6736-416f-862f-38ca8aea9a89

The m3u8 and the .ts files all play back with correct sync in vlc. Using the override native options in the comment above showed no change. There is probably a fix for this on the encoding side but I would much rather not have to dig into that as encoding is complex.

Feb 24 '22 19:02 DuncanStone

for https://stoneprojectstaging.blob.core.windows.net/pub-f01fe15a-daf7-47f0-aa51-1587073ad1d2/f01fe15a-daf7-47f0-aa51-1587073ad1d2.m3u8: say @video-archivist-bot save PA00MA
for https://stoneprojectstaging.blob.core.windows.net/pub-f01fe15a-daf7-47f0-aa51-1587073ad1d2/full-000.ts: say @video-archivist-bot save 4EkWxE
for https://stoneprojectstaging.blob.core.windows.net/pub-f01fe15a-daf7-47f0-aa51-1587073ad1d2/full-001.ts: say @video-archivist-bot save gAg5Jj

Feb 24 '22 19:02 video-archivist-bot

@video-archivist-bot save PA00MA @video-archivist-bot save 4EkWxE @video-archivist-bot save gAg5Jj

Feb 24 '22 19:02 DuncanStone

OK, we've archived PA00MA (https://stoneprojectstaging.blob.core.windows.net/pub-f01fe15a-daf7-47f0-aa51-1587073ad1d2/f01fe15a-daf7-47f0-aa51-1587073ad1d2.m3u8) over at https://storage.playbackproblems.mux.dev/PA00MA/playlist.m3u8 and we'll keep it there for future reference.

Feb 24 '22 19:02 video-archivist-bot

OK, we've archived 4EkWxE (https://stoneprojectstaging.blob.core.windows.net/pub-f01fe15a-daf7-47f0-aa51-1587073ad1d2/full-000.ts) over at https://storage.playbackproblems.mux.dev/4EkWxE.ts and we'll keep it there for future reference.

Feb 24 '22 19:02 video-archivist-bot

OK, we've archived gAg5Jj (https://stoneprojectstaging.blob.core.windows.net/pub-f01fe15a-daf7-47f0-aa51-1587073ad1d2/full-001.ts) over at https://storage.playbackproblems.mux.dev/gAg5Jj.ts and we'll keep it there for future reference.

Feb 24 '22 19:02 video-archivist-bot

I also have an mp4 that the stream above was transcoded from which videojs also fails to sync correctly, let me know if this is useful

Feb 28 '22 20:02 DuncanStone

Are you saying that the mp4 itself has sync issues?

Feb 28 '22 20:02 gkatsev

The mp4 has the video and audio streams starting at different times, synchronised with timestamps. I don't know much about video encoding so I can't be much more specific than that.

The mp4 plays correctly synchronised in most (but not all) mediaplayer software. The mp4 plays correctly in videojs on firefox The mp4 plays with audio desynchronised by about 1 second on videojs on chrome and its clones. The hls stream plays correctly synchronised in most (but not all) mediaplayer software. The hls stream plays with audio desynchronised by about 1 second on videojs on all browsers

I am open to the possibility that there is an issue with ffmpeg or with chrome, but the fact that the behaviour in videojs is inconsistent made me think it might be useful to the videojs devs to have these files.

You can view the specific videojs configuration I am using here: mp4: https://chalk.writeinstone.com/preview/published-fecaddfa-6736-416f-862f-38ca8aea9a89 hls (m3u8 + ts): https://chalk.writeinstone.com/public/research/published-fecaddfa-6736-416f-862f-38ca8aea9a89

I have tried updating to the newest version of videojs in a local test but it did not change anything so I left off upgrading the server till later.

Mar 01 '22 19:03 DuncanStone

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

Apr 30 '22 21:04 stale[bot]

Finally got around to taking another look. Interestingly, the m3u8 is having the audio sync issues in other MSE players as well as Safari and Quicktime Player, but VLC seems to play it fine. Worth noting that Apple's media stream validator has the following must-fix issues for your m3u8:

Error: Format change without discontinuity tag detected
--> Source:  https://stoneprojectstaging.blob.core.windows.net/pub-f01fe15a-daf7-47f0-aa51-1587073ad1d2/f01fe15a-daf7-47f0-aa51-1587073ad1d2.m3u8 - full-000.ts

Error: Playlist vs segment duration mismatch
--> Detail:  Segment duration 4.0001, Playlist duration: 4.1667
--> Source:  https://stoneprojectstaging.blob.core.windows.net/pub-f01fe15a-daf7-47f0-aa51-1587073ad1d2/f01fe15a-daf7-47f0-aa51-1587073ad1d2.m3u8 - full-000.ts

These issues can definitely be contributing to the sync issue. The duration mismatch is likely due to the fact that audio content in the first segment is much shorter than the video duration. Hope this helps.

May 12 '22 22:05 gkatsev

for https://stoneprojectstaging.blob.core.windows.net/pub-f01fe15a-daf7-47f0-aa51-1587073ad1d2/f01fe15a-daf7-47f0-aa51-1587073ad1d2.m3u8: say @video-archivist-bot save NAzJyA

May 12 '22 22:05 video-archivist-bot

@gkatsev thanks. If the implication here is that the video is badly encoded and this is not an issue that videojs wishes to fix, feel free to close this issue. Since I posted this I have changed the way I am encoding and the videos now play correctly. It would be great if videojs was more robust in this situation but I understand that dev resources are limited and it might not be a priority.

May 12 '22 22:05 DuncanStone

any update on this? im having the same problem

Oct 24 '23 03:10 sgrossiP

video.js video.js copied to clipboard

m3u8 sound and video not synced

Description

Steps to reproduce

Results

Expected

Actual

Error output

Additional Information

versions

videojs

browsers

OSes

plugins

Note 1

Note 2

video.js
video.js copied to clipboard