HTML video/audio

HTML5 이전에 브라우저에서 비디오를 실행시키기 위해서는 flash같은 플러그인을 설치해야했다.

HTML5에서는 비디오 태그로 웹 페이지안에서 비디오를 공식적으로 지원한다. 

비디오 태그를 지원하는 브라우저로는 chrome 4.0 , explorer edge 9.0, firefox 3.5 , safari 4.0, opera 10.5가 있다.

 

<video>태그 사용하기

 

 <video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>

 

<audio controls>
  <source src="horse.ogg" type="audio/ogg">
  <source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>

 

• 비디오/오디오 태그 안에 있는 controls 속성은 비디오 재생,중지,소리조절 같은 설정 기능을 조작할 수 있게 한다.
• 또한 비디오 태그에 너비와 높이를 설정해 두는 게 좋다. 너비와 높이를 설정해주지 않으면 페이지가 로드될 때 깜빡거릴수가 있다.
• 비디오/오디오 태그 안에 있는 <source>태그에는 브라우저가 선택할 수 있는 미디어 형식들을 담아둔다.
• 비디오/오디오 태그안의 텍스트는 브라우저가 비디오 태그를 지원하지 않을 때 보여진다.
• autoplay 속성은 페이지가 로드된 후 비디오가 자동 재생된다. autoplay 속성은 모바일 기기에는 작동하지 않는다.
• HTML5에서 지원하는 비디오 형식에는 MP4, WebM, Ogg가 있다. 각 브라우저가 지원하는 비디오 형식은 다르다. Internet Explorer, Safari - MP4 / Chrome, Firefox , Opera -  MP4, WebM, Ogg

 

<video>태그/<audio> 태그 메소드와 속성

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