TIL] html에 video 넣기

video태그

html에서 비디오를 올리려면 어떻게 해야 할까?

비디오 태그를 활용하면 된다.

비디오 태그의 예제를 살펴보자

<video src="동영상 주소" type="video/동영상타입(예/mp4)"
</video>

위의 태그를 넣는다면 비디오를 웹페이지에 올릴 수 있다.

---

함께 사용하는 속성

비디오 태그와 함께 사용하는 태그는 어떤 것이 있을까?

천천히 살펴보도록 하자

1. height : 비디오 화면 높이
2. width : 비디오 화면 너비
3. autoplay : 비디오가 로드되자마자 자동으로 재생을 시작한다.
4. controls : 오디오 재생에 관한 조절 장치를 보여준다(동영상 조절 버튼이 생긴다)
5. loop : 비디오를 반복 재생한다.
6. muted : 비디오에 포함된 오디오를 음소거할지 정한다.
7. poster : 비디오가 다운되는 동안이나, 사용자가 재생 버튼을 누를 때까지 보일 이미지 url을 지정한다.
8. src : 삽입할 비디오의 주소를 입력한다.
9. preload : 비디오 파일을 어떻게 로드해야 하는지 정한다.

preload는 none, metadata, auto와 함께 사용이 가능한데

auto : 전체 비디오 파일을 로드한다.

metadata : metadata만 로드한다.

none : 비디오 파일을 로드하지 않는다.

---

flask에서 사용하기

flask로 연동하여 사용할 때는 어떻게 사용해야 할까?

밑의 예제를 살펴보자

<video autoplay loop muted>
    <source src="{{url_for('static', filename='동영상이름.mp4') }}" type="video/mp4">
</video>

위의 예제와 같이 사용하면 된다!

muted를 한 이유는 현재 크롬에서 muted를 하지 않으면

동영상을 불러오지 않는 이유로 muted를 설정해놓았다!

---

이번에는 토이 프로젝트를 통하여 비디오를 메인 페이지에 넣고 싶다는 생각이 들어

메인 페이지에 동영상을 넣어봤다!

확실하게 동영상이 있으니 메인 페이지가 심심하지 않았다!

정말 코딩을 하는 것은 어렵지만 결과물을 보면 너무 성취감이 큰 것 같다!

정말 열심히 해서 좋은 개발자가 무조건 될 것이다!

오늘 운전면허도 합격해서 이제는 면허학원에 갈 일 없이

코딩에 전념할 수 있다는 것에 너무 행복하다!