동영상 태그 삽입하기

HTML5에서는 <video> 태그를 사용

• 기본적인 <video> 태그 예제:

<video width="640" height="360" controls>
    <source src="video.mp4" type="video/mp4">
    <source src="video.webm" type="video/webm">
    <source src="video.ogv" type="video/ogg">
    브라우저가 동영상을 지원하지 않습니다.
</video>

주요 속성:

• controls : 재생, 일시정지 등의 기본 컨트롤 표시
• autoplay : 페이지 로드 시 자동 재생
• loop : 동영상이 끝나면 다시 재생
• muted : 음소거 설정
• poster="image.jpg" : 동영상이 로드되기 전에 표시할 이미지
• preload="auto" : 페이지 로딩 시 동영상 미리 로드

지원하는 동영상 형식:

• MP4 (H.264 + AAC) → 대부분의 브라우저 지원
• WebM (VP8/VP9 + Vorbis/Opus) → Chrome, Firefox, Edge 지원
• Ogg (Theora + Vorbis) → Firefox, Opera 지원

브라우저마다 지원하는 형식이 다를 수 있으므로 여러 개의 <source> 태그를 사용하여 다양한 형식을 제공하는 것이 좋습니다.

 

HTML5에서 동영상을 연속 재생(Loop 재생)

연속 재생하는 방법:

<video width="640" height="360" controls loop>
    <source src="video.mp4" type="video/mp4">
    브라우저가 동영상을 지원하지 않습니다.
</video>

👉 loop 속성을 추가하면 동영상이 끝날 때 자동으로 처음부터 다시 재생됩니다.

---

✅ JavaScript로 연속 재생 제어하기:

만약 loop 속성 없이 JavaScript로 연속 재생을 구현하고 싶다면, ended 이벤트를 활용할 수 있습니다.

<video id="myVideo" width="640" height="360" controls>
    <source src="video.mp4" type="video/mp4">
</video>

<script>
    const video = document.getElementById('myVideo');
    
    video.addEventListener('ended', function() {
        this.currentTime = 0; // 다시 처음으로 이동
        this.play(); // 재생 시작
    });
</script>

👉 이 방법을 사용하면 loop 속성 없이도 연속 재생을 구현할 수 있습니다.

어떤 방법을 사용해도 동영상이 끊김 없이 계속 재생될 거예요!

 

HTML5의 <video> 태그와 JavaScript를 활용하면 여러 개의 동영상을 순차적으로 자동 재생할 수 있습니다.

---

✅ 여러 개의 동영상을 순차적으로 재생하는 방법

<video id="myVideo" width="640" height="360" controls>
    <source id="videoSource" src="video1.mp4" type="video/mp4">
</video>

<script>
    const video = document.getElementById('myVideo');
    const source = document.getElementById('videoSource');

    // 재생할 동영상 리스트
    const playlist = ["video1.mp4", "video2.mp4", "video3.mp4"];
    let currentVideo = 0;

    // 동영상이 끝나면 다음 동영상으로 변경
    video.addEventListener('ended', function() {
        currentVideo++;
        if (currentVideo < playlist.length) {
            source.src = playlist[currentVideo]; // 다음 동영상으로 변경
            video.load();  // 새 동영상 로드
            video.play();  // 자동 재생
        }
    });
</script>

---

✅ 설명

1. playlist 배열에 여러 개의 동영상 파일을 저장합니다.
2. ended 이벤트를 감지하여 현재 동영상이 끝나면 다음 동영상으로 변경합니다.
3. video.load()를 호출하여 새로운 동영상을 불러오고, video.play()를 실행하여 자동 재생합니다.
4. 모든 동영상을 재생한 후에는 종료됩니다.
   👉 계속 반복하려면 currentVideo = 0;을 추가하면 됩니다.

---

✅ 무한 반복(순환 재생)

모든 동영상을 재생한 후 처음부터 다시 재생하려면 다음 코드를 추가하세요.

if (currentVideo >= playlist.length) {
    currentVideo = 0; // 처음부터 다시 재생
}

💡 이렇게 하면 여러 개의 동영상을 순서대로 자동 재생할 수 있습니다! 🚀🎬