Divi에서 HTML 비디오를 재생할 때 특정 시간에 버튼(또는 CTA)을 표시하는 방법
게시 됨: 2021-04-23비디오는 웹사이트를 위한 효과적인 마케팅 도구입니다. 또한 동영상이 온라인으로 제품이나 서비스를 홍보하고 판매하려는 경우 잠재 고객을 위한 명확한 클릭 유도문안을 포함해야 합니다. 클릭 유도문안을 제공하는 간단한 방법은 클릭할 수 있는 버튼을 동영상 근처에 포함하는 것입니다. 그러나 일부 버튼(또는 CTA)은 사용자가 동영상을 시청할 때 특정 시간에 표시되는 것이 더 합리적입니다. 예를 들어, 특정 할인이나 프로모션이 언급된 비디오의 한 부분(예: 20초)이 있을 수 있습니다. 특정 시간에 "지금 가져오기" 버튼을 표시하는 것이 더 효과적일 수 있습니다.
이 튜토리얼에서는 Divi에서 HTML 비디오를 재생할 때 특정 시간에 버튼(또는 CTA)이 나타나도록 하는 방법을 보여줍니다. 이 기술을 사용하면 Divi Builder로 설계된 비디오와 버튼을 사용할 수 있으며 비디오가 특정 시간에 도달하거나 사용자가 비디오를 일시 중지하거나 비디오가 끝날 때 해당 버튼이 표시되도록 할 수 있습니다. JQuery의 몇 가지 스니펫만 있으면 됩니다. 이 플러그인은 필요하지 않습니다.
시작하자!
엿보기
다음은 이 튜토리얼에서 구축할 디자인을 간략하게 살펴보겠습니다.
비디오의 현재 시간이 5초에 도달하면 상단 버튼이 표시되고 비디오가 종료되면 하단 버튼이 어떻게 나타나는지 확인하십시오.
여기에서 비디오의 현재 시간이 5초에 도달하면 동일한 상단 버튼이 나타나고 비디오가 일시 중지되면 하단 버튼이 나타납니다.
이 기능의 라이브 데모를 보려면 이 codepen을 확인할 수도 있습니다.
무료로 레이아웃 다운로드
이 튜토리얼의 디자인을 손에 넣으려면 먼저 아래 버튼을 사용하여 다운로드해야 합니다. 다운로드에 액세스하려면 아래 양식을 사용하여 Divi Daily 이메일 목록에 가입해야 합니다. 신규 구독자는 매주 월요일에 더 많은 Divi 혜택과 무료 Divi 레이아웃 팩을 받게 됩니다! 이미 목록에 있는 경우 아래에 이메일 주소를 입력하고 다운로드를 클릭하기만 하면 됩니다. "재구독"되지 않거나 추가 이메일을 받지 않습니다.
무료로 다운로드
Divi 뉴스레터에 가입하면 최고의 Divi 랜딩 페이지 레이아웃 팩과 수많은 놀라운 무료 Divi 리소스, 팁 및 요령을 이메일로 보내드립니다. 따라하시면 금세 Divi 마스터가 되실 것입니다. 이미 구독한 경우 아래에 이메일 주소를 입력하고 다운로드를 클릭하여 레이아웃 팩에 액세스하십시오.
성공적으로 구독했습니다. 이메일 주소를 확인하여 구독을 확인하고 무료 주간 Divi 레이아웃 팩에 액세스하세요!
섹션 레이아웃을 Divi 라이브러리로 가져오려면 Divi 라이브러리로 이동하십시오.
가져오기 버튼을 클릭합니다.
이식성 팝업에서 가져오기 탭을 선택하고 컴퓨터에서 다운로드 파일을 선택합니다.
그런 다음 가져오기 버튼을 클릭합니다.
완료되면 섹션 레이아웃을 Divi Builder에서 사용할 수 있습니다.
튜토리얼로 들어가 볼까요?
시작하는 데 필요한 것
시작하려면 다음을 수행해야 합니다.
- 아직 설치하지 않았다면 Divi 테마를 설치하고 활성화하십시오.
- WordPress에서 새 페이지를 만들고 Divi Builder를 사용하여 프런트 엔드(비주얼 빌더)에서 페이지를 편집합니다.
- "처음부터 빌드" 옵션을 선택합니다.
그런 다음 Divi에서 디자인을 시작할 수 있는 빈 캔버스가 생깁니다.
Divi에서 비디오를 재생할 때 특정 시간에 버튼을 표시하는 방법
Soccer Club 랜딩 페이지 레이아웃 업로드
디자인을 바로 시작하기 위해 Soccer Club Layout Pack의 Soccer Club 방문 페이지 레이아웃을 사용할 것입니다.
이렇게 하려면 설정 메뉴를 열고 레이아웃에서 추가 아이콘을 클릭한 다음 Soccer Club 랜딩 페이지 레이아웃을 찾아 사용합니다.
비디오 모듈 업데이트
페이지 상단의 오른쪽 열에 두 개의 버튼이 있는 동영상이 있습니다. 이 요소를 사용하여 비디오를 재생하는 동안 해당 버튼을 표시하는 기능을 보여줍니다.
비디오 설정을 열고 MP4 파일 형식의 비디오를 업로드/추가합니다. WEBM 파일도 포함할 수 있습니다.
고급 탭에서 동영상에 맞춤 CSS ID를 지정합니다.
- CSS ID: divi-video-container
상단 버튼 업데이트
다음으로, 비디오 위의 버튼 모듈에 대한 설정을 열고 다음과 같이 버튼을 비디오 뒤로 이동하도록 변환 옵션을 업데이트합니다.
- 변환 Y축 변환: 100%
그런 다음 버튼에 다음 CSS 클래스를 제공합니다.
- CSS 클래스: divi-delayed-button-1
하단 버튼 업데이트
그런 다음 비디오 아래의 버튼 모듈에 대한 설정을 열고 다음과 같이 버튼을 위로 이동하도록 변환 옵션을 업데이트합니다.
- 변환 Y축 변환: -100%
그런 다음 버튼에 다음 CSS ID를 지정합니다.
- CSS ID: divi-delayed-button-2
미리 만들어진 레이아웃의 버튼에 추가된 애니메이션은 필요하지 않으므로 제거할 수 있습니다. 다중 선택을 사용하여 두 버튼 모듈(레이어 보기 모달에서)을 모두 선택합니다. 그런 다음 두 버튼 모듈의 설정을 열고 애니메이션 스타일을 없음으로 설정합니다.
- 애니메이션 스타일: 없음
코드 추가
마지막 단계에서는 cust0m 코드를 추가해야 합니다. 이렇게 하려면 하단 버튼 아래에 코드 모듈을 추가합니다.
코드 설정 코드 상자 안에 다음 CSS를 붙여넣고 코드를 스타일 태그로 래핑합니다.
.divi-delayed-button-1,
.divi-delayed-button-2 {
visibility: hidden;
transition: all 400ms ease !important;
}
.divi-delayed-button-1.show-button,
.divi-delayed-button-2.show-button {
visibility: visible;
transform: none;
}
그런 다음 CSS 뒤에 다음 JQuery 코드를 붙여넣고 스크립트 태그에 코드를 래핑합니다.
(function ($) {
$(document).ready(function () {
//items
$diviVideo = $("#divi-video-container video");
videoElement = $("#divi-video-container video")[0];
$delayedButton1 = $(".divi-delayed-button-1");
$delayedButton2 = $(".divi-delayed-button-2");
//add timeupdate event on video with a function.
$diviVideo.on("timeupdate", function (e) {
//add class to show button1 when specified currentTime is reached.
if (e.target.currentTime >= 5) {
$delayedButton1.addClass("show-button");
}
//add class to show button2 when video is paused or has ended
if (videoElement.paused || videoElement.ended) {
$delayedButton2.addClass("show-button");
}
});
});
})(jQuery);
코드 정보
CSS
먼저 버튼을 숨기고 버튼 애니메이션의 전환 시간을 설정합니다.
.divi-delayed-button-1,
.divi-delayed-button-2 {
visibility: hidden;
transition: all 400ms ease !important;
}
그런 다음 "show-button" 클래스가 JQuery를 통해 토글될 때 버튼을 표시하고 버튼이 페이지의 원래 위치로 돌아가도록 변환을 없음으로 설정합니다.
.divi-delayed-button-1.show-button,
.divi-delayed-button-2.show-button {
visibility: visible;
transform: none;
}
제이쿼리
가장 먼저 할 일은 사용할 변수를 정의하는 것입니다.
//items
$diviVideo = $("#divi-video-container video");
videoElement = $("#divi-video-container video")[0];
$delayedButton1 = $(".divi-delayed-button-1");
$delayedButton2 = $(".divi-delayed-button-2");
다음으로, 재생 중에 비디오의 현재 시간을 동적으로 결정할 수 있도록 함수를 사용하여 비디오에 timeupdate 이벤트를 추가합니다. 자세한 내용은 여기에서 timeupdate 이벤트에 대해 읽어보세요.
//add timeupdate event on video with a function.
$diviVideo.on("timeupdate", function (e) {
});
함수 내에서 비디오의 currentTime 속성이 5초 이상일 때마다 버튼 1(상단 버튼)을 표시하기 위해 if 문을 사용합니다.
//add timeupdate event on video with a function.
$diviVideo.on("timeupdate", function (e) {
//add class to show button1 when specified currentTime is reached.
if (e.target.currentTime >= 5) {
$delayedButton1.addClass("show-button");
}
});
참고: if 문의 조건은 e.target.currentTime >= 5 이지만 비디오를 재생할 때 다른 시간에 버튼을 표시하도록 변경할 수 있습니다. 예를 들어 비디오의 currentTime 이 20초에 도달할 때 버튼을 표시하려면 조건을 e.target.currentTime >= 20 으로 바꿀 수 있습니다.
그런 다음 다른 if 문을 사용하여 비디오가 일시 중지되거나 종료될 때마다 버튼 2(하단 버튼)를 표시합니다(일시 중지 및 종료 HTMLMediaElement 속성 사용).
//add timeupdate event on video with a function.
$diviVideo.on("timeupdate", function (e) {
//add class to show button1 when specified currentTime is reached.
if (e.target.currentTime >= 5) {
$delayedButton1.addClass("show-button");
}
//add class to show button2 when video is paused or has ended
if (videoElement.paused || videoElement.ended) {
$delayedButton2.addClass("show-button");
}
});
최종 결과
비디오의 현재 시간이 5초에 도달하면 상단 버튼이 표시되고 비디오가 종료되면 하단 버튼이 어떻게 나타나는지 확인하십시오.
여기에서 비디오의 현재 시간이 5초에 도달하면 동일한 상단 버튼이 나타나고 비디오가 일시 중지되면 하단 버튼이 나타납니다.
이 기능의 라이브 데모를 보려면 이 codepen을 확인할 수도 있습니다.
마지막 생각들
비디오의 현재 시간을 기준으로 버튼을 표시하면 제품 및 서비스 마케팅에 유용할 수 있습니다. 성공적인 프로모션 비디오는 어쨌든 강력한 클릭 유도문안이 필요합니다. 이 튜토리얼을 통해 HTML 비디오의 기능을 활용하여 원하는 시간과 장소에서 강력한 CTA를 제공하는 방법을 더 잘 이해할 수 있기를 바랍니다.
Divi에서 HTML 비디오를 사용하는 다른 창의적인 방법에 관심이 있다면 다음 기사를 참조하십시오.
- Divi에서 사용자 정의 HTML 비디오 컨트롤을 만드는 방법
- HTML5 비디오에 3D 효과를 추가하여 Divi에서 고유한 제품 애니메이션 표시
- Divi에서 표시/숨기기 토글로 고정 프로모션 비디오를 만드는 방법
댓글로 여러분의 의견을 기다리겠습니다.
건배!