Closed abcd-ca closed 3 years ago
@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.
@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.
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'));
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:
export default VideoPlayer;