Automatically select HLS when available

[miltuss]

Description

Hello, I'm using VideoJS with the Stash app, the videos work fine, but VideoJS tries to start the audio files with MP4 and WEBM transcoding before realizing that 'they are not supported and finally choose HLS in third position to finally play the audio file after 20 seconds of waiting.

Then I noticed that when launching the playback of the audio file on the client side, the quality selector icon is displayed immediately and it is possible to manually switch to HLS to interrupt the transcoding attempts to mp4 and webm then force immediate audio playback of the audio track.

What I would like is for HLS to be chosen by default when it is available

Is there a userscript to prioritize one quality over another when it is available in the quality selector?

Reduced test case

https://github.com/stashapp/stash/

Steps to reproduce

1. Add an audio file (mp3, ogg, flac, opus, wav, m4a) to library of StashApp
2. Launch this audio file in VideoJS

Errors

No response

What version of Video.js are you using?

7.21.3

Video.js plugins used.

https://github.com/stashapp/stash/blob/v0.26.2/ui/v2.5/package.json#L72

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

Firefox

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

Linux-Mint

[welcome[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.

[gkatsev]

Video.js doesn't have a way to prioritize which video should be tried first, aside from the ordering of sources in provided to Video.js. The only thing I can think of is to get the sources via player.currentSources(), reorder it and then pass it back into player.src().

[miltuss]

Thanks for the answer, but I'm not a developer and I don't necessarily know the code. I know it is possible to interact with VideoJS using userscripts like this

// ==UserScript==
// @name        Change videojs seek buttons
// @author      Maista
// @namespace   com.maista.userscripts
// @match       http://localhost:9999/*
// @grant       none
// @version     1.0
// ==/UserScript==

const FORWARD_SECONDS = 30;
const BACK_SECONDS = 30;

new Promise((resolve) => {
  const observer = new MutationObserver(async () => {
    const videojs = document.querySelector('video-js');
    if (videojs === null) return;

    while (videojs.player.controlBar.seekForward === undefined) {
      await new Promise((r) => setTimeout(r, 100));
    }
    videojs.player.controlBar.seekForward.options_.seconds = FORWARD_SECONDS;
    videojs.player.controlBar.seekBack.options_.seconds = BACK_SECONDS;
  })

  observer.observe(document.documentElement, {
    attributes: false,
    childList: true,
    subtree: true
  })
})

The code below changes the duration of rewinding and forwarding in the video.

There is no similar code to choose the default source to use in a video?

[mister-ben]

Stash is loading one source at a time, waiting for an error, then loading another. Video.js isn't selecting a source, it's just trying to load what's asked of it. If you want to customise this, you should talk to the Stash project about changing the order it tries the sources.

https://github.com/stashapp/stash/blob/a3e72b61ee423cd8084ee4442953b6af047a9235/ui/v2.5/src/components/ScenePlayer/source-selector.ts#L143-L172