How to use playerRef?

[abcd-ca]

Hi, can you please provide an example of how to use playerRef to control playback? I would like to be able to tap the middle of the video to toggle play/pause and for the video to repeat infinitely. I would also like to have callbacks for playback events like start/complete... Is this possible?

Here's what I've got so far:

import React, {useEffect, useRef} from "react"
import ReactHlsPlayer, {ReactHlsPlayerProps} from 'react-hls-player'

export interface VideoPlayerProps {
  src: string;
}

/**
 * Docs https://github.com/devcshort/react-hls#README
 * @param src
 * @constructor
 */
const VideoPlayer: React.FC<VideoPlayerProps> = ({src}) => {
  const playerRef = useRef<ReactHlsPlayerProps>()

  useEffect(() => {
    if (playerRef.current) {

     // TypesScript doesn't recognize `play` here. Not sure how to control playback or configure for repeat on playback complete. 
      playerRef.current.play();
    }
  }, [])

  return (
    <ReactHlsPlayer
        url={src}
        autoplay={false}
        controls={false}
        width={200}
        height={355}
        playerRef={playerRef}
    />
  )
};

export default VideoPlayer;

[devcshort]

@abcd-ca I don't currently have the props set up for the playerRef so it may not play well 100% with TypeScript, however the playerRef directly returns a ref to the actual video element being used. You should have access to all html video properties and methods.

[devcshort]

@abcd-ca I've added examples to the latest README. I'll attach them below. Going to close this issue. Let me know if this doesn't work for you.

Using playerRef

The playerRef returns a ref to the underlying video component, and as such will give you access to all video component properties and methods.

import React from 'react';
import ReactHlsPlayer from 'react-hls-player';

function MyCustomComponent() {
  const playerRef = React.useRef();

  function playVideo() {
    playerRef.current.play();
  }

  function pauseVideo() {
    playerRef.current.pause();
  }

  function toggleControls() {
    playerRef.current.controls = !playerRef.current.controls;
  }

  return (
    <ReactHlsPlayer
      playerRef={playerRef}
      src="https://bitdash-a.akamaihd.net/content/sintel/hls/playlist.m3u8"
    />
  );
}

ReactDOM.render(<MyCustomComponent />, document.getElementById('app'));

You can also listen to events of the video

import React from 'react';
import ReactHlsPlayer from 'react-hls-player';

function MyCustomComponent() {
  const playerRef = React.useRef();

  React.useEffect(() => {
    function fireOnVideoStart() {
      // Do some stuff when the video starts/resumes playing
    }

    playerRef.current.addEventListener('play', fireOnVideoStart);

    return playerRef.current.removeEventListener('play', fireOnVideoStart);
  }, []);

  React.useEffect(() => {
    function fireOnVideoEnd() {
      // Do some stuff when the video ends
    }

    playerRef.current.addEventListener('ended', fireOnVideoEnd);

    return playerRef.current.removeEventListener('ended', fireOnVideoEnd);
  }, []);

  return (
    <ReactHlsPlayer
      playerRef={playerRef}
      src="https://bitdash-a.akamaihd.net/content/sintel/hls/playlist.m3u8"
    />
  );
}

ReactDOM.render(<MyCustomComponent />, document.getElementById('app'));