it수업 1~2주차 (9) video 태그

 

video태그

1. 새로운 폴더인 video를 만들고 그 안에 비디오를 저장한다.

2. 유튜브에가서 영상의 공유를 누른 뒤 퍼가기를 눌러보면 <iframe>태그를 볼 수 있다. 그 태그를 복사하여 붙여넣기를 한다.

<video>태그에 'controls autoplay loop muted'를 치면 자동으로 영상이 틀어지도록 할 수 있다. 

 

 

<실행화면>

 

 

● 자동재생 

    자동 재생을 원한다면 '?autoplay=1&mute1'을 치면 되지만 앞에 이미 '?'가 있다면 '&'를 붙여준다.

유튜브의 영상을 가져오면 이런 코드가 나오는데 src="http://~~~~" 여기에 추가로 src="http://~~~~&autoplay=1&mute=1"을 치면 유튜브 영상이 자동으로 재생되는 것을 볼 수 있다.

↓

 

<실행화면>

 

 

 

 

 

 

두번째 실습

 

● z-index는 여러 블럭형 태그들이 있을 때 먼저 보여주는 것을 선택하는 것이다. (기본형 : 1)

● Opacity : 불투명도

● 첫 번째 코드 이미지의 9행에 있는 control을 없애면 정지 버튼을 사라지도록 할 수 있다. 

 

 

 

<실행 화면>

정지, 시작 버튼이 없고 스크롤바 없이 화면에 꽉 찬 불투명한 영상을 볼 수 있다.

 

 

 

 

 

 

 

유튜브 영상 출처 :  https://youtu.be/Llour2YvsiI?

겨울 길 영상 출처 : https://pixabay.com/ko/videos/%EB%82%98%EB%AC%B4-%EC%88%B2-%EB%88%88-%EA%B8%B8-%EA%B2%A8%EC%9A%B8-192357/