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.

• javascript
• css
• reactjs
• typescript
• video.js

1 Answer 1

You 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