인터랙티브 비디오 제어 슬라이더를 이용한 React

비디오 컨트롤러를 사용하여 비디오 재생 위치를 효과적으로 변경하는 방법을 경험해보세요. 이 자습서에서는 React의 currentTime 매개변수를 사용하여 비디오 위치를 제어하는 방법을 배우게 됩니다. 간단한 사용자 인터페이스를 통해 비디오의 여러 시점 사이를 탐색할 수 있는 Range Slider를 구현하는 데 초점을 맞춥니다. 바로 시작해봅시다!

주요 포인트

• 비디오 요소의 currentTime 매개변수는 재생 위치를 제어합니다.
• Range Slider를 사용하여 비디오 위치를 시각적 및 대화식으로 제어할 수 있습니다.
• 재생 위치를 정확히 제어하려면 현재 재생 상태와 비디오의 길이 사이의 백분율을 사용해야 합니다.
• onTimeUpdate와 같은 이벤트는 동적으로 사용자 인터페이스를 업데이트하는 데 중요합니다.

단계별 안내

단계 1: Range Slider 설정

Range Slider를 구현하는 것부터 시작하세요. 이 슬라이더를 사용하여 비디오 위치를 제어할 수 있습니다. 슬라이더의 기본 구조를 복사하고 min과 max 속성을 조정하여 비디오 길이에 따라 값을 표시하십시오.

단계 2: currentTime 정의

currentTime 속성은 비디오의 현재 재생 위치(초)를 저장합니다. 비디오 내 위치를 제어하는 데 중요합니다. 재생 위치를 비디오 시작점으로 설정하도록 초기화하세요.

단계 3: 위치용 State 생성

비디오 위치를 위한 새로운 State를 생성해야 합니다. 여기서는 position으로 간단히 명명하고 초기값을 0으로 설정합니다. 이는 비디오 시작 부분인 0% 재생을 나타냅니다.

단계 4: Slider 위치 업데이트

새로운 State를 사용하여 비디오 위치에 따라 실제로 슬라이더 값을 업데이트하는 것이 중요합니다. 현재 위치와 동기화되도록 슬라이더의 값을 설정하세요.

단계 5: Duration 구현

이미 재생된 비디오의 백분율을 알기 위해 비디오의 총 재생 시간을 파악해야 합니다. 이를 비디오 요소의 duration 속성을 통해 구현할 수 있습니다. 현재 설정된 위치를 비디오의 총 재생 시간과 곱하세요.

단계 6: 시간 업데이트용 이벤트 리스너 추가

비디오 재생 시 슬라이더 위치 역시 업데이트되도록 하려면 비디오 요소에 onTimeUpdate 이벤트 리스너를 추가해야 합니다. 이 리스너는 각 시간 간격마다 현재 시간을 검색하고 슬라이더를 업데이트합니다.

단계 7: 정의되지 않은 값에 대한 오류 처리

계산을 진행하기 전에 currentTime 값이 정의되어 있고 비디오의 duration이 사용 가능한지 확인하는 것이 중요합니다. 비디오의 초기 상태와 관련된 가능한 상황을 처리하는 로직을 추가하세요.

단계 8: 시간 반올림 및 형식 지정

표시되는 시간을 정확한 초로 반올림하는 것이 이상적입니다. 이 개선으로 사용자 인터페이스가 깔끔하고 사용하기 쉬워집니다. 값을 형식화하기 위해 Math.round() 함수를 사용하세요.

단계 9: 기능의 라이브 테스트

모든 이 단꾸 후에 프로젝트를 다시로드하고 슬라이더를 테스트하십시오. 비디오의 위치를 양쪽 방향으로 조정할 수 있는지 확인하고 시간이 제대로 업데이트되는지 확인하십시오.

요약

이제 React에서 효과적인 레인지 슬라이더를 구현하여 currentTime 속성을 동적으로 업데이트하여 비디오 재생을 제어하는 방법을 배웠습니다. 이렇게하면 비디오에서 편리하게 다양한 지점으로 이동할 수 있습니다.