autoplay and fullscreen feature detection

src/components/video/VideoPlayer.tsx

@@ -2,14 +2,23 @@ import { forwardRef, useContext, useRef } from "react";
 import { VideoPlayerContext, VideoPlayerContextProvider } from "./VideoContext";
 
 interface VideoPlayerProps {
+  autoPlay?: boolean;
   children?: React.ReactNode;
 }
 
-const VideoPlayerInternals = forwardRef<HTMLVideoElement>((_, ref) => {
+const VideoPlayerInternals = forwardRef<
+  HTMLVideoElement,
+  { autoPlay: boolean }
+>((props, ref) => {
   const video = useContext(VideoPlayerContext);
 
   return (
-    <video ref={ref} preload="auto" playsInline className="h-full w-full">
+    <video
+      ref={ref}
+      autoPlay={props.autoPlay}
+      playsInline
+      className="h-full w-full"
+    >
       {video.source ? <source src={video.source} type="video/mp4" /> : null}
     </video>
   );
@@ -25,7 +34,10 @@ export function VideoPlayer(props: VideoPlayerProps) {
         className="relative aspect-video w-full bg-black"
         ref={playerWrapperRef}
       >
-        <VideoPlayerInternals ref={playerRef} />
+        <VideoPlayerInternals
+          autoPlay={props.autoPlay ?? false}
+          ref={playerRef}
+        />
         <div className="absolute inset-0">{props.children}</div>
       </div>
     </VideoPlayerContextProvider>

src/components/video/controls/FullscreenControl.tsx

@@ -1,6 +1,8 @@
 import { useCallback } from "react";
 import { useVideoPlayerState } from "../VideoContext";
 
+const canFullscreen = document.fullscreenEnabled;
+
 export function FullscreenControl() {
   const { videoState } = useVideoPlayerState();
 
@@ -9,6 +11,8 @@ export function FullscreenControl() {
     else videoState.enterFullscreen();
   }, [videoState]);
 
+  if (!canFullscreen) return null;
+
   let text = "not fullscreen";
   if (videoState.isFullscreen) text = "in fullscreen";
 

src/views/TestView.tsx

@@ -4,19 +4,18 @@ import { ProgressControl } from "@/components/video/controls/ProgressControl";
 import { SourceControl } from "@/components/video/controls/SourceControl";
 import { VolumeControl } from "@/components/video/controls/VolumeControl";
 import { VideoPlayer } from "@/components/video/VideoPlayer";
+import { useCallback, useState } from "react";
 
 // test videos: https://gist.github.com/jsturgis/3b19447b304616f18657
 
 // TODO video todos:
 //  - captions
 //  - make pretty
-//  - show fullscreen button depending on is available (document.fullscreenEnabled)
 //  - better seeking
 //  - improve seekables
 //  - buffering
 //  - error handling
-//  - auto-play prop option
-//  - middle pause button
+//  - middle pause button + click to pause
 //  - improve pausing while seeking/buffering
 //  - captions
 //  - show formatted time
@@ -24,9 +23,18 @@ import { VideoPlayer } from "@/components/video/VideoPlayer";
 //  - IpadOS support: (fullscreen video wrapper should work, see (lookmovie.io) )
 //  - HLS support: feature detection otherwise use HLS.js
 export function TestView() {
+  const [show, setShow] = useState(false);
+  const handleClick = useCallback(() => {
+    setShow((v) => !v);
+  }, [setShow]);
+
+  if (!show) {
+    return <p onClick={handleClick}>Click me to show</p>;
+  }
+
   return (
     <div className="w-[40rem] max-w-full">
-      <VideoPlayer>
+      <VideoPlayer autoPlay>
         <PauseControl />
         <FullscreenControl />
         <ProgressControl />