vime-js / vime

Customizable, extensible, accessible and framework agnostic media player. Modern alternative to Video.js and Plyr. Supports HTML5, HLS, Dash, YouTube, Vimeo, Dailymotion...
https://vimejs.com
MIT License
2.75k stars 154 forks source link

Many bugs here - I think you should read this Before trying the package #363

Open brightchip opened 1 year ago

brightchip commented 1 year ago

The package has so many problems. Sorry I didn't prepare any example project but The bugs should be appearing very often if you're actually using it.

  1. On mobile, The controls along with the scrim do not hide at all for which it happens every time after entering fullscreen and sometimes after sliding the seekbar or interact with the controls (You can try it on your home page with a mobile device: https://vimejs.com/). Gladly for this problem, I had made some changes and can make it work.

    player.addEventListener('vmFullscreenChange', (event) => {
    timeoutHiddenControls = setTimeout(() => {
          const controls = document.querySelector('vm-controls')
          controls.hide()
        }, activeDuration) 
  2. The loading screen does not hide even when the video is playing. This is not ocurred every time.

  3. On mobile, the video player has no sound (Not a problem of mute button but the volume being too low to generate a sound. It's about 0 or 1 )!! And for this problem I had made a manully volume setting:

     if (isMobile()) {
        if (player.volume > 50) {
        } else {
          player.volume = 50
        }
        player.muted = false
      }
  4. I think the iOS should be supported atlest in non-fullscreen mode . Currently the UI are entirely from iOS default .

IsaacSomething commented 1 year ago

That is a very interesting nested if statement you got going there.

Haven't experience any of these problems that you mention. An example project would be really helpful in trying to debug how these issues are being created.

brightchip commented 1 year ago

And for the infinate loading problem it can be solved like this:

    player.addEventListener("vmPlaybackReady", (event) => {
      let val = event.detail;

      if (!val) {
        function reloadPlayerSource() {
          const vmFile = document.querySelector("vm-file");
          if (vmFile) {
            if (vmFile.mediaEl) {
              vmFile.dispatch("duration", vmFile.mediaEl.duration);
              vmFile.dispatch("playbackRates", vmFile.playbackRates);
            }
            // vmFile.onLoadedMetadata();
            vmFile.onTextTracksChange();
            vmFile.dispatch("playbackReady", true);
            if (currentTime) {
              player.currentTime = currentTime;
            }
            vmFile.onProgress();
            hiddenControls(true);
          }
        }
        reloadPlayerSource();
      }
    });