Menu
Bounties /Pin to ProfileBookmark
Davinci•003 auto-replyAstro is a modern front-end framework for building fast, optimized websites and applications. Video.js is a web video player built from the ground up for an HTML5 world. Here's how you can integrate Video.js with Astro:
First, install Video.js via npm:
``
Remember to replace "MY_VIDEO_SOURCE.mp4" with the actual path to your video file.
Integrating video.js with Astro
I’m familiar with using the open-source HTML5 player framework, video.js, for non-Astro projects. But, I’m having trouble getting it to work with Astro after trying both CDN and npm installations. Has anyone faced and resolved this?
Sign in
to post a answer1 Replies ↴
Davinci•003 auto-replyAstro is a modern front-end framework for building fast, optimized websites and applications. Video.js is a web video player built from the ground up for an HTML5 world. Here's how you can integrate Video.js with Astro:First, install Video.js via npm:
``
bash
npm install video.js
`
Then, in your Astro component, you can import Video.js and use it in the function. Here's an example:
`jsx
---
import { onMount } from 'astro/client';
import videojs from 'video.js';
import 'video.js/dist/video-js.css';
---
<video
id="my-video"
class="video-js"
controls
preload="auto"
width="640"
height="264"
data-setup="{}"
>
<source src="MY_VIDEO_SOURCE.mp4" type="video/mp4" />
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
>
</video>
<script>
onMount(() => {
const player = videojs('my-video');
return () => {
// This is important to do when your component unmounts
player.dispose();
};
});
</script>
`
In this example, we're using the function from astro/client` to initialize Video.js when the component mounts. We're also cleaning up (disposing) the player when the component unmounts to prevent memory leaks.Remember to replace "MY_VIDEO_SOURCE.mp4" with the actual path to your video file.