audio/video

HTML5 발표 당시 관심을 받았던 분야 중 하나가 웹 상에서의 멀티미디어 부분이었습니다.
초기엔 인터넷이 느려서 오디오/사운드 부분은 그래도 괜찮았지만,비디오동영상 부분은 기본적으로 훨씬 넓은
데이타 전송 대역폭 문제가 있었고, 추후 라이센스와 , 브라우져 업체가 지원하는 코덱 문제등으로 사실
비디오 태그가 자리 잡는데는 생각보다 많은 시간이 필요했습니다.
요즘은 유투브가 대세죠~~

<video id="my_mv" src="sorim.mp4" autoplay muted controls controlslist="nodownload">
        <track src="sample-en.vtt" kind="subtitles" srclang="en" label="English"></track>
        <track src="sample-ko.vtt" kind="subtitles" srclang="ko" label="한국어" default></track>
</video>

sample-ko.vtt

WEBVTT FILE
 
Note 여기 주석이예요!                
00:00:00.000 --> 00:00:02.000 line:10%
<b>안넝하서요~</b>
 
00:00:02.000 --> 00:00:04.000  line:70% position:50%
<i>스크립트가 제일 쉬워요!~</i>
 
00:00:05.000 --> 00:00:06.000 position:30%
<u>이렇게 쉬운 언어가 있어요</u>

sample-en.vtt

WEBVTT FILE
 
Note 여기 주석이예요!              
00:00:00.000 --> 00:00:02.000 line:10%
<b>Hello Hello~</b>
 
00:00:02.000 --> 00:00:04.000  line:70% position:50%
<i>Script is really Easy!~</i>
 
00:00:05.000 --> 00:00:06.000 position:30%  align:right
<u>Lier Lier Lier Lier</u>

자막 내용에 CSS 입히기

 video::cue {
            font-size: 25px;
            color:red;
            background-color:yellow;
            opacity: 0.5;  /* 0은 완전 투명, 1은 완전 안투명  */
            line-height: 30px; /*텍스트를 담은 상자의 높이 */
 }

오디오/비디오 제어하깅

https://www.w3schools.com/tags/ref_av_dom.asp