I'm using video-js to play mpeg-dash
streams in react. I have made this component for my use:
"use client";
import { VideoPlayerProps } from "@/lib/types/video-player-interface";
import React, { useEffect } from "react";
import videojs from "video.js";
import Player from "video.js/dist/types/player";
import "video.js/dist/video-js.css";
export function VideoPlayer(videoPlayerProps: VideoPlayerProps) {
const videoRef = React.useRef<HTMLDivElement>(null);
const playerRef = React.useRef<Player | null>(null);
// extract filename without extension
const extractedFilename = videoPlayerProps.filename.replace(/\.[^.]+$/, "");
const playerOptions = {
autoplay: videoPlayerProps.autoPlay,
preload: "auto",
enableSmoothSeeking: true,
experimentalSvgIcons: true,
nativeControlsForTouch: true,
noUITitleAttributes: true,
loop: true,
controls: true,
fluid: true,
responsive: true,
sources: [
{
src: `${process.env.NEXT_PUBLIC_MEDIA_SERVER_URL}/${extractedFilename}/${extractedFilename}.mpd`,
type: "application/dash+xml",
},
],
userActions: {
click: true,
},
};
useEffect(() => {
if (!playerRef.current && videoRef.current) {
const videoElement = document.createElement("video-js");
videoElement.classList.add("vjs-9-16");
videoRef.current.appendChild(videoElement);
playerRef.current = videojs(videoElement, playerOptions);
}
}, []);
useEffect(() => {
const player = playerRef.current;
return () => {
if (player && !player.isDisposed()) {
player.dispose();
playerRef.current = null;
}
};
}, [playerRef]);
return (
<div data-vjs-player>
<div ref={videoRef} />
</div>
);
}
I'm using video-js to play mpeg-dash
streams in react. I have made this component for my use:
"use client";
import { VideoPlayerProps } from "@/lib/types/video-player-interface";
import React, { useEffect } from "react";
import videojs from "video.js";
import Player from "video.js/dist/types/player";
import "video.js/dist/video-js.css";
export function VideoPlayer(videoPlayerProps: VideoPlayerProps) {
const videoRef = React.useRef<HTMLDivElement>(null);
const playerRef = React.useRef<Player | null>(null);
// extract filename without extension
const extractedFilename = videoPlayerProps.filename.replace(/\.[^.]+$/, "");
const playerOptions = {
autoplay: videoPlayerProps.autoPlay,
preload: "auto",
enableSmoothSeeking: true,
experimentalSvgIcons: true,
nativeControlsForTouch: true,
noUITitleAttributes: true,
loop: true,
controls: true,
fluid: true,
responsive: true,
sources: [
{
src: `${process.env.NEXT_PUBLIC_MEDIA_SERVER_URL}/${extractedFilename}/${extractedFilename}.mpd`,
type: "application/dash+xml",
},
],
userActions: {
click: true,
},
};
useEffect(() => {
if (!playerRef.current && videoRef.current) {
const videoElement = document.createElement("video-js");
videoElement.classList.add("vjs-9-16");
videoRef.current.appendChild(videoElement);
playerRef.current = videojs(videoElement, playerOptions);
}
}, []);
useEffect(() => {
const player = playerRef.current;
return () => {
if (player && !player.isDisposed()) {
player.dispose();
playerRef.current = null;
}
};
}, [playerRef]);
return (
<div data-vjs-player>
<div ref={videoRef} />
</div>
);
}
I'm trying to change the height of the video player but I'm unable to do so. I tried using the tailwind classes like h-4/5
etc but they are not taking any effect. But then I found this document in video-js
site. Stating:
In some cases, particularly with web applications using frameworks that may manage the element (e.g. React, Ember, Angular, etc), these elements are not desirable. They can be suppressed by setting
window.VIDEOJS_NO_DYNAMIC_STYLE = true
before including Video.js. This disables all CSS-based player sizing. Players will have no height or width by default! Even dimensional attributes, such as width="600" height="300" will be ignored. When using this global, you will need to set their own dimensions in a way that makes sense for their website or web app.
I'm not sure how to set this property properly and change the height. Please help me with this.
Share Improve this question asked Jan 18 at 8:50 Soumalya BhattacharyaSoumalya Bhattacharya 67412 silver badges30 bronze badges1 Answer
Reset to default 1You need to create a container using Tailwind classes of your desired size, and then you can use .vjs-fill
class for the video player.
I hope the link to the document helps you out. Fill Mode