사용자 정의 HTML5 비디오 플레이어 인터페이스 구축

사용자 정의 HTML5 비디오 플레이어를 만들려면 HTML 구조를 설정하고 제어 상호 작용을 구현하고 CSS 스타일을 설계해야합니다. 1. 인프라 설정 :

웹 사이트 스타일과 더 유연한 비디오 재생 경험을 원한다면 사용자 정의 HTML5 비디오 플레이어가 좋은 선택입니다. 기본 브라우저 재생 컨트롤은 간단하고 사용하기 쉽지만 스타일과 기능은 제한적입니다. 외관을 제어 할뿐만 아니라 함수를 확장 할 수있는 인터페이스 세트를 직접 만들 수 있습니다.

인프라 : HTML 및 비디오 요소 설정

먼저, <video></video> 태그와 직접 설계하는 제어 영역이 포함 된 기본 HTML 구조가 필요합니다. <video></video> 요소는 핵심입니다. controlsList 및 webkit-playsinline 과 같은 속성을 추가하여 다른 장치에서 더 나은 호환성을 얻으십시오.

 <video id = "myvideo"src = "video.mp4"> </video>
<div class = "Custom-Controls">
  <button id = "playPause"> play </button>
  <입력 유형 = "range"id = "progress"value = "0">
  <span id = "currenttime"> 0:00 </span>/<span id = "duration"> 0:00 </span>
</div>

이 방법을 작성한 후 CSS를 통해 네이티브 컨트롤 ( video[controls] { display: none; } )를 숨기고 JavaScript로 재생 로직을 제어 할 수 있습니다.

제어 상호 작용 : 재생/일시 중지 및 진행률 표시 줄 업데이트

이 부분은 주로 JavaScript의 작업에 관한 것입니다. 재생 상태를 전환하고 진행률 표시 줄과 시간 표시를 실시간으로 업데이트하려면 버튼 클릭 이벤트를 듣습니다.

일반적인 관행은 다음과 같습니다.

• 클릭 이벤트를 재생 버튼에 바인딩하고 현재 재생 중인지에 따라 .play() 또는 .pause() 를 호출하기로 결정하십시오.
• 비디오 timeupdate 이벤트를 듣고 매 순간마다 진행률 표시 줄 및 시간 태그를 업데이트하십시오.
• 진행률 표시 줄이 드래그 될 때 비디오의 현재 재생 시간을 업데이트합니다.

 const video = document.getElementById ( 'myvideo');
const playbtn = document.getElementById ( 'PlayPause');
const progress = document.getElementById ( 'Progress');
const currenttime = document.getElementById ( 'currenttime');
const duration = document.getElementById ( 'duration');

playbtn.addeventListener ( 'click', () => {
  if (video.paused) {
    video.play ();
    playbtn.textContent = 'pause';
  } 또 다른 {
    video.pause ();
    playbtn.textContent = 'Play';
  }
});

video.addeventListener ( 'timeupdate', () => {
  progress.value = (video.currenttime / video.duration) * 100;
  // 시간 형식은 생략되며 Math.floor Padstart에서 구현할 수 있습니다});

여기서는 일부 모바일 브라우저가 자동 재생을 제한하거나 사용자 상호 작용이 재생되기 때문에 버튼을 클릭 한 후 재생 작업을 트리거하는 것이 가장 좋습니다.

맞춤형 스타일 : CSS는 플레이어 모양을 디자인합니다

구조와 상호 작용으로 CSS를 사용하여 원하는대로 옷을 입을 수 있습니다. 버튼에 배경 이미지를 추가하고 진행률 바 슬라이더 스타일을 조정하며 볼륨 컨트롤, 전체 화면 버튼 등을 추가 할 수 있습니다.

몇 가지 팁 :

• appearance: none
• 의사 요소 및 그라디언트가있는 플레이 버튼을 아름답게하십시오
• 제어 레이아웃은 Flexbox와 신속하게 정렬 될 수 있습니다

작은 예 : 원래 진행률 표시 줄을 숨기고 색상의 진행률 표시기를 그립니다.

 .Custom-Controls Input [type = "range"] {
  -WebKit-Appearance : 없음;
  높이 : 6px;
  배경 : #ddd;
  Border-Radius : 3px;
}

.Custom-Controls Input [type = "range"] ::-Webkit-Slider-Thumb {
  -WebKit-Appearance : 없음;
  너비 : 16px;
  높이 : 16px;
  배경 : #007bff;
  국경-라디우스 : 50%;
}

기본적으로 그게 다야. 구조에서 상호 작용, 스타일, 단계별로 실용적이고 아름다운 HTML5 비디오 플레이어 인터페이스를 만들 수 있습니다. 복잡하지는 않지만 시간 형식, 모바일 호환성 및 진행률 막대 드래그 앤 드롭 응답과 같은 세부 사항을 쉽게 무시할 수 있습니다. 효과에 더주의를 기울이십시오.

위 내용은 사용자 정의 HTML5 비디오 플레이어 인터페이스 구축의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!