티스토리 뷰

HTML

미디어파일 video & audio & iframe

baegofda_ 2021. 8. 16. 18:42

* video & audio

  • 비디오 파일이나 오디오 파일을 실행 시키기위한 태그
  • <video src=""></video>, <audio src=""></audio>
  • controls, loop attribute를 공통적으로 사용한다.

* video

  • 두가지 방식으로 사용할 수 있다.
  • autoplay attribute를 사용가능 하다.
  • 소리가 있는 영상은 autoplay muted를 사용하고 소리가 없는영상은 muted를 사용하지 않아도된다. 
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <video src="./assets/videos/video.mp4" controls></video>
</body>
</html>
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <video controls>
        <source src="./assets/videos/video.webm"
                type="video/webm">
    
        <source src="./assets/videos/video.mp4"
                type="video/mp4">
       <p>
           죄송합니다. 현재 브라우저에 지원가능한 형식이 없습니다.
       </p>
    </video>
    <!-- 사용자의 브라우저에 따라 지원 가능한 형식이 다르기때문에 사용-->
</body>
</html>

controls attribute를 사용해야한다.

* audio

  • 이전에는 autuplay attribute를 사용 가능했지만 현재는 불가능하다.
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <audio src="./assets/audios/audio.mp3" controls></audio>
</body>
</html>
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <audio controls>
        <source src="myAudio.mp3" type="audio/mpeg">
        <source src="myAudio.ogg" type="audio/ogg">
        <p>
            현재 브라우저에 지원하는 오디오 형식이 없습니다.
        </p>
      </audio>
         <!-- 사용자의 브라우저에 따라 지원 가능한 형식이 다르기때문에 사용-->
</body>
</html>

controls attribute를 사용해야한다.

* iframe

  • html 문서안에 또다른 html문서를 embed하고 싶을때 사용한다.
  • 보통은 유튜브 영상등을 embed할때 사용
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <iframe width="560" height="315" src="https://www.youtube.com/embed/xsJtlzovCfE" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</body>
</html>

저작자표시

'HTML' 카테고리의 다른 글

Head Tag (title, link, script, meta)  (0) 2021.08.16
기타 etc.. (abbr, address, pre)  (0) 2021.08.16
table  (0) 2021.08.16
Form - button  (0) 2021.08.16
Form - textarea  (0) 2021.08.16
댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG more
«   2024/11   »
일 월 화 수 목 금 토
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
글 보관함