videojs / video.js

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

Change Quality on Error #8023

Closed Impre-visible closed 1 year ago

Impre-visible commented 1 year ago

Description

Hi,I use videojs-quality-selector to be able to have multiple quality, but on Chromium mobile, there's so limitation, where we can play high quality footage, so I want to when there's an error, automatically switch to the next quality, so my question is, how can I detect an error on the player ?

Reduced test case

No response

Steps to reproduce

  1. Create a website who can stream multiple m3u8
  2. Use videojs-quality-selector
  3. Be disapointed cause you can't play a 4k stream on chromium

Errors

No response

What version of Video.js are you using?

v7.20.2

Video.js plugins used.

No response

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

Chrome Mobile 107.0.5304.105

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

Android 11

Impre-visible commented 1 year ago

I tried something, but it doesn't work :

player.on("error", function() {
    let nextSource = player.currentSources().src
    let allSources = video.getElementsByTagName("source")
    let nextSourceIndex = 0
    for (let i = 0; i < allSources.length; i++) {
        if (allSources[i].src == nextSource) {
            nextSourceIndex = i + 1
        }
    }
    console.log(nextSourceIndex)
    if (nextSourceIndex < allSources.length) {
        player.src(allSources[nextSourceIndex].src)
        player.play()
    }
})
ghost commented 1 year ago

@Impre-visible How is your stream packaged? If you are talking about 4k, I assume that you are using AV1 or HEVC. If so, you also have to use fragmented mp4 in order to transport the content. As you are most likely using fmp4 here, please tell me if you are pulling the segment as Independent segments/files or via byte-range requests?

Pulling independent segments as fmp4 (.m4s files) is currently faulty and streams are breaking quite often.

Have a look at this:

https://videojs-http-streaming.netlify.app/?debug=false&autoplay=false&muted=false&fluid=true&minified=false&sync-workers=false&liveui=true&llhls=true&url=https%3A%2F%2Fcdn.strics.io%2Fhls%2FMovies%2F2160p%2FTester%252520%255B2160p%252520UHD%255D%2Fmaster.m3u8&type=application%2Fx-mpegURL&keysystems=&buffer-water=false&exact-manifest-timings=false&pixel-diff-selector=false&network-info=false&dts-offset=false&override-native=true&preload=auto&mirror-source=true

This actually break on every browser if you change the quality a couple of times and reload the page. No matter what codecs are in use, it will fail (using HEVC, AVC1 and AV1 here).

According to your actual question, VideoJS interprets the Playlist in first hand before playback, as far as I know. I'm pretty sure you cannot have further influence onto this. I'm saying this as I also had the Idea to change the content quality/playlist on error some time ago and was also not able to recover on playback ...

video-archivist-bot commented 1 year 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:

Impre-visible commented 1 year ago

@Impre-visible How is your stream packaged? If you are talking about 4k, I assume that you are using AV1 or HEVC. If so, you also have to use fragmented mp4 in order to transport the content. As you are most likely using fmp4 here, please tell me if you are pulling the segment as Independent segments/files or via byte-range requests?

Pulling independent segments as fmp4 (.m4s files) is currently faulty and streams are breaking quite often.

Have a look at this:

https://videojs-http-streaming.netlify.app/?debug=false&autoplay=false&muted=false&fluid=true&minified=false&sync-workers=false&liveui=true&llhls=true&url=https%3A%2F%2Fcdn.strics.io%2Fhls%2FMovies%2F2160p%2FTester%252520%255B2160p%252520UHD%255D%2Fmaster.m3u8&type=application%2Fx-mpegURL&keysystems=&buffer-water=false&exact-manifest-timings=false&pixel-diff-selector=false&network-info=false&dts-offset=false&override-native=true&preload=auto&mirror-source=true

This actually break on every browser if you change the quality a couple of times and reload the page. No matter what codecs are in use, it will fail (using HEVC, AVC1 and AV1 here).

According to your actual question, VideoJS interprets the Playlist in first hand before playback, as far as I know. I'm pretty sure you cannot have further influence onto this. I'm saying this as I also had the Idea to change the content quality/playlist on error some time ago and was also not able to recover on playback ...

Ok thanks, I fragment my video to multiple .ts files, I'm watching the whole content on te website in 6hours thanks.

video-archivist-bot commented 1 year 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:

Impre-visible commented 1 year ago

I will close that, I do a system where, if the user is on mobile, I remove the highest quality sources. It work fine