videojs / video.js

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

During playback of fragment mp4 with m3u8, the duration changed unexpectedly #8029

Open AkiDroid opened 1 year ago

AkiDroid commented 1 year ago

Description

When playing this fragment mp4 with m3u8, if the network is poor and the video is still in loading after the first time of click play button ,then using the progress bar seek several times, the duration will become smaller after the load ends and starts playing.

This is video file and m3u8 link: https://1drv.ms/u/s!AqCak2uXFl2hh8gp1NmymYdGkATRRw?e=JTyDqR

This is html template I used for test:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link href="https://unpkg.com/video.js/dist/video-js.css" rel="stylesheet">
  <script src="https://unpkg.com/video.js@8.0.2/dist/video.js"></script>
  <style>
    .vjs-duration {
      display: block !important;
    }
  </style>
</head>

<body>
  <video class="video-js" id="my-player" controls width="640" height="480"></video>
  <script>
    const src = 'video1_1.m3u8'
    window.player = videojs('my-player', {
      sources: [{
        src: src,
        type: 'application/x-mpegURL'
      }],
      preload: false,
    })
    videojs.log.level('all')
  </script>
</body>
</html>

Reduced test case

No response

Steps to reproduce

1.Download and unzip the video link I provided, put it together with html template. 2.Open in chrome, open devtools, switch to Network tab, limit internet speed to 16mb/s or less. 3.Click playbutton, then within two seconds quickly click on the progress bar at 8:00, 10:00, 8:00 in sequence. These three points are only the general location, a little deviation does not matter.

  1. When the loading is finished, the video duration becomes shorter.

before:

before

after:

after

Errors

No error or warning in log, only debug logs.

What version of Video.js are you using?

8.0.2

Video.js plugins used.

No

What browser(s) including version(s) does this occur with?

Chrome 104.0.5112.101

What OS(es) and version(s) does this occur with?

macos 13.0.1

welcome[bot] commented 1 year 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.

ghost commented 1 year ago

@AkiDroid can you share your stream? I recently had something similar, the outcome was that not all tracks of the HLS stream had the same length, there was a diff between the audio and video track length of about 2 sec. most of the time the stream was working fine for me, but sometimes I came across some append issues of the fmp4 segments during playback.

Maybe, just to be sure, you could use the following: "-ss 00:00:00 -to 00:00:12" command with ffmpeg to cut the output hard at 12 sec. Why 12 sec. because 6 seconds is the normal length of a segment for HLS, so 2 segments will get encoded here using 12 sec. simply attach this to your encode command.

Kind regards

AkiDroid commented 1 year ago

It has been some time since I reported the issue, and I wanted to check in and see if there has been any progress on resolving it.

If there is anything I can do to help, such as providing additional information or testing fixes, please let me know. I would be happy to assist in any way I can.

misteroneill commented 1 year ago

Sorry for the delay in response, but we are a small team with limited time/resources.

This sounds like a content issue to me. For adaptive streams like HLS, the player gets the duration from the content.

Unfortunately, we are not able to safely download and unzip files and would need a live example from a web server to try to diagnose what's happening.