HTML로 동영상을 재생하는 가장 쉬운 방법은 유튜브를 사용하는 것이다.
유튜브 비디오 아이디(Youtube Video Id)
동영상을 저장(또는 재생)할 때 YouTube에 ID(tgbNymZ7vqY 등)가 표시된다.
당신은 이 아이디를 사용할 수 있으며, HTML 코드에서 당신의 동영상을 참조할 수 있다.
HTML에서 유튜브 재생하기
웹 페이지에서 비디오를 재생하려면 다음을 수행한다:
- 동영상을 YouTube에 업로드한다
- 비디오 ID를 기록한다
- 웹 페이지에서 <iframe> 요소 정의
- src 특성이 비디오 URL을 가리킬 수 있다
- 너비 및 높이 속성을 사용하여 플레이어의 치수 지정
- URL에 다른 매개 변수를 추가한다(아래 참조)
| <!DOCTYPE html> <html> <body> <iframe width="420" height="345" src="https://www.youtube.com/embed/3UhUYqJkWGw"> </iframe> </body> </html> |
위의 코드를 실행한 결과 화면이다.
유튜브 비디오 아이디 찾기
아래 유튜브 주소에서 youtube.com/watch?v=3UhUYqJkWGw 에서
"watch?v=" 뒤에 숫자 문자 조합이 유튜브 아이디이다.
HTML 유튜브 자동실행과 묵음(autoplay, muted)
YouTube URL에 autoplay=1을 추가하여 사용자가 페이지를 방문할 때 비디오가 자동으로 재생되도록 할 수 있습니다. 하지만, 자동으로 비디오를 시작하는 것은 방문객들에게 짜증나는 일입니다!
자동 재생=1 뒤에 mute=1을 추가하여 비디오가 자동으로 재생되도록 합니다(단, mute).
| <!DOCTYPE html> <html> <body> <iframe width="420" height="345" src=" https://www.youtube.com/embed/tgbNymZ7vqY?autoplay=1&mute=1 "> </iframe> </body> </html> |
유튜브 플레이리스트(playlist)
원래 URL 외에 재생할 비디오의 쉼표로 구분된 목록이다.
유튜브 루프(youtube loop)
loop=1을 추가하여 비디오가 영원히 반복되도록 한다.
값 0(기본값): 비디오가 한 번만 재생된다.
값 1: 비디오가 루프합니다(영구).
| <!DOCTYPE html> <html> <body> <iframe width="420" height="345" src=" https://www.youtube.com/embed/tgbNymZ7vqY?playlist=tgbNymZ7vqY&loop=1 "> </iframe> </body> </html> |
loop=1로 영구히 유튜브 비디오는 반복된다.
유튜브 제어
비디오 플레이어에 컨트롤을 표시하지 않으려면 컨트롤 = 0을 추가한다.
값 0: 플레이어 컨트롤이 표시되지 않는다.
값 1(기본값): 플레이어가 디스플레이를 제어한다.
| <!DOCTYPE html> <html> <body> <iframe width="420" height="345" src=" https://www.youtube.com/embed/tgbNymZ7vqY?controls=1 "> </iframe> </body> </html> |
지금까지 HTML에서 유튜브 활용 관련해서 간략히 살펴보았다.
모두 화이팅입니다.!!!
출처 : 이 글의 출처는 w3schools사이트를 참고하였으며 필자가 추가하여 정리한 글입니다.
'HTML > HTML 기본문법' 카테고리의 다른 글
| HTML Drage and Drop API (0) | 2023.06.24 |
|---|---|
| HTML 위치 API(Geolocation API) (0) | 2023.06.23 |
| HTML 플러그인(Plug-ins) (0) | 2023.06.21 |
| HTML 오디오(Audio) (0) | 2023.06.20 |
| HTML 비디오(HTML Video) (0) | 2023.06.19 |
댓글