How to call play() method for Stream component in React?

[user5666]

Hi,
I’m creating an application in React where I want to put an extra button that will turn on the video playback. According to the documentation I have prepared everything as it should be, but calling the function returns an error. The method is called using a reference by clicking on another button. The same solution with the

import { createRef, useRef } from 'react'
import { Stream } from '@cloudflare/stream-react'

const DetailsSidebar = () => {
  const videoRef = createRef(null)

  const sourceUrl = 'n442sd4b54645c3064f384fw'

  const playVideo = () => {
    let { current } = videoRef
    videoRef.current.play()
  }

  return (
    <div>
      <Stream ref={videoRef} controls src={sourceUrl} />
    </div>
    <button
      onClick={playVideo}
      type='button'
    >
            Watch
    </button>
 )
}

[kkipp]

Hello! streamRef is the prop to use for this. I’d also use the useRef hook since createRef will return a new ref on every render. Give this a try:

import { useRef } from "react";
import { Stream } from "@cloudflare/stream-react";

export default function App() {
  const videoRef = useRef(null);
  const playVideo = () => {
    videoRef.current.play();
  };

  return (
    <div className="App">
      <Stream
        streamRef={videoRef}
        controls
        src="5d5bc37ffcf54c9b82e996823bffbb81"
      />
      <button onClick={playVideo} type="button">
        Watch
      </button>
    </div>
  );
}

[user5666]

Thank you so much for your help. The solution works

I wonder if it is possible to configure the video to play in fullscreen mode right away ?

[kkipp]

I wonder if it is possible to configure the video to play in fullscreen mode right away ?

This is not something we currently support.