티스토리 뷰

HTML

[HTML] Video and Embed

Dongi 2021. 11. 30. 14:17

안녕하세요 동기 여러분! 오늘은 비디오 넣는 방법에 대해 알아봅시다!

 

Video

<video> 태그와 쓸 수 있는 속성들

  • controls : 재생/일시정지 버튼이 생기고 소리 크게 작게 버튼과 전체 화면 버튼이 생김
  • autoplay : 사용자가 페이지를 로드하면 바아로 빠구 없이 재생이 시작됨
  • loop : 반복 재생됨

 

 

생김새

<video src="골드승급전.mp4" controls>영상이 안나오시는군요?</video>
  • src 에는 동영상 파일 이름 또는 URL 넣어 주면 됩니다.
  • controls는 속성입니다.
  • <video></video> 태그 사이에는 동영사이 나오지 않을 시 뜨는 문구를 설정해줄 수 있습니다.

 

 

Embed

<embed>태그는 HTML5부터 공식적으로 지원하고 있는 태그입니다. 그래서 적용이 안 되는 브라우저가 있을 수 있습니다.

 

이 친구의 기능은 모든 미디어를 끌어올 수 있다는 장점이 있습니다. (예 : video, audio, image 등등)

 

 

생김새

<embed src="솔킬명장면.gif"/>
  • 흔히 우리가 알고 있는 '움짤'(gif 파일)을 embed로 넣는 경우가 많습니다. 
  • <video> 태그와 다르게 뒷 태그가 없고 자체에서 닫아 버립니다. <embed/>
  • 이 태그의 장점이 단점이 되는 경우가 있는데 코드가 짧은 웹 페이지에는 괜찮지만 미디어가 많이 들어가는 페이지에 모든 태그를 <embed> 태그로 적어둔다면 코드가 지저분해 보이고 식별이 힘들 수 있습니다. 

 

 

예

<!DOCTYPE html>
<html>
  <body>
    <header>
      <h1>
        동기 코딩
      </h1>
      <video src="https://vsak1.play.kakao.com/vod/rvvkl4dkmgb1hp1b9kcsx441i/mp4/mp4/mp4_480P_1M_T1.mp4?px-time=1638259438&amp;px-bps=2964797&amp;px-bufahead=10&amp;px-hash=268e8a327bad69abab48264e45a85c62" controls width="320" height="240">지원하지 않는 브라우저 입니다.</video>
      <br>
      <embed src="https://blog.kakaocdn.net/dn/bIqAvu/btrmyCRnQz7/QHcveJYHlQdxG4XQk0PCkk/spicymayotuna.gif?attach=1&knm=img.gif" width="320" height="240"/>

    <footer>
      <p>
        연락처 loveehd012@gmail.com
      </p>
    </footer>
  </body>
</html>

 

지저분해 보이지 않게 width와 height를 설정해 주었습니다. 아래는 실행 화면입니다.

 

오늘의 느낌

제가 만든 매운 마요네즈 참치 마끼입니다 ㅎㅎ 컷 장면을 컷해서 움짤을 만들어 보았습니다.

'HTML' 카테고리의 다른 글

[HTML] Audio and Attributes  (0) 2021.11.29
[HTML] Figure and Figcaption  (0) 2021.11.28
[HTML] The Aside Element  (0) 2021.11.28
[HTML] Article and Section  (0) 2021.11.27
[HTML] Main and Footer  (0) 2021.11.27
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG more
«   2025/01   »
일 월 화 수 목 금 토
1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31
글 보관함