영상자막을 채팅처럼 표현하기

DASHI 서비스를 계속 발전시키는 도중에, 트위치 채팅도 다시볼 수 있었으면 좋겠다고 생각했다.

문제는 채팅이 영상과 맞게 정확한 시간에 올라와야한다는 건데, 그래서 채팅을 WebVTT로 만들었다.

즉 영상 자막이 된다는 건데, 일반적인 영상 자막처럼이 아니라 세로로 스크롤하며 올라오는 채팅포맷이어야 했다.

<video id="video" controls muted>  
    <track label="pt" kind="captions" srclang="pt" src="/static/test/MIB2-subtitles-pt-BR.vtt" default/>  
</video>

var track = video.textTracks[0];
track.oncuechange = function() {  
    var cue = this.activeCues[0];  
    if (cue) {  
        console.log(cue.text);  
    }  
};

 

영상에 자막을 추가하고, 영상자막이 변경될때마다 console에 로그를 찍는 코드다.

이를 이용해서 Container에 채팅 Element를 하나씩 추가하고 스크롤을 내리는 코드를 작성하면 채팅처럼 보이게 된다.

player.ready(() => {
    const textTrack = player.textTracks()[0];
    textTrack.addEventListener("cuechange", () => {
        const cue = textTrack.activeCues[0];
        if (cue) {
            const cueText = cue.text;
            const chat = JSON.parse(cueText);
            const chatDiv = document.createElement("div");
            chatDiv.className = "chat";
            chatDiv.innerHTML = `<span style="color: ${chat.color}">${chat.display_name}</span>${chat.msg}`;
            chatWrapper.appendChild(chatDiv);
            chatWrapper.scrollTop = chatWrapper.scrollHeight;

            if (chatWrapper.children.length > 100) {
                chatWrapper.removeChild(chatWrapper.children[0]);
            }
        }
    });
});

VideoJS를 사용해서 약간 다른점은 있지만 골자는 같다.

 

 

.video-js .vjs-text-track-display,
video::cue, video::-webkit-media-text-track-display-backdrop,
video::-webkit-media-text-track-display {
    opacity: 0;
}

 

원래 영상에 있던 자막은 가려주면 끝!