Dreamweaver를 사용하여 비디오를 팝업하고 자동으로 닫는 방법-프런트엔드 Q&A-php.cn

Dreamweaver를 사용하여 비디오를 팝업하고 자동으로 닫는 방법

PHPz

풀어 주다： 2023-04-25 17:48:55

원래의

813명이 탐색했습니다.

Dreamweaver의 Javascript 팝업 비디오 자동 닫기는 웹 페이지 상호 작용에 매우 유용한 기술입니다. Dreamweaver의 Javascript 스크립팅 언어를 사용하면 작은 창을 띄웠다가 일정 시간이 지나면 자동으로 닫힐 수 있습니다. 이 기술은 사용자 로그인 프롬프트, 이벤트 프로모션, 광고 등과 같은 웹 디자인에서 자주 사용됩니다. 이 문서에서는 Dreamweaver를 사용하여 비디오를 팝업하고 자동으로 닫는 방법을 소개합니다.

1단계: 팝업 비디오 만들기

Dreamweaver에서 새 HTML 문서를 만들고 "video" 태그를 추가합니다. "video" 태그에 비디오 파일의 URL 링크를 추가하세요:

<video width="320" height="240" controls>
  <source src="video.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video>

로그인 후 복사

위 코드의 "src" 속성은 비디오 파일의 URL 링크 주소를 지정하고 "type" 속성은 비디오 파일의 형식입니다. 비디오 형식이 "mp4"가 아닌 경우 "type" 속성을 해당 형식으로 수정해야 합니다.

2단계: 팝업 만들기

Dreamweaver에서 새 HTML 문서를 만들고 버튼을 추가합니다. 버튼의 "onclick" 이벤트에 다음 코드를 추가하세요:

<script>
function openpopup() {
  newwindow=window.open('','popup','width=500,height=400');
  newwindow.document.write('<html><head><title>Popup Window</title></head><body><video width="320" height="240"><source src="video.mp4" type="video/mp4"></video></body></html>');
}
</script>
<button onclick="openpopup()">弹出视频</button>

로그인 후 복사

위 코드에서 "openpopup()" 함수는 새 창을 생성하고 창에 비디오 태그를 추가하는 데 사용됩니다. 영상의 URL링크는 1단계에서 생성한 영상링크와 동일합니다. "newwindow"에서는 더 풍부한 팝업 창 스타일을 얻기 위해 다른 HTML 요소를 추가할 수도 있습니다.

3단계: 팝업 창 자동 닫기

팝업 창을 자동으로 닫으려면 자바스크립트의 "setTimeout" 기능을 사용할 수 있습니다. 이 함수는 일정 시간이 지난 후 코드 조각을 실행하는 데 사용됩니다. "window.close()" 함수와 함께 사용하여 팝업 창을 자동으로 닫을 수 있습니다.

<script>
function openpopup() {
  newwindow=window.open('','popup','width=500,height=400');
  newwindow.document.write('<html><head><title>Popup Window</title></head><body><video width="320" height="240"><source src="video.mp4" type="video/mp4"></video></body></html>');
  setTimeout(function(){newwindow.close()},5000);
}
</script>
<button onclick="openpopup()">弹出视频</button>

로그인 후 복사

위 코드의 "setTimeout" 함수는 팝업 창이 5초 후에 닫히도록 지정합니다. . 시간이 더 필요한 경우 "5000"을 해당 시간(밀리초)으로 수정할 수 있습니다.

요약

이번 글에서는 드림위버에서 자바스크립트를 이용해 팝업 비디오를 구현하고 일정 시간이 지나면 자동으로 닫히는 방법을 소개했습니다. 이 기술은 사용자 경험을 더욱 풍부하고 편안하게 만드는 웹 디자인에 매우 유용합니다. 다른 효과를 시도하고 싶다면 팝업 창에 더 많은 HTML 요소와 스타일을 추가하여 더 많은 대화형 효과를 얻을 수 있습니다.

위 내용은 Dreamweaver를 사용하여 비디오를 팝업하고 자동으로 닫는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!