Breaking News: Grepper is joining You.com. Read the official announcement!

VideoPlayer React

Ángel De La Cruz answered on June 19, 2023 Popularity 9/10 Helpfulness 2/10

answer VideoPlayer React

VideoPlayer React

Comment

import React, { useState, useEffect } from 'react';

interface VideoPlayerProps {
  videoUrl: string;
}

const VideoPlayer: React.FC<VideoPlayerProps> = ({ videoUrl }) => {
  const [isValidFormat, setIsValidFormat] = useState(true);

  useEffect(() => {
    const videoExtension = videoUrl.substring(videoUrl.lastIndexOf('.') + 1);
    const allowedExtensions = ['mp4', 'avi', 'mkv']; // Agrega aquí las extensiones permitidas

    setIsValidFormat(allowedExtensions.includes(videoExtension));
  }, [videoUrl]);

  if (!isValidFormat) {
    return <p className="text-red-500">El formato del video no es válido.</p>;
  }

  return (
    <div className="flex justify-center items-center">
      <video className="w-full max-w-lg" controls>
        <source src={videoUrl} type="video/mp4" />
        <source src={videoUrl} type="video/avi" />
        <source src={videoUrl} type="video/mkv" />
        Tu navegador no admite la reproducción de videos.
      </video>
    </div>
  );
};

export default VideoPlayer;

Popularity 9/10 Helpfulness 2/10 Language css

Source: Grepper

Tags: css video-player

Link to this answer
Share Copy Link

Contributed on Jun 19 2023

Ángel De La Cruz

0 Answers Avg Quality 2/10

VideoPlayer React

Contents

More Related Answers

VideoPlayer React

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.