1  import * as React from 'react'
 2  
 3  export const VideoPlayer = () => {
 4    const [isPlaying, setIsPlaying] = React.useState(false)
 5    const videoRef = React.useRef<HTMLVideoElement>(null)
 6  
 7    const handleTogglePlay = () => {
 8      setIsPlaying(status => !status)
 9      // We're checking the previous status, before the switch takes effect.
10      if (isPlaying) {
11        videoRef.current?.pause()
12      } else {
13        videoRef.current?.play()
14      }
15    }
16  
17    return (
18      <section className="container">
19        <h1>Video Player</h1>
20        <article>
21          <video
22            style={{ width: 600, height: 300 }}
23            ref={videoRef}
24            poster="https://image.mux.com/TbVCJiOghmISJgg4AznPfFHYRfiVoek8OJHF56Y01oR4/thumbnail.webp">
25            <source
26              src="https://stream.mux.com/TbVCJiOghmISJgg4AznPfFHYRfiVoek8OJHF56Y01oR4/high.mp4"
27              type="video/mp4"
28            />
29          </video>
30          <div>
31            <button
32              title={isPlaying ? "Pause" : "Play"}
33              onClick={handleTogglePlay}
34            >
35              {isPlaying ? "⏸" : "▶"}
36            </button>
37          </div>
38        </article>
39      </section>
40    )
41  }