HTML에서 여러 동영상을 연속으로 재생하기(video tag)

Tauri로 새로운 윈도우 어플리케이션 프로젝트를 시작하면서

프론트엔드를 Sveltekit, 백엔드는 Rust로 두고 작업을 하던 중에

여러개의 영상 파일을 차례대로 재생할 컨트롤이 필요해서 만들었습니다.

 

onMount만 Sveltekit과 관련있습니다.

다른 환경에서는 유사한 것으로 대체해서 사용하시면 됩니다.

 

1. /asset/media 폴더에 재생할 영상 파일과 해당 파일들읠 이름을 담고 있는 playlist.json을 넣습니다.

2. 해당 컴포넌트가 열리면 /asset/media 폴더의 playlist.json 파일을 읽어서 재생할 미디어 파일 목록을 가져옵니다.

3. 2에서 생성한 playlist의 영상을 차례대로 재생합니다.(끝까지 재생한 경우 다시 처음으로 돌아갑니다.)

 

 

+Page.svelte

<script lang="ts">
    import { onMount } from 'svelte';

    const nameMediaFolder = '/asset/media/';
    const nameFilePlaylist = 'playlist.json';
    let playlist;
    let index = 0;

    onMount(async () => {
        await fetch(nameMediaFolder + nameFilePlaylist)
            .then((response) => response.json())
            .then((json) => {
                console.log(json.playlist);

                playlist = json.playlist;
            });

        let player = document.getElementById('videoPlayer');
        
        player?.addEventListener("ended", () => {
            if (player != null && playlist.length > 0) {
                index = index + 1;
                if( index >= playlist.length )
                {
                    index = 0;
                }
                
                player.src = nameMediaFolder + playlist[index];
                player.play();
                
                console.log(player.src);
            }
        });
        
        if (player != null && playlist.length > 0) {
            player.src = nameMediaFolder + playlist[index];
            player.play();
        }
    });
</script>

<video id="videoPlayer" width="800" source="">
</video>

 

 

playlist.json

{
    "playlist" : [
        "Monday.mp4",
        "BlueSky.mp4"
    ]
}