Objectives

  • HTML5 오디오와 비디오 elements
  • plugin 목적
  • 접근성 이슈

HTML5 Multimedia

HTML5 이전에는 모든 브라우저에서 할 수 있는 한결같은 multimedia 사용이 없었다.
HTML5는 머신에서 가지지 않은 plugin이나 소프트웨어 사용하는 것을 피해서 디자인 되었다.
quicktime, flash 어떤거 다운로드 할 필요가 없어졌다.

  • 비디오나 음악을 플레이할때 추가적인 소프트웨어 사용하지 않게 디자인
  • 전체를 구현하지 않음

Video element <video>

  • video tag는 src attribute나 embedded <source>를 사용
  • common attributes
    • width, height
    • autoplay
    • loop
    • controls
  • 브라우저가 지원하지 않는 tag면 <video>..</video> 에 있는 text가 디스플레이 된다.

Audio element <audio>

  • audio tag는 .mp3, .wav 와 같은 파일을 링크하는 src attribute를 사용한다.
  • common attributes
    • autoplay, controls, loop
    • buffered
    • muted
    • volume

Setting clips

  • video 나 audio에 src attribute에 추가해서 clip을 설정할 수 있다.
    • .ext#t=5, 25 : 5~25초 플레이
    • .ext#t=, 39 : 플레이할 때 39초에서 시작
    • .ext#t=, 1:38:45
    • .ext#t=42 : 42초부터 시작
<video src = "abc.mov" autoplay>
    your browser does not support the <code>video</code> element.
</video>

Plugins

  • HTML5 이전에는 video display 표준이 없어서 plugin이 요구되었음
  • 모든 브라우저가 새로운 tag를 지원하지 않기 때문에 일부 브라우저에서는 flash가 요구됨

접근성 이슈

  • plugin 링크를 제공
  • text 설명을 넣어라
  • multimedia는 content를 산만한게 아니라 강화해야 한다.

공부 위치 – https://www.coursera.org/learn/html/lecture/CIR2e/02-07-multimedia