[HTML] video 태그

1. 이슈

유튜브에 있는 동영상을 웹사이트로 가져와 보여줄 필요가 있었다.

이를 위해 video 태그를 알아봤다.

2. video 속성

//video 태그 속성들
<video src="" controls autoplay="autoplay" muted="muted" nodownload loop></video>

 

1. src 속성

 재생하고 싶은 동영상의 경로를 입력하는 속성이다.

 그러나 세부적인 동영상 컨트롤을 위해서는 src 속성 외에 다른 속성이 필요하다.

 

2. controls 속성

 재생버튼, 음량버튼, 전체화면 등 동영상을 컨트롤할 수 있는 버튼이 추가된다.

 

3. autoplay 속성

 동영상을 자동재생해주는 속성이다.

 크롬은 muted 속성을 같이 추가해줘야 자동재생이 진행된다.

 모바일에서는 보안상 이유로 자동재생이 되지 않는다.

 

4. muted 속성

 동영상 음소거 속성이다.

 비디오의 오디오 출력을 음소거로 지정한다.

 

5. nodownload 속성

 동영상에는 기본적으로 다운로드 버튼이 있어 비디오 원본 소스를 다운받을 수 있지만

 nodownload 속성을 추가하면 다운로드 버튼이 사라져 이를 방지할 수 있다.

 

6. loop 속성

 동영상 autoplay 속성을 통해 자동재생을 진행하더라도 1회 재생 후 종료된다.

 loop 속성은 동영상을 자동반복재생이 되도록 해준다. 

3. 유튜브 영상 연결방법

다른 방법으로 유튜브 영상 경로를 직접 입력하는 방법도 있다.

 

1. 유튜브 영상을 우클릭하여 소스 코드 복사

2. 유튜브 영상 공유를 클릭하여 퍼가기 

3. 복사된 소스코드를 원하는 곳에 붙여넣어서 사용하면 된다.

//복사된 소스코드 예시

<iframe width="1280" height="768" 
src="https://www.youtube.com/video/123456" 
title="VIDEO 태그 알아보기" 
frameborder="0" allow="accelerometer; clipboard-write; encrypted-media; 
gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" 
allowfullscreen></iframe>

iframe이란?

효과적으로 다른 HTML 페이지를 현재 페이지에 포함시키는 중첩된 브라우저로

iframe 요소를 이용하면 해당 웹 페이지 안에 어떠한 제한 없이 다른 페이지를 불러와서 삽입 할 수 있다.

단 복사한 소스코드를 그대로 사용 시 자동재생, 반복재생 등의 속성이 작동 안 될 수 있다.

그때는 src 속성뒤에 원하는 속성 값을 추가해주면 된다.

 

자동재생 추가

 src="https://www.youtube.com/video/123456"?autoplay=1&mute=1"

 

하단 컨트롤러 숨기기

src="https://www.youtube.com/video/123456"?autoplay=1&mute=1&controls=0 "

 

반복재생

src="https://www.youtube.com/video/123456"?autoplay=1&mute=1&controls=0&loop=1&playlist= 123456  "

반복재생 속성값은 1이며, playlist도 함께 넣어줘야 동작이 된다

여기서 123456은 동영상의 ID값으로 동영상마다 값이 다르다.

 

https://pncoding.tistory.com/31

[HTML 기초] 비디오태그 (video), source 태그 , 유튜브 영상 넣기

 

https://rebornbb.tistory.com/entry/HTML-iframe-%EC%9C%A0%ED%8A%9C%EB%B8%8C-%EB%8F%99%EC%98%81%EC%83%81-%EC%9E%90%EB%8F%99-%EC%97%B0%EC%86%8D%EC%9E%AC%EC%83%9D

[HTML] iframe 유튜브 동영상 자동 연속재생

https://japdaguri.tistory.com/entry/HTML5-Video-%ED%83%9C%EA%B7%B8-%EC%86%8C%EC%8A%A4-%EB%8B%A4%EC%9A%B4%EB%A1%9C%EB%93%9C-%EB%B0%A9%EC%A7%80

HTML5 Video 태그 소스 다운로드 방지

잘못된 내용이 있다면 지적부탁드립니다. 방문해주셔서 감사합니다.