在vidstack React播放器中禁用根据设备宽度自动进入全屏模式

Question

我正在我的一个 React 项目中使用这个 player。我正在以模式显示视频播放器。因此，当设备的屏幕宽度低于 1024px 时，我希望不应用全屏模式。

我阅读了官方文档，但没有获得针对特定设备宽度禁用自动进入全屏模式的官方方法。

<MediaPlayer
    className="w-full h-[540px] bg-slate-200 text-white font-sans overflow-hidden rounded-md ring-media-focus data-[focus]:ring-4"
    title={title}
    src={src}
    crossorigin
    ref={player}
    autoplay
>
    <MediaProvider>
    <Poster
        className="absolute inset-0 block h-full w-full rounded-md opacity-0 transition-opacity data-[visible]:opacity-100 object-cover"
        src={thumbnail_url}
        alt={title || ""}
    />
    </MediaProvider>

    <VideoLayout />
</MediaPlayer>

Answer 1

与播放器Rahim Alwer的作者讨论后，

MediaPlayer

组件有一个可用的属性，名为

playsinline

所以这就是我所做的

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

const VideoPlayer: React.FunctionComponent<VideoPlayerProps> = ({ src, title, thumbnail_url }) => {
  let player = useRef<MediaPlayerInstance>(null);
  const [windowWidth, setWindowWidth] = useState(window.innerWidth)

  useEffect(() => {
    function reportWindowSize() {
      setWindowWidth(window.innerWidth)
    }
    // Trigger this function on resize
    window.addEventListener('resize', reportWindowSize)
    //  Cleanup for componentWillUnmount
    return () => window.removeEventListener('resize', reportWindowSize)
  }, [])

  return (
    <MediaPlayer 
      playsinline={windowWidth >= 1024}
    >
      ...
    </MediaPlayer>
  )

}

PS：-它也有一个小错误，今天得到了解决。所以我们应该使用最新版本（1.5.3）。