<video> <audio> 태그

<video> 요소는 웹 페이지에 비디오 파일을 내장하는 데 사용할 수 있는 멀티미디어 태그이다.

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

 

 

<audio> 요소는 웹 페이지에 오디오 파일을 내장하는 데 사용할 수 있는 멀티미디어 태그이다:

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

 

<iframe> 요소와 유튜브 임베디드 코드를 사용하여 유튜브 비디오를 웹 페이지에 임베디드할 수 있다.

<iframe width="560" height="315" src="https://www.youtube.com/embed/VIDEO_ID" 
frameborder="0" 
allow="accelerometer; 
autoplay; 
encrypted-media; gyroscope; picture-in-picture" 
allowfullscreen></iframe>

이 예에서는 <iframe> 요소를 사용하여 YouTube 비디오를 내장하고, src 속성은 비디오의 URL을 지정한다. 너비 및 높이 속성은 비디오 플레이어의 치수를 지정한다. 프레임 경계 특성은 비디오 플레이어 주변의 경계를 제거하기 위해 0으로 설정되며, 허용 특성은 재생할 비디오에 대한 사용 권한을 지정하고, 전체 화면 특성을 허용하면 비디오를 전체 화면 모드로 재생할 수 있다.

비디오 ID는 비디오 URL "https://www.youtube.com/watch?v에서 얻을 수 있습니다=VIDEO_ID", VIDEO_ID를 실제 비디오 ID로 대체할 수 있다.

자동 재생, 컨트롤, 루프, 음소거, mute 브랜딩, rel, showinfo, start, end 등과 같은 다른 매개 변수를 URL에 추가하여 YouTube 플레이어를 사용자가 지정할 수 있다.

또한 YouTube의 JavaScript API를 사용하여 동영상 재생을 제어하고, 현재 동영상에 대한 정보를 검색하고, 플레이어에서 이벤트를 청취할 수 있다.