How to play vimeo videos with videojs player

There is a series here on Laracasts about video integration.

https://laracasts.com/series/how-to-use-html5-video-and-videojs

Yep I know but does not explain how to integrate vimeo into video js but found a package already npm i videojs7-vimeo works fine

I found out npm i videojs7-vimeo is not well supported anymore use instead https://www.npmjs.com/package/@devmobiliza/videojs-vimeo but there I am also facing some issue I have to fix. Is laracasts doing it without any package?

I was able to use VideoJS with Vimeo without any issues before. The only thing is that it was not responsive (fast) enough for project requirements. Post here your issues. Asking simple questions will not help.

What package did you use? The same? The problem is in chrome the video gets not loaded properly. Sometimes it appears and sometimes not. Looks like its a chrome issue, with firefox it works fine.

Responsive? You only need to add fluid to the video element? Or I am missunderstanding you?

What package did you use?

https://laracasts.com/series/how-to-use-html5-video-and-videojs/episodes/2

The problem is in chrome the video gets not loaded properly. Sometimes it appears and sometimes not.

That was an issue for me only locally. It worked in production.

Responsive? You only need to add fluid to the video element? Or I am missunderstanding you?

You've misunderstood me. The latency was bad. It wasn't snappy enough. I needed something fast, without any delay.

The video does not show how to use videojs with vimeo videos. It is not possible without any package (videojs plugin) to integrate vimeo videos?

I think it was possible at the time of that project.

Simple Google search shows this as my first pick https://github.com/vimeo/player.js/

Sorry but I am a little bit confused what to use now. On the official videojs page in the plugin section, this package is not listed. So you would go with https://github.com/vimeo/player.js/ ?

Yes. Try it.

Tried it out and if it would work it would be the best way to do it. When I try to use it with videojs the video gets injected as iframe and not as source for the player. So it ignores videojs and embeds it as iframe in to my page. I did it like in the docs stated for pre-existing player.

Script

  <script src="{{ asset('js/video.min.js') }}"></script>
    <script src="https://player.vimeo.com/api/player.js"></script>
    <script>
      document.addEventListener("DOMContentLoaded", function(){
        var video = document.getElementById('my-video');
        var player = new Vimeo.Player(video);

      
      });
    </script>

HTML

<video
    id="my-video"
    class="video-js vjs-big-play-centered"
    controls
    fluid="true"
    width="640"
    height="264"
    data-setup='{  }'
    data-vimeo-id="422216652"
  >


    <p class="vjs-no-js">
      To view this video please enable JavaScript, and consider upgrading to a
      web browser that
      <a href="https://videojs.com/html5-video-support/" target="_blank"
        >supports HTML5 video</a
      >
    </p>
  </video>

Maybe I overlooked something..

Why do you need VideoJS when you have their own first-party player?

Dont know why I was so focused on videojs :D You are right :)

LOL, I know that feeling :D