worthy marsh
Hey folks!
Has anyone used video.js (the open source HTML5 player framework) with Astro? I've used it for other non-Astro projetcs and it was pretty straightforward, but I've been trying to install it both via cdn and npm on my Astro project and can't make it work.
Any suggestions? Many thanks in advance!
viscid scaffold
I made an exmaple of using video.js via npm in Astro https://stackblitz.com/edit/github-qhdj6u?file=src%2Fpages%2Findex.astro
The important bits:
---
import 'video.js/dist/video-js.css'
---
<video-js id="myPlayer" class="video-js">
<source src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4">
</video-js>
<script>
import videojs from 'video.js';
const player = videojs('myPlayer', { controls:true });
window.myVideojsPlayer = player;
</script>
worthy marsh
Hey @viscid scaffold! Thank you so much! This works, but only if I refresh my page. If I wanted to include it in a module, how would you recommend I approach it? Thank you!
viscid scaffold
Hey <@191324508701851648>! Thank you so much! This works, but only if I refresh ...
Sorry I don't understand, can you explain what do you mean by "include it in a module"?
worthy marsh
I mean an Astro module containing JS code. I'm guessing the code would be this:
import videojs from 'video.js';
`export default () => {
return {
init() {
const player = videojs('how-it-works-video', { controls:true });
},
};
};`
And this works, but only if I refresh my page. I'm uisng Alpine.js, for reference. Thanks!
viscid scaffold
I don't know anything about alpine.js, but generally if you are "mounting" and "unmounting" elements with a framework, you would need to listen for lifecycle events and create and destroy the player instance accordingly.
worthy marsh
Thank you! The thing is, even if I use the code exactly as you suggested (meaning, including the script before closing the body tag), video.js will also only work if I refresh my page. Any idea of whay this might be?
viscid scaffold
Are you using view transitions?