css_비디오 / 오디오

브라우저별 지원하는 비디오 / 오디오 확장자

1. 비디오
   • mp4 : 모든 브라우저 지원.
     고화질 지원.
     웹용도로는 무료. 그 외는 모두 라이센스 필요.
   • webm : 크롬, 파이어폭스, 오페라, 엣지
     화질 우수
     무료
   • ogv : 크롬, 파이어폭스, 오페라, 엣지
     화질 별로
     무료
2. 오디오
   • mp3 : 모든 브라우저 지원.
   • ogg : 크롬, 파이어폭스, 오페라, 안드로이드

• ★브라우저 정책상 속성이 적용 되는 것들이 있고 안되는 것들이 있을 수 있다.

비디오 / 오디오 속성

• 비디오 : <video src="경로"[속성 = "속성값"]></video>
• 오디오 : <audio src=""></audio>
• 속성 :
  1. ★controls: 컨트롤 바
     비디오태그에서 컨트롤바 없으면 이미지처럼 나옴(플레이 안됨)
     오디오태그에서는 필수속성. 없으면 display: none됨.
  2. autoplay : 자동 재생
     웹 정책에 의해 자동이 막혔음.
     muted(음소거)를 같이 명시하면 동작하는 브라우저(ex. 크롬)도 있음.
     오디오에선 안먹음.
  3. muted : 음소거
  4. loop : 반복
  5. poster="경로" : 썸네일 이미지
     autoplay가 있으면 소용없음.
     처음 화면에서 동영상대신 해당 이미지가 나옴. 근데 autoplay해놓으면 바로 재생되기때문에 이미지 보이지 않음.
  6. playsinline : ios 자동재생시 필요
     전체화면이 아닐 경우 ios에서는 자동재생이 안된다. 해당 속성을 명시해두면 전체화면이 아니어서 자동재생이 되게 한다.

대체 택스트 / 플러그인

미디어파일들은 html5를 지원하는 브라우저에서만 동작하기 때문에 옛날 브라우저를 위해서 대체 택스트나 플러그인 같은 것들을 같이 준비해 놓는다.

<video>
    <source src="경로.mp4" type="video/mp4">
    <source src="경로.webm" type="video/webm">
    <source src="경로.ogv" type="video/ogv">
    <object data="경로.swf" type="application/x-shockwave-flash"></object>
    영상을 지원하지 않는 브라우저입니다. 
</video>

<audio>
    <source src="경로.mp3" type="audio/mp3">
    <source src="경로.ogg" type="audio/ogg">
    오디오를 지원하지 않는 브라우저입니다. 
</audio>

기타

오디오는 autoplay가 먹지 않기 때문에 잘 사용되지 않음.
그래서 비디오 autoplay를 먹여놓고 화면에서 안보이게 하는 것이 좋음.
트래픽을 많이 먹는다면 어쩔수 없이 오디오를 써야하긴 함.