21 HTML_2 [ media ]

 

먼저 유튜브에서 원하는 동영상을 고른다.

오마이걸 dun dun dance

공유를 누르면 '퍼가기'라는 버튼이 있다.

 

누르게 되면 iframe으로 코드가 나오는데 그것을 복사해서 붙여 넣어 주면!

 

이렇게 영상이 나오게 된다!

 

혹은

https://youtu.be/O71LwlpZAH0

옴걸 이쁜거 같이 봅시다

링크를 복사해서

embed 태그로 바꿔주면

 

<embed width="500" height="320"

                  src="https://youtube.com/embed/O71LwlpZAH0" type="">

왼 iframe / 오 embed

 

html 4.01, xhtml 에서는 iframe을 사용하도록 하고, 

html5 일 경우 embed를 사용하길 권장한다.

 

 

---

video

 

<video width="560" height="320" autoplay loop controls muted poster="폴더명/파일명">

        <source src="폴더명/파일명" type="video/mp4">

</video>

 

 

audio

<audio controls autoplay>

        <source src="폴더명/파일명.mp3">

</audio>

 

 

autoplay	video, audio 동일 속성값, 자동 재생
controls	video, audio 동일 속성값, 재생영역에 제어버튼을 활성화 하는 속성값
loop	video, audio 동일 속성값, 반복 재생을 시키는 속성값
preload	video, audio 동일 속성값, 스트리밍 방식이 아닌 백그라운드 다운로드를 통해 재생
muted	video, audio 동일 속성값, 미디어 객체를 불러왔을때,  초기 설정을 mute 상태로 불러오는 속성값
src	video, audio 동일 속성값, 미디어 객체를 지정하는 속성값
poster	video 전용 속성값, video객체를 불러오지 못할 때, 대체 이미지를 출력 시키는 속성값
width, height	video 전용 속성값, video 객체 영역의 크기를 정하는 속성값

 

mp4	사파리, IE9 이상, 아이폰, 아이패드, 안드로이드, 윈도우7 폰 지원
webM	FF4이상, 오페라, 크롬 지원
ogv	FF구버전, 오페라구버전 지원
3g	모바일 장치들 지원