使React useEffect检查视频链接是否有视频可用

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

const [isVideoAvailable, setIsVideoAvailable] = useState(false);

useEffect(() => {
  const checkVideoAvailability = async () => {
    try {
      // 执行视频链接检查的逻辑，例如发送请求到服务器验证链接是否有效
      const response = await fetch('https://example.com/check-video', {
        method: 'POST',
        body: JSON.stringify({ videoUrl: 'https://example.com/video.mp4' }),
        headers: {
          'Content-Type': 'application/json'
        }
      });

      if (response.ok) {
        setIsVideoAvailable(true);
      } else {
        setIsVideoAvailable(false);
      }
    } catch (error) {
      setIsVideoAvailable(false);
    }
  };

  checkVideoAvailability();
}, []);

return (
  <div>
    {isVideoAvailable ? (
      <video src="https://example.com/video.mp4" controls />
    ) : (
      <p>该视频链接无效</p>
    )}
  </div>
);