最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - How to change the height and width of video js player in react js - Stack Overflow

programmeradmin7浏览0评论

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 badges
Add a comment  | 

1 Answer 1

Reset to default 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

发布评论

评论列表(0)

  1. 暂无评论