본문 바로가기
PROGRAMING📚/WEB📑

[HTML]HTML 안에 Video, Audio 적용하는 방법

별찌루 2023. 9. 6.
728x90
반응형

HTML, Video 적용하는 방법

 

<video src="영상의 경로"></video>

 

html 파일을 하나 만들어주고

<video src="영상의 경로"></video>를 넣어준다

 <video
      src="pexels-roman-odintsov-5659614 (2160p).mp4"
      style="width: 100%"
    ></video>

넣어주면 화면에 영상이 뜨는 것을 확인 할 수 있다

video만 작성하면 재생을 할 수가 없는데 재생을 하는 방법은

video 태그안에 속성 값을 넣어주어야한다

 

video 태그안에 속성 값

controls

재생 바를 보여줌

 

autoplay

자동으로 재생 - 재생이 안되는 경우 뒤에 muted를 넣어준다

 

loop

영상을 반복 재생

 

poster="경로"

시작전 썸네일 이미지를 지정해준다

 

preload="auto"

페이지가 로드 될 때, 전체 파일을 같이 로드 해줌 

 

preload="metadata"

페이지가 로드 될 때, 파일의 메타데이터만 로드 해줌

 

preload="none"

페이지가 로드 될 때, 파일을 불러오지 않는다

(미리다운 받지 않는다)

 

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <link href="input_sass.css" rel="stylesheet" />
  </head>
  <body>
    <video
      src="pexels-roman-odintsov-5659614 (2160p).mp4"
      controls
      autoplay
      loop
      style="width: 100%"
    ></video>
  </body>
</html>

 

 

<video 속성 ><source src="영상의 경로" type="타입/확장자" /></video>

 

위의 방식으로 사용하면 형식에 맞춰서 작성이 가능하기 때문에

호환성을 챙길 수 있다는 장점이 있다

 

type은 작성하지 않아도 괜찮다

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <link href="input_sass.css" rel="stylesheet" />
  </head>
  <body>
    <video controls autoplay loop style="width: 100%">
      <source
        src="pexels-roman-odintsov-5659614 (2160p).mp4"
        type="video/mp4"
      />
    </video>
  </body>
</html>

HTML,  Audio 적용하는 방법

 

비디오와 마찬가지로 audio <태그> 를 사용해서 만들어주면 된다

audio src 만 작성하면 오디오 플레이어가 생성이 되지 않기 때문에

오디오의 경우에는 반드시 controls 속성을 추가 해줘야한다

    <audio src="배달의민족 - 배달은 자신있어.mp3" controls></audio>

다음과 같이 코드를 넣어주면

하단에 오디오 재생플레이어가 생긴 것을 확인 할 수 있다

속성도 비디오랑 동일하게 사용이 가능하다

 

    <audio src="배달의민족 - 배달은 자신있어.mp3" controls muted></audio>

muted 속성을 적용하면 시작할 때 음소거를 한 상태로 시작이된다

 

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <link href="input_sass.css" rel="stylesheet" />
  </head>
  <body>
    <video controls autoplay loop style="width: 100%">
      <source
        src="pexels-roman-odintsov-5659614 (2160p).mp4"
        type="video/mp4"
      />
    </video>
    <audio controls autoplay loop muted>
      <source src="배달의민족 - 배달은 자신있어.mp3" type="audio/mp3" />
    </audio>
  </body>
</html>

 

728x90
반응형
저작자표시

'PROGRAMING📚 > WEB📑' 카테고리의 다른 글

[WEB]HTML, @keyframes 로 animaiton 만들기  (0) 2023.09.06
[WEB]HTML, transform사용하기  (0) 2023.09.06
[HTML]SASS, @use 문법  (0) 2023.09.06
[HTML]Sass, @Mixin 사용하기  (1) 2023.09.05
[HTML]SASS 변수, Nesting, @Extend 문법사용하기  (0) 2023.09.05

관련글

댓글


티스토리툴바