如何在Next.js中使用TypeScript动态创建Video元素

有两种常用方法可以解决类型不匹配的问题：

方法一：使用类型断言（针对React.createElement场景） #

如果你一定要用React.createElement创建video元素，在获取对应的DOM节点时，可以通过类型断言将HTMLElement转为HTMLVideoElement。比如结合useRef使用：

'use client';
import { useRef, useEffect } from 'react';

export default function VideoComponent() {
  const videoRef = useRef<HTMLVideoElement>(null);

  useEffect(() => {
    if (videoRef.current) {
      // 这里videoRef.current的类型就是HTMLVideoElement，可直接调用play()、pause()等视频专属方法
      videoRef.current.play();
    }
  }, []);

  return React.createElement('video', { ref: videoRef });
}

如果是直接创建元素后操作DOM，也可以这样断言：

const videoElement = React.createElement('video') as React.ReactElement<HTMLVideoElement>;
// 获取真实DOM节点时
const domNode = videoElement as unknown as HTMLVideoElement;

方法二：直接使用JSX语法（更推荐） #

在React/Next.js中，更推荐用JSX语法创建video元素，TypeScript会自动推断出正确的HTMLVideoElement类型，无需额外处理：

'use client';
import { useRef, useEffect } from 'react';

export default function VideoComponent() {
  const videoRef = useRef<HTMLVideoElement>(null);

  useEffect(() => {
    if (videoRef.current) {
      videoRef.current.src = '/path/to/video.mp4';
      videoRef.current.play();
    }
  }, []);

  return <video ref={videoRef} controls />;
}

注意：Next.js 13+ App Router场景下，涉及DOM操作的组件需要加上'use client'指令。

内容的提问来源于stack exchange，提问作者Vishal Jaiswal