Divi에서 비디오에 대한 사용자 정의 HTML5 비디오 컨트롤을 만드는 방법

HTML5 비디오는 모든 웹사이트에 비디오를 표시하는 편리하고 효과적인 방법입니다. 실제로 Divi는 HTML5 비디오 형식을 사용하여 비디오 모듈을 사용하여 Divi에서 비디오를 표시합니다. 그러나 기본적으로 이러한 비디오에는 브라우저에 따라 달라지는 표준 디자인의 내장 컨트롤(재생, 음소거, 볼륨 등)이 포함되어 있습니다. 그러나 이러한 컨트롤의 디자인을 향상시키려면 실제로 HTLM5 비디오용 외부 컨트롤을 직접 만들고 스타일을 지정할 수 있습니다.

이 튜토리얼에서는 Divi에서 비디오에 대한 사용자 정의 HTML5 비디오 컨트롤을 만드는 방법을 보여줍니다. 이를 위해 Divi Builder를 사용하여 비디오 및 사용자 정의 컨트롤 버튼을 만들고 스타일을 지정합니다. 그런 다음 모든 것이 작동하도록 사용자 정의 Javascript를 추가합니다.

시작하자!

엿보기

다음은 이 튜토리얼에서 구축할 디자인을 간략하게 살펴보겠습니다.

이 튜토리얼에서 소개된 것과 동일한 기능 중 일부를 보여주는 이 코드펜을 확인할 수도 있습니다.

무료로 레이아웃 다운로드

이 튜토리얼의 디자인을 손에 넣으려면 먼저 아래 버튼을 사용하여 다운로드해야 합니다. 다운로드에 액세스하려면 아래 양식을 사용하여 Divi Daily 이메일 목록에 가입해야 합니다. 신규 구독자는 매주 월요일에 더 많은 Divi 혜택과 무료 Divi 레이아웃 팩을 받게 됩니다! 이미 목록에 있는 경우 아래에 이메일 주소를 입력하고 다운로드를 클릭하기만 하면 됩니다. "재구독"되지 않거나 추가 이메일을 받지 않습니다.

파일 다운로드

무료로 다운로드

Divi 뉴스레터에 가입하면 최고의 Divi 랜딩 페이지 레이아웃 팩과 수많은 놀라운 무료 Divi 리소스, 팁 및 요령을 이메일로 보내드립니다. 따라하시면 ​​금세 Divi 마스터가 되실 것입니다. 이미 구독한 경우 아래에 이메일 주소를 입력하고 다운로드를 클릭하여 레이아웃 팩에 액세스하십시오.

다운로드

성공적으로 구독했습니다. 이메일 주소를 확인하여 구독을 확인하고 무료 주간 Divi 레이아웃 팩에 액세스하세요!

섹션 레이아웃을 Divi 라이브러리로 가져오려면 Divi 라이브러리로 이동하십시오.

가져오기 버튼을 클릭합니다.

이식성 팝업에서 가져오기 탭을 선택하고 컴퓨터에서 다운로드 파일을 선택합니다.

그런 다음 가져오기 버튼을 클릭합니다.

완료되면 섹션 레이아웃을 Divi Builder에서 사용할 수 있습니다.

튜토리얼로 들어가 볼까요?

시작하는 데 필요한 것

시작하려면 다음을 수행해야 합니다.

1. 아직 설치하지 않았다면 Divi 테마를 설치하고 활성화하십시오.
2. WordPress에서 새 페이지를 만들고 Divi Builder를 사용하여 프런트 엔드(비주얼 빌더)에서 페이지를 편집합니다.
3. "처음부터 빌드" 옵션을 선택합니다.

그런 다음 Divi에서 디자인을 시작할 수 있는 빈 캔버스가 생깁니다.

이 튜토리얼의 목표에 대한 간략한 개요

HTML5 비디오의 기본 구문은 다음과 같습니다.

<video controls="">
  <source type="video/mp4" src="video.mp4">
  <source type="video/webm" src="video.webm">
</video>

video 요소의 controls 속성에 주목하십시오. 이것은 HTML5 비디오에서 일반적으로 볼 수 있는 표준 컨트롤을 표시하는 데 사용됩니다.

Divi의 비디오 모듈은 동일한 HTML5 비디오 요소 구조를 사용하여 모듈 내에서 업로드하는 자체 호스팅 비디오를 표시합니다. 따라서 비디오 모듈을 사용할 때 HTML5 비디오를 사용합니다.

이 튜토리얼의 목표는 초기에 Divi 비디오에 대한 기본 컨트롤을 숨기고 Divi Builder와 일부 사용자 정의 코드를 사용하여 자체 외부 사용자 정의 컨트롤을 구축하는 것입니다.

1부: Divi에서 HTML5 비디오 만들기

이 튜토리얼의 첫 번째 부분에서는 Divi 비디오 모듈을 사용하여 HTML5 비디오를 만들 것입니다. 하지만 먼저 섹션 배경을 업데이트해야 합니다.

섹션 배경

다음과 같이 기본적으로 사용 가능한 기본 섹션에 대한 섹션 설정을 업데이트하여 시작합니다.

• 배경 그라데이션 왼쪽 색상: rgba(0,0,0,0.8)
• 배경 그라데이션 오른쪽 색상: #000000
• 배경 이미지 위에 그라디언트 배치: 예
• 배경 이미지: [선택한 이미지 업로드]

비디오 행

다음으로 비디오를 포함할 행을 추가해야 합니다. 섹션에 새로운 1열 행을 추가합니다.

그런 다음 다음과 같이 행 설정을 업데이트합니다.

• 폭: 100%
• 최대 너비: 없음
• 패딩: 0px 하단

비디오 만들기

앞서 언급했듯이 Divi는 이미 Divi 비디오 모듈 내에서 HTML5 비디오 요소를 사용하고 있습니다. 따라서 비디오를 만들려면 행/열에 새 비디오 모듈을 추가하기만 하면 됩니다.

비디오 모듈에 비디오 파일 업로드

최대 성능을 위해 비디오의 MP4 및 WEBM 비디오 파일을 미디어 갤러리에 업로드하십시오.

다음으로 MP4 및 WEBM 비디오 파일을 콘텐츠 탭 아래의 비디오 모듈에 추가합니다.

비디오 설정 업데이트

디자인 탭에서 다음을 업데이트합니다.

• 최대 너비: 1080px
• 모듈 정렬: 중앙

고급 탭에서 다음 CSS ID를 추가합니다.

• CSS ID: divi-video-container

2부: 진행률 표시줄 만들기

HTML 비디오에는 진행률 표시줄을 표시하는 기능이 내장되어 있습니다. 약간의 사용자 정의 코드를 사용하여 비디오에 자체 진행률 표시줄을 추가할 수 있습니다.

진행률 표시줄 행

비디오에 대한 사용자 정의 진행률 표시줄을 표시하려면 먼저 비디오가 포함된 행 아래에 새 1열 행을 만듭니다.

행 설정을 열고 다음과 같이 패딩을 업데이트합니다.

• 패딩: 상단 10px, 하단 0px

진행률 표시줄 HTML 추가

진행률 표시줄을 표시하기 위해 HTML의 사용자 정의 스니펫을 추가하려면 행에 새 코드 모듈을 추가해야 합니다.

코드 상자 안에 다음 HTML을 붙여넣습니다.

<progress id="progress" value="0" min="0">
  <span id="progress-bar"></span>
</progress>

나중에 사용자 정의 Javascript를 사용하여 진행률 표시줄에 필요한 기능을 추가할 것입니다.

3부: Divi에서 비디오 제어 버튼 만들기

이제 일련의 Divi 버튼 모듈을 사용하여 일부 사용자 지정 비디오 제어 버튼을 추가할 준비가 되었습니다.

행과 열 만들기

먼저 버튼 막대/컨테이너 역할을 할 행과 열을 설정해야 합니다.

행

진행률 바코드가 포함된 행 아래에 새 1열 행을 추가합니다.

행 설정을 열고 다음을 업데이트합니다.

• 거터 폭: 1
• 패딩: 상단 10px, 하단 20px

열에 Flex 추가

버튼의 수평 정렬을 얻는 간단한 방법은 버튼이 포함된 열에 display:flex를 사용하는 것입니다. 이렇게 하려면 열에 대한 설정을 열고 다음 사용자 지정 CSS를 기본 요소에 추가합니다.

display:flex;
align-items:center;
justify-content:center;
flex-wrap:wrap;

열이 준비되었으므로 버튼을 추가할 준비가 되었습니다.

재생/일시정지 버튼

이 첫 번째 버튼을 비디오의 재생 및 일시 중지 기능을 토글하는 "재생/일시 중지" 버튼으로 만들 것입니다. 버튼을 생성하려면 열에 버튼 모듈을 추가합니다.

버튼 설정을 열고 버튼 텍스트를 업데이트합니다.

• 버튼 텍스트: 재생/일시 중지

디자인 탭에서 다음과 같이 버튼의 스타일을 지정합니다.

• 버튼에 사용자 정의 스타일 사용: 예
• 버튼 텍스트 크기: 18px(데스크톱), 14px(태블릿 및 휴대폰)
• 버튼 텍스트 색상: #ffffff
• 버튼 배경색: rgba(255,255,255,0.15)
• 버튼 테두리 너비: 0px
• 버튼 아이콘 표시: 아니오

다음과 같이 버튼의 여백을 업데이트합니다.

• 여백: 위쪽 10px, 왼쪽 10px, 오른쪽 10px

고급 탭에서 다음 CSS ID를 추가합니다.

• CSS ID: divi-play-pause

정지 버튼

다음은 중지 버튼입니다. 이 버튼은 비디오를 중지하고 시작 지점으로 다시 가져옵니다.

버튼을 생성하려면 "재생/일시 정지" 버튼 모듈을 복제하십시오.

그런 다음 버튼 텍스트를 업데이트합니다.

• 버튼 텍스트: 중지

버튼에 사용자 정의 CSS ID를 지정하십시오.

• CSS ID: divi-stop

음소거 버튼

비디오 볼륨을 음소거하는 음소거 버튼을 만들려면 방금 만든 "중지" 버튼을 복제합니다.

버튼 텍스트 업데이트:

• 버튼 텍스트: 음소거

그런 다음 사용자 정의 CSS ID를 지정하십시오.

• CSS ID: divi-mute

볼륨 높이기 버튼

다음 버튼은 클릭할 때마다 비디오 볼륨을 점진적으로 증가시킵니다. 볼륨 크게 버튼이라고 부르겠습니다.

버튼을 생성하려면 "음소거" 버튼 모듈을 복제하십시오.

그런 다음 버튼 텍스트를 업데이트합니다.

• 버튼 텍스트: Vol

디자인 탭에서 다음을 업데이트하여 버튼 텍스트 옆에 위쪽 화살표를 추가합니다.

• 버튼 아이콘 표시: 예
• 버튼 아이콘: 위쪽 화살표(스크린샷 참조)
• 버튼 아이콘 색상: #00a9d8
• 버튼에 대한 호버 시 아이콘만 표시: 아니오

그런 다음 다음과 같이 버튼의 패딩을 업데이트합니다.

• 패딩: 왼쪽 0.5em, 오른쪽 1.5em

그런 다음 CSS ID를 업데이트합니다.

• CSS ID: divi-volinc

볼륨 낮추기 버튼

클릭할 때마다 비디오의 볼륨을 점진적으로 줄이는 "볼륨 낮추기" 버튼과 함께 "볼륨 높이기" 버튼을 사용할 수 없습니다.

"Volume Down" 버튼을 생성하려면 방금 만든 "Volume Up" 버튼을 복제합니다.

그런 다음 버튼 아이콘을 "아래쪽 화살표" 아이콘으로 업데이트합니다.

그런 다음 CSS ID를 업데이트합니다.

• CSS ID: divi-voldec

크게 보기 버튼

마지막 버튼의 경우 클릭 시 비디오 컨테이너의 너비를 늘리는 "큰 보기" 버튼을 만들 것입니다.

버튼을 만들려면 "음소거" 버튼을 복제하십시오. 그런 다음 "볼륨 작게" 버튼 아래에 있는 복제 버튼을 드래그하여 버튼 막대의 맨 오른쪽에 놓이도록 합니다.

복제 버튼에 대한 설정을 열고 버튼 텍스트를 업데이트합니다.

• 버튼 텍스트: 크게 보기

그런 다음 버튼에 사용자 정의 CSS ID를 지정하십시오.

• CSS ID: divi-large-view

4부: 사용자 정의 CSS 및 JS 코드 추가

이제 모든 Divi 요소가 생성되었으므로 모든 것이 작동하도록 하는 데 필요한 사용자 지정 코드를 가져올 준비가 되었습니다.

계속해서 섹션의 두 번째 행에 있는 진행률 표시줄 HTML을 포함하는 코드 모듈 아래에 다른 코드 모듈을 추가합니다.

CSS

코드 상자에 다음 CSS를 붙여넣고 필요한 스타일 태그 안에 CSS를 래핑합니다.

.control-button-active,
#divi-volinc:active,
#divi-voldec:active,
#divi-play-pause:active,
#divi-stop:active {
  background: #666666 !important;
}

#progress {
  display: block;
  width: 100%;
}

#divi-video-container.expand-video {
  max-width: 1400px;
}

자바스크립트/제이쿼리

CSS(종료 스타일 태그) 아래에 다음 JS 코드를 붙여넣고 필요한 스크립트 태그 안에 코드를 래핑합니다.

jQuery(document).ready(function ($) {
  $diviVideoContainer = $("#divi-video-container");
  $diviVideo = $("#divi-video-container video");
  videoElement = $("#divi-video-container video")[0];
  $play = $("#divi-play");
  $playPause = $("#divi-play-pause");
  $stop = $("#divi-stop");
  $mute = $("#divi-mute");
  $volinc = $("#divi-volinc");
  $voldec = $("#divi-voldec");
  $progress = $("#progress");
  progressElement = $("#progress")[0];
  $progressBar = $("#progress-bar");
  $largeView = $("#divi-large-view");

  videoElement.controls = false;

  $diviVideo.on("loadedmetadata", function () {
    $progress.attr("max", videoElement.duration);
  });

  $diviVideo.on("timeupdate", function (e) {
    progressElement.value = videoElement.currentTime;
    $progressBar.css(
      "width",
      Math.floor((videoElement.currentTime / videoElement.duration) * 100) + "%"
    );
  });

  $diviVideo.on("timeupdate", function () {
    if (!$progress.attr("max")) {
      $progress.attr("max", videoElement.duration);
      progressElement.value = videoElement.currentTime;
      $progressBar.css(
        "width",
        Math.floor((videoElement.currentTime / videoElement.duration) * 100) +
          "%"
      );
    }
  });

  $playPause.on("click", function (e) {
    e.preventDefault();
    if (videoElement.paused || videoElement.ended) {
      videoElement.play();
    } else {
      videoElement.pause();
    }
  });

  $stop.on("click", function (e) {
    e.preventDefault();
    videoElement.pause();
    videoElement.currentTime = 0;
    progressElement.value = 0;
  });

  $mute.on("click", function (e) {
    e.preventDefault();
    videoElement.muted = !videoElement.muted;
    $(e.target).toggleClass("control-button-active");
  });

  $volinc.on("click", function (e) {
    e.preventDefault();
    alterVolume("+");
  });

  $voldec.on("click", function (e) {
    e.preventDefault();
    alterVolume("-");
  });

  alterVolume = function (dir) {
    currentVolume = Math.floor(videoElement.volume * 10) / 10;
    if (dir === "+") {
      if (currentVolume < 1) videoElement.volume += 0.1;
    } else if (dir === "-") {
      if (currentVolume > 0) videoElement.volume -= 0.1;
    }
  };

  $largeView.on("click", function (e) {
    e.preventDefault();
    $(e.target).toggleClass("control-button-active");
    $diviVideoContainer.toggleClass("expand-video");
  });
  //shows default controls when hovering over video
  $diviVideo.hover(function () {
    if (!videoElement.controls) {
      videoElement.controls = true;
    } else {
      videoElement.controls = false;
    }
  });
});

코드 분해

HTML 요소 및 Divi 버튼을 가리키는 변수

시작하려면 지정된 CSS ID가 있는 각 Divi 요소를 가리키는 변수를 선언해야 합니다. 또한 실제 HTML 요소(jQuery 객체가 아님)를 가리키는 두 개의 중요한 변수가 필요합니다. 여기에는 videoElement (HTML 비디오 요소를 가리킴 ) 및 progressElement (HTML 진행 요소를 가리킴 )가 포함됩니다.

$diviVideoContainer = $("#divi-video-container");
$diviVideo = $("#divi-video-container video");
videoElement = $("#divi-video-container video")[0];
$play = $("#divi-play");
$playPause = $("#divi-play-pause");
$stop = $("#divi-stop");
$mute = $("#divi-mute");
$volinc = $("#divi-volinc");
$voldec = $("#divi-voldec");
$progress = $("#progress");
progressElement = $("#progress")[0];
$progressBar = $("#progress-bar");
$largeView = $("#divi-large-view");

변수가 배치되면 기본 HTML 비디오 컨트롤을 숨깁니다.

videoElement.controls = false;

다음으로, 비디오의 현재 시간과 지속 시간에 비례하여 진행률 표시줄의 너비를 늘려야 합니다.

비디오가 ( loadedmetadata 이벤트를 사용하여) 메타 데이터를 로드하면 진행 요소에서 비디오의 지속 시간과 같은 값으로 max 속성을 설정합니다.

$diviVideo.on("loadedmetadata", function () {
  $progress.attr("max", videoElement.duration);
});

그런 다음 timeupdate 이벤트를 사용하여 진행률 표시줄의 값과 너비를 업데이트하여 현재 재생 위치를 나타냅니다.

$diviVideo.on("timeupdate", function (e) {
  progressElement.value = videoElement.currentTime;
  $progressBar.css(
    "width",
    Math.floor((videoElement.currentTime / videoElement.duration) * 100) + "%"
  );
});

또한 이 시점에서 진행 요소의 최대 속성이 올바르게 설정되지 않은 경우를 대비하여 모바일 브라우저에 대한 대체를 추가합니다.

$diviVideo.on("timeupdate", function () {
  if (!$progress.attr("max")) {
    $progress.attr("max", videoElement.duration);
    progressElement.value = videoElement.currentTime;
    $progressBar.css(
      "width",
      Math.floor((videoElement.currentTime / videoElement.duration) * 100) +
        "%"
    );
  }
});

다음으로 버튼을 클릭할 때 작업을 수행하는 기능을 만들기 시작합니다.

재생/일시 중지 버튼의 경우 if 문과 함께 Media API의 일시 중지 및 종료 속성을 사용하여 play() 및 pause() 메서드를 토글합니다.

$playPause.on("click", function (e) {
  e.preventDefault();
  if (videoElement.paused || videoElement.ended) {
    videoElement.play();
  } else {
    videoElement.pause();
  }
});

중지 버튼의 경우 비디오를 일시 중지하고 진행률 값과 현재 시간을 다시 0으로 가져옵니다.

$stop.on("click", function (e) {
  e.preventDefault();
  videoElement.pause();
  videoElement.currentTime = 0;
  progressElement.value = 0;
});

음소거 버튼의 경우 음소거 속성을 토글하고 음소거 시 더 밝은 배경으로 버튼의 스타일을 지정하는 클래스도 토글합니다.

$mute.on("click", function (e) {
  e.preventDefault();
  videoElement.muted = !videoElement.muted;
  $(e.target).toggleClass("control-button-active");
});

볼륨 버튼의 경우 하나는 클릭 시 볼륨을 높이도록 정의되고( $volinc ) 다른 하나는 클릭 시 볼륨을 낮추도록 정의됩니다( $voldec ). 이것은 "+" 또는 "-"에 대한 dir 매개변수를 확인하고 클릭할 때마다 볼륨을 점진적으로 증가 또는 감소시키는 alterVolume() 함수를 사용하여 수행됩니다.

$volinc.on("click", function (e) {
  e.preventDefault();
  alterVolume("+");
});

$voldec.on("click", function (e) {
  e.preventDefault();
  alterVolume("-");
});

alterVolume = function (dir) {
  currentVolume = Math.floor(videoElement.volume * 10) / 10;
  if (dir === "+") {
    if (currentVolume < 1) videoElement.volume += 0.1;
  } else if (dir === "-") {
    if (currentVolume > 0) videoElement.volume -= 0.1;
  }
};

큰 보기 버튼은 클릭 시 비디오 컨테이너의 최대 너비 를 조정하는 CSS 클래스를 토글합니다.

$largeView.on("click", function (e) {
  e.preventDefault();
  $(e.target).toggleClass("control-button-active");
  $diviVideoContainer.toggleClass("expand-video");
});

그리고 이 예제에는 기본 비디오 컨트롤 내에서 사용할 수 있는 모든 컨트롤과 기능이 포함되어 있지 않기 때문에 비디오 위로 마우스를 가져갈 때 이러한 컨트롤 속성을 표시하는 기능이 있습니다.

$diviVideo.hover(function () {
  if (!videoElement.controls) {
    videoElement.controls = true;
  } else {
    videoElement.controls = false;
  }
});

최종 결과

다음은 최종 결과입니다.

그리고 모바일에서 컨트롤이 어떻게 쌓이는지 보여줍니다.

동일한 기능을 보여주는 이 codepen도 확인할 수 있습니다.

더 알아보기

HTML 및 Javascript에 익숙하고 HTML5 비디오에 더 많은 사용자 정의 컨트롤과 기능을 추가하는 데 관심이 있는 경우 처음부터 비디오 플레이어를 만드는 방법에 대한 이 가이드를 확인할 수 있습니다. HTMLMediaElement API를 확인하여 가능성을 확인할 수도 있습니다.

가까운 장래에 HTML5 비디오와 Divi를 조작하는 더 유용한 방법을 공유할 수 있기를 기대합니다.

마지막 생각들

Divi에서 비디오에 대한 몇 가지 외부 사용자 지정 컨트롤을 생성하면 독특한 디자인과 기능을 위한 문을 열 수 있습니다. 물론 이 자습서의 예제에서는 사용 가능한 모든 옵션(또는 컨트롤)을 탐색하지 않습니다. 그리고 이 기능은 여러 개가 아닌 한 페이지에 하나의 비디오로 제한됩니다. 따라서 소개하려는 주요 비디오 중 하나를 사용자 정의하는 데 이상적입니다. 그러나 다음 프로젝트를 위해 사용자 정의 HTML5 비디오 컨트롤을 만드는 데 필요한 사항에 대한 확실한 소개가 되기를 바랍니다.

댓글로 여러분의 의견을 기다리겠습니다.

건배!