HTML5 기초 | 오디오 태그와 비디오태그 활용법

HTML5은 웹브라우저의 플러그인 없이 오디오를 재생할 수 있다.

지금은 너무 당연하게 여겨지는 것 같은데 원래 웹브라우저는 HTML 문서만 쓱 뿌려주는 단계에서 발전해 온 것이다. 동영상과 오디오가 당당하게 출력되기 까지는 시간이 걸렸다. 최근에는 거의 공식적으로 자원기능이 끓긴 익스플로러 8 이하에서는 동작이 안된다고 한다.

참... 익스플로러 많은 사람들 특히 한국사람들에게 애증의 존재였다.

오디오 태그

<body> 
    <h1>Audio Test</h1>
    <audio src="bensound-sunny.mp3" controls="controls" type="audio/mp3"></audio>
    <br/>
    <audio src="bensound-tenderness.mp3" controls="controls" autoplay="autoplay" type="audio/mp3"></audio>
</body>

mp3, ogg, wav 파일을 지원한다. 브라우저 종류나 버전에 따라 지원하지 않는 음원도 있으니 개별적으로 확인한다. mp3나 ogg 파일이 웹상에서는 재생이 잘된다. 다른 오디오파일은 파일 변환을 해서 사용한다.

*온라인 오디오 변환기 사이트 - 오디오 변환사이트를 검색하면 많이 있다.

오디오 변환기

한 형식에서 다른 형식으로 온라인에서 오디오 파일 변환

online-audio-converter.com

*속성 : src 오디오 파일의 위치를 삽입한다, controls 는 재생기를 말한다. autoplay는 파일이 로드되면 바로 재생시작한다. type은 브라우저에 파일 형식을 알려준다.

인터넷에서 오디오 파일을 틀기 위해서는 저작권이 민감하다. Royalty Free Music 사이트를 이용하면 된다. 아래 bensound 같은 웹사이트에서 음악을 다운로드 받을 수 있다. 단 Royalty Free라도 허용이 안되는 범위가 있으니 반드시 개별 파일의 저작권 정보를 확인해야 한다.

https://www.bensound.com/royalty-free-music

Royalty Free Music by Bensound | Stock Music

Popular Newest

www.bensound.com

비디오 태그

오디오 태그와 마찬가지다. HTML5에서는 플러그인의 도움없이 동영상을 볼 수 있다. 호환성은 mp4 가 좋다. 요즘 유튜브도 거의 mp4 파일을 권장하는 것 같다.

<body> 
    <h1>Video Test</h1>
    <video controls="controls" width="640"  poster="weave.jpg">
        <source src ="Stork - 46192.mp4" type="video/mp4"/>
    </video>
    <br/>
    <video controls="controls" width="640"  autoplay="autoplay">
        <source src ="Night Sky - 31569.mp4" type="video/mp4"/>
    </video>
</body>

video 태그가 밖에 있다. 브라우저 마다 작동의 차이가 있다면 하나의 태그에 여러개의 소스를 넣을 수도 있다만 하나로도 충분하다.

poster 속성은 정지화면에 들어갈 썸네일 같은 것이다. 오토플레이 할 것이면 딱히 필요는 없다. 유튜브에서나 썸네일이 중요하지 일반 웹사이트에서 어그로 끄는 시대가 아니다.