HTML 비디오와 진행 상황으로 무고한 재미

이 프로젝트는 괴롭힘에 관한 직장 훈련 비디오로 시작했습니다. 비디오의 우아한 UI, 특히 그라디언트 진행 막대가 아이디어를 불러 일으켰습니다. 나는 비슷한 그라디언트를 만들었다는 것을 알고 있었다<progress></progress> 요소가 가능했지만 (Pankaj Parashar의 2016 CSS-Tricks Post 덕분에) 비디오 조작이나 JavaScript를 광범위하게 탐구하지 않았습니다. 도전이 시작되었습니다!

목표는 간단했습니다. 비디오의 재생 진행과 진행 상황을 동기화하십시오. 예상보다 더 재미있었습니다.

HTML

순수한 html5 :

<video src="http://html5videoformatconverter.com/data/images/happyfit2.mp4"></video>
<figcaption>
  ► <button id="play">►</button>
  <progress id="progress" max="100" value="0">진전</progress>
  <label for="progress" id="timer" role="timer"></label>
</figcaption>

그만큼<progress></progress> 요소는 키입니다 : max="100" 최대 값을 설정하고 value="0" 은 0% 진행을 나타냅니다.

CSS 스타일

나는 Pankaj의 우수한 CSS를 다시 해치지 않을 것이지만, 여기에는 그라디언트 진행 막대의 코드가 있습니다.

 진행 [가치] {
  외관 : 없음; / * 사파리 */
  국경 : 없음; / * Firefox */
  색상 : #e52E71; / * 폴백 */
}

Progress [Value] ::- WebKit-progress-value {
  배경 이미지 : 선형 그레이드 (오른쪽, #ff8a00, #e52e71);
  전환 : 너비 1s 선형;
}

진행 [value] ::-Moz-progress-bar {
  배경 이미지 : -Moz-linear-gradient (오른쪽, #ff8a00, #e52e71);
}

JavaScript : 점을 연결합니다

JavaScript에는 다음과 같은 단계가 포함됩니다.

1. 현재 비디오 시간과 지속 시간을 얻으십시오 : video.currentTime 및 video.duration .
2. 진행률 백분율 계산 : (currentTime / duration) * 100 .
3. 진행률 표시 줄 값을 업데이트하십시오 : progress.value = roundedPercentage .
4. 경과 시간 표시 : 타이머 요소를 업데이트하십시오.

다음은 더 나은 성능을위한 상태 관리 및 requestAnimationFrame 통합 한 정제 된 코드입니다 (Neal Fennimore의 귀중한 입력 덕분).

 const video = document.querySelector ( '비디오');
const progress = document.getElementById ( 'Progress');
const timer = document.getElementById ( 'Timer');
const button = document.getElementById ( 'Play');

const paused = 'paused';
const playing = '재생';
상태 = 일시 정지;

function progressloop () {
  if (state === 재생) {
    progress.value = math.round ((video.currenttime / video.duration) * 100);
    timer.innerhtml = math.round (video.currenttime) '초';
    requestAnimationFrame (ProgressLoop);
  }
}

함수 onplay () {
  상태 = 연주;
  ProgressLoop ();
  button.innerhtml = "❙❙";
}

함수 onpause () {
  상태 = 일시 중지;
  button.innerhtml = "►";
}

function onclick () {
  if (state === 일시 정지) {
    video.play ();
  } 또 다른 {
    video.pause ();
  }
}

video.addeventListener ( 'Play', OnPlay);
video.addeventListener ( 'pause', onpause);
button.addeventListener ( 'Click', OnClick);

이 코드는 진행률 표시 줄과 타이머를 효율적으로 업데이트하여 부드럽고 반응이 좋은 사용자 경험을 제공합니다. 재생/일시 정지 버튼을 추가하면 유용성이 향상되며, 주 관리 및 requestAnimationFrame 의 사용은 깨끗하고 성능이 좋은 구현을 보장합니다. 그리고 네, 나는 그 훈련 비디오 퀴즈를 받았습니다!

위 내용은 HTML 비디오와 진행 상황으로 무고한 재미의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!