search

videojs / video.js

Video.js - open source HTML5 video player
https://videojs.com
Other
38.12k stars 7.46k forks source link

m3u8 sound and video not synced #7549

Open christoschronopoulos opened 2 years ago

christoschronopoulos commented 2 years ago

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.

  1. 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>
  1. 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>
  1. 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

na

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)

video-archivist-bot commented 2 years ago

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:

welcome[bot] commented 2 years ago

👋 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.

gkatsev commented 2 years ago

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.

christoschronopoulos commented 2 years ago

@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.

christoschronopoulos commented 2 years ago

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.

gkatsev commented 2 years ago

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.

DuncanStone commented 2 years ago

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.

video-archivist-bot commented 2 years ago

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:

DuncanStone commented 2 years ago

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

video-archivist-bot commented 2 years ago

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.

video-archivist-bot commented 2 years ago

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.

video-archivist-bot commented 2 years ago

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.

DuncanStone commented 2 years ago

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

gkatsev commented 2 years ago

Are you saying that the mp4 itself has sync issues?

DuncanStone commented 2 years ago

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.

stale[bot] commented 2 years ago

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.

gkatsev commented 2 years ago

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.

video-archivist-bot commented 2 years ago

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:

DuncanStone commented 2 years ago

@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.

sgrossiP commented 1 year ago

any update on this? im having the same problem