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