본문 바로가기
카테고리 없음

페이지 들어가면 ~자동으로 영상 실행 하는 코딩 만들기법 설명

by 진리 지혜 2023. 2. 19.
 

페이지에 접속하면 자동으로 영상이 재생되도록 하려면 HTML과 JavaScript를 사용하여 다음과 같은 방법으로 구현할 수 있습니다.

  1. HTML 파일 만들기: HTML은 페이지 구조를 정의하는 언어입니다. 다음과 같이 HTML 파일을 만듭니다.
htmlCopy code
<!DOCTYPE html> <html> <head> <title>자동 재생 영상 페이지</title> </head> <body> <video id="my-video" width="640" height="360"> <source src="my-video.mp4" type="video/mp4"> </video> </body> <script src="autoplay.js"></script> </html>

위의 코드에서는 비디오를 표시하는 <video> 요소를 사용하고 있습니다. 비디오 파일은 src 속성에 지정하며, 이 예에서는 my-video.mp4 파일을 사용합니다. 이후 페이지 하단에서 autoplay.js 파일을 로드하도록 script 태그를 추가합니다.

  1. JavaScript 파일 만들기: JavaScript는 HTML 요소를 동적으로 제어하는 언어입니다. 다음과 같이 JavaScript 파일을 만듭니다.
javascriptCopy code
window.onload = function() { var video = document.getElementById("my-video"); video.autoplay = true; video.load(); };

위의 코드는 페이지가 로드될 때 자동으로 실행되는 함수를 정의하고 있습니다. 이 함수에서는 <video> 요소를 가져와 autoplay 속성을 true로 설정하고, load() 메소드를 호출하여 비디오를 로드합니다.

  1. 파일 저장하기: 위의 코드를 각각 index.html과 autoplay.js라는 이름으로 저장합니다. 비디오 파일도 같은 폴더에 저장해야 합니다.

이제 위의 파일들을 웹 서버에 업로드하고, index.html 파일을 브라우저에서 열어서 페이지가 로드될 때 자동으로 비디오가 재생되는지 확인할 수 있습니다.

댓글