Cách tạo Trình phát video trong React
Tạo trình phát video trong React có vẻ như là một nhiệm vụ đầy thách thức. Nhưng với các công cụ và kỹ thuật phù hợp, bạn có thể làm điều đó một cách tương đối dễ dàng.
Có hai cách để tạo trình phát video trong React: sử dụng các tính năng tích hợp sẵn và sử dụng thư viện của bên thứ ba.
Mục Lục
Tạo Trình phát video trong React
Trước khi tạo trình phát video React, hãy đảm bảo bạn có hiểu biết cơ bản về HTML, CSS và JavaScript.
Bắt đầu bằng cách tạo một ứng dụng React cơ bản để thêm chức năng trình phát video sau vào.
Sử dụng các tính năng tích hợp (React Hook)
Tùy chọn đầu tiên để tạo trình phát video trong React là sử dụng các tính năng tích hợp sẵn.
Bắt đầu bằng cách tạo thành phần trình phát sẽ hiển thị video và tất cả các điều khiển của nó. Để thực hiện việc này, hãy tạo một tệp có tên “Player.js” và thêm đoạn mã sau:
import React from 'react';
const Player = () => {
return (
<div>
<video width="100%" height="100%" controls>
<source src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" type="video/mp4" />
</video>
</div>
)
}
export default Player;
Mã này nhập thư viện React và tạo thành phần trình phát. Nó cũng thêm một phần tử video với thuộc tính điều khiển được đặt thành “true”. Thao tác này sẽ thêm trình phát video cơ bản vào trang.
Tiếp theo, thêm nút phát/tạm dừng. Để làm điều này, bạn cần thêm một vài dòng mã vào thành phần trình phát. Thêm đoạn mã sau vào tệp Player.js:
import React, { useState, useRef } from 'react';
const Player = () => {
const [isPlaying, setIsPlaying] = useState(false);
const videoRef = useRef(null);
const togglePlay = () => {
if (isPlaying) {
videoRef.current.pause();
} else {
videoRef.current.play();
}
setIsPlaying(!isPlaying);
};
return (
<div>
<video
ref={videoRef}
width="100%"
height="100%"
controls
>
<source src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" type="video/mp4" />
</video>
<button onClick={togglePlay}>
{isPlaying ? "Pause" : "Play"}
</button>
</div>
)
}
export default Player;
Mã này sử dụng các hook useState và useRef để theo dõi trạng thái của video (cho dù video đó đang phát hay tạm dừng) và tham chiếu đến phần tử video. Nó cũng thêm chức năng TogglePlay sẽ phát và tạm dừng video. Phần tử nút sẽ kích hoạt chức năng TogglePlay.
Bước cuối cùng là thêm thanh tiến trình. Để thực hiện việc này, bạn cần thêm một vài dòng mã vào tệp Player.js. Thêm những điều sau:
import React, { useState, useRef } from 'react';
const Player = () => {
const [isPlaying, setIsPlaying] = useState(false);
const [progress, setProgress] = useState(0);
const videoRef = useRef(null);
const togglePlay = () => {
if (isPlaying) {
videoRef.current.pause();
} else {
videoRef.current.play();
}
setIsPlaying(!isPlaying);
};
const handleProgress = () => {
const duration = videoRef.current.duration;
const currentTime = videoRef.current.currentTime;
const progress = (currentTime / duration) * 100;
setProgress(progress);
};
return (
<div>
<video
onTimeUpdate={handleProgress}
ref={videoRef}
width="100%"
height="100%"
controls
>
<source src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" type="video/mp4" />
</video>
<div>
<button onClick={togglePlay}>
{isPlaying ? "Pause" : "Play"}
</button>
<progress value={progress} max="100" />
</div>
</div>
)
}
export default Player;
Mã này thêm chức năng handleProgress. Chức năng này sẽ cập nhật thanh tiến trình. Nó cũng thêm trình xử lý sự kiện onTimeUpdate vào phần tử video sẽ kích hoạt hàm handleProgress. Cuối cùng, nó thêm một thành phần tiến trình vào trang với các thuộc tính giá trị và tối đa được đặt thành tiến trình và 100 tương ứng.
Sử dụng thư viện của bên thứ ba
Tùy chọn thứ hai để tạo trình phát video trong React là sử dụng thư viện của bên thứ ba. Có rất nhiều thư viện có sẵn, nhưng một số thư viện phổ biến nhất là ReactPlayer và React-media-player.
ReactPlayer
ReactPlayer là một thư viện nhẹ, đơn giản cho phép bạn tạo trình phát video chỉ bằng một vài dòng mã. Để cài đặt nó, hãy chạy lệnh sau trong thiết bị đầu cuối của bạn:
npm install react-player
Sau khi cài đặt, bạn có thể sử dụng nó như thế này:
import React from 'react';
import ReactPlayer from 'react-player';
const Player = () => {
return (
<ReactPlayer
url="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"
width="100%"
height="100%"
controls
/>
)
}
export default Player;
Mã này nhập thành phần ReactPlayer từ thư viện trình phát phản ứng và thêm nó vào trang. Nó đặt các thuộc tính url, chiều rộng, chiều cao và điều khiển. Hãy xem xét từng tham số một:
- url: Đây là URL của video bạn muốn phát.
- bề rộng: Đây là chiều rộng của trình phát video.
- Chiều cao: Đây là chiều cao của trình phát video.
- điều khiển: Đây là thuộc tính boolean xác định xem trình phát video có điều khiển hay không.
phản ứng-video-js-player
Reac-video-js-player là một thư viện nhẹ, đơn giản khác cho phép bạn tạo trình phát video chỉ bằng một vài dòng mã. Để cài đặt nó, hãy chạy lệnh sau trong thiết bị đầu cuối của bạn:
npm install react-video-js-player
Sau khi cài đặt, bạn có thể sử dụng nó như thế này:
import React from "react";
import VideoPlayer from "react-video-js-player";
const Player = () => {
return (
<VideoPlayer
width="100%"
height="100%"
src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"
controls
/>
)
}
export default Player;
Mã này nhập thành phần VideoPlayer từ thư viện Reac-video-js-player và thêm nó vào trang.
Các tính năng trình phát video bổ sung
Bạn có thể thêm các tính năng bổ sung vào trình phát video của mình, chẳng hạn như:
- Thêm một áp phích: Bạn có thể thêm hình ảnh áp phích vào trình phát video của mình bằng cách đặt thuộc tính áp phích của phần tử video thành URL của hình ảnh.
- Vòng lặp: Bạn có thể lặp video của mình bằng cách đặt thuộc tính vòng lặp của phần tử video thành “true”.
- Tắt tiếng: Bạn có thể tắt tiếng video của mình bằng cách đặt thuộc tính tắt tiếng của phần tử video thành “true”.
- Tự chạy: Bạn có thể tự động phát video của mình bằng cách đặt thuộc tính tự động phát của phần tử video thành “true”.
Bạn cũng có thể thêm các điều khiển tùy chỉnh của riêng mình vào trình phát video. Để thực hiện việc này, bạn cần thêm trình xử lý sự kiện vào phần tử video và viết các hàm để điều khiển video.
Tăng mức độ tương tác của người dùng với Trình phát video
Với các công cụ và kỹ thuật phù hợp, bạn có thể dễ dàng tạo trình phát video trong React. Bạn cũng có thể thêm các tính năng bổ sung để tăng mức độ tương tác của người dùng. Trình phát phương tiện là một cách tuyệt vời để tăng mức độ tương tác của người dùng trên trang web hoặc ứng dụng của bạn.
Sau khi thêm trình phát video vào trang web của bạn, hãy đảm bảo theo dõi mức độ tương tác của người dùng để xem liệu nó có mang lại hiệu quả mong muốn hay không. Bạn cũng có thể triển khai thử nghiệm A/B để xem liệu việc thêm trình phát video có làm tăng tỷ lệ chuyển đổi hay không.