html : 비디오태그+iframe youtube 기본&활용 공부

HTML 5

html : 비디오태그 기본&활용 공부

ⓑ video 동영상태그

* video태그는 블록 요소입니다.

* video는 웹 사이트에 출력되는 영상을 재생하는 역할을 합니다.

* video작성 시 추가속성 없이 태그만 작성한다면 자동재생되지 않고 첫 화면에서 정지한 모습을 볼 수 있습니다.

//비디오를 작성하는 방법1
<video src="동영상경로"></video>


//비디오를 작성하는 방법2
<video>
	<source src="동영상경로" type="동영상타입1">
    	<source src="동영상경로" type="동영상타입2">
</video>

※ (위) 1번 방법은 제공되는 확장자가 1개일 경우 연결하는 방법입니다. (ex) cat.mp4

※ (위) 2번 방법은 제공되는 확장자가 2개이상일 경우 연결하는 방법입니다.

ㄴ 동영상 1개의 확장자가 서로 다를 경우 (ex) cat.mp4 , cat.webm

* src, type 속성에 작성할 수 있는 확장자 종류와 호환성 차이

	mp4	webm	ogg
IE	o	x	x
CH	o	o	o
FF	o	o	o
safari	o	x	x
opera	o	o	o

* video 속성

* video의 속성은 일반적인 태그의 속성과 다르게 속성명만 작성해도 결과가 적용됩니다.

* autoplay = "autoplay" 속성명과 결과값이 같기 때문에 autoplay 속성명만 작성해도 동작하는 구조입니다.

* 명령 입력 안할 시 자동재생, 음소거, 컨트롤바 표시, 영상반복 속성이 모두 적용되지 않습니다.

autoplay //자동재생
muted //음소거
controls //컨트롤 바 표시
loop //반복

//비디오를 작성하는 방법1
<video src="동영상경로" autoplay muted controls loop></video>


//비디오를 작성하는 방법2
<video autoplay muted controls loop>
	<source src="동영상경로" type="동영상타입1">
    	<source src="동영상경로" type="동영상타입2">
</video>

youtube iframe 소스태그 복사 후 삽입 속성

<iframe width="352" height="626" src="https://www.youtube.com/embed/-2hFF6pINUo?autoplay=1&mute=1&loop=1&playlist=-2hFF6pINUo&controls=0" title="The non-stop moewing machine" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>

<iframe src="https://www.youtube.com/embed/동영상주소">

<iframe src="https://www.youtube.com/embed/동영상주소?속성=값&속성=값">

autoplay=1 자동재생 0,1
mute=1 음소거 0,1
loop=1 반복재생 0,1
playlist=동영상주소 (반복재생 1 설정 시 동시 필수값)
controls=1 하단 컨트롤 표시 0,1

yoututbe 영상 다운받기

Comments, Trackbacks