[2021/12/15]국비지원 HTML5 코딩툴 기본학습 7-(2) video

이 날의 과정

1. form 복습 + form 예제 이미지 마크업 해서 수업 중 과제로 제출
2. video 태그
3. audio 태그
4. 기타 요소 태그
5. 한국남부발전공사 공지사항 페이지 마크업

작성은 video 따로, source 따로 했지만
굳이 이렇게 나눠서 하지 않아도 된다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>audio, iframe<title>
</head>
<body>
    <!-- HTML5에서는 <video>태그로 동영상 삽입
        속성: src, poster, preload, autoplay, loop, controls, width, height
        단, 모바일기기 자동실행 안 됨 
        muted: 비디오 재생 시 소리 끄고 화면만 재생. 비디오 문서 배경 사용 or
        소리 불필요할 때-->
    <video width="720" height="360" poster="video/poster.jpg" muted autoplay controls loop>
        <source src="video/spring.mp4" type="video/mp4">
    </video>
</body>
</html>

출력물

동일한 내용을 한방에 정리한 태그

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>video</title>
</head>
<body>
	<video src="video/spring.mp4" width="720" height="360" 
	poster="video/poster.jpg" type="video/mp4" muted autoplay controls loop></video>
</body>
</html>

이게 더 깰끔

저작자표시 비영리 변경금지

티스토리툴바