React Player là một thư viện phát video rất linh hoạt cho các ReactJs app. Tuỳ vào cách sử dụng của bạn, thư viện này có thể phát nhiều định dạng video từ nhiều nguồn khác nhau như YouTube, Facebook, Twitch, SoundCloud, Vimeo …

Hãy cùng tìm hiểu cách sử dụng và một số chức năng cơ bản của thư viện này.

Sử dụng thư viện:

Đầu tiên, cài đặt thư viện bằng npm hoặc yarn vào ReactJs app bạn đang làm

npm install react-player

hoặc

yarn add react-player

Sau khi cài đặt, import thư viện vào ReactJs app

import ReactPlayer from 'react-player';

và sử dụng ReactPlayer url='' để render trình phát video

<ReactPlayer url='https://www.youtube.com/watch?v=oUFJJNQGwhk' />

Bạn có thể sử dụng "width", "height" để thay đổi kích thước của trình phát video theo px hoặc %. Bạn cũng có thể để video tự động phát bằng cách đặt cho video "playing={true}" hoặc ẩn các điều khiển của video bằng cách đặt "controls={false}"

<ReactPlayer
    url='https://www.youtube.com/watch?v=oUFJJNQGwhk'
    width="640px"
    height="360px"
    playing={true}
    controls={false}
/>

Hiển thị thời gian phát video:

Sử dụng prop onProgress để lấy thời gian chạy video:

<ReactPlayer
    url='https://www.youtube.com/watch?v=oUFJJNQGwhk'
    onProgress={handleProgress}
/>

Khai báo state để lưu và hàm handleProgress:

const [playTime, setPlayTime] = useState(0);

const handleProgress = (state) => {
    setPlayTime(state.playedSeconds);
})

state.playedSeconds là một số, để hiển thị dưới dạng phút, giây như 00:30, ta có thể thêm một hàm formatTime:

const formatTime = (time) => {
  const date = new Date(time * 1000);
  const hour = date.getUTCHours();
  const minute = date.getUTCMinutes();
  const second = ('0' + date.getUTCSeconds()).slice(-2);
  if (hour) {
    return `${hour}:${('0' + minute).slice(-2)}:${second}`;
  }
  return `${minute}:${second}`;
}

và đây là kết quả:

hiển thị thời gian phát video

Ngoài ra, bạn có thể đặt thời gian bắt đầu phát video khi render trình phát bằng cách sử dụng ref và hàm seekTo của React Player như sau:

  • Khai báo một ref sử dụng useRef:
const playerRef = useRef(null);
  • Set ref và gọi hàm seekTo trong onReady:
<ReactPlayer
  url='https://www.youtube.com/watch?v=oUFJJNQGwhk'
  ref={playerRef}
  onReady={()=> playerRef.current?.seekTo(30,'seconds'} // Bắt đầu phát video từ giây 30
/>

Tham khảo tài liệu đầy đủ của thư viện ở link https://github.com/cookpete/react-player để hiểu cách hoạt động, các tuỳ biến API khác.