메뉴 건너뛰기

조회 수 7061 추천 수 0 댓글 0
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄 첨부
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄 첨부
<!doctype html>
< html lang="en">
< head>
    <meta charset="utf-8"/>
    <title> Dougy's HTML5 </title>
< /head>
< body style="background-color:#8EE5EE;">
    <div id="big_wrapper">
        <video src="song.mp4"> </video>
    </div>
< /body>
< /html>

제 동영상 파일은 이름이 song.mp4 입니다.

크롬 브라우저에서 실행하면 위와 같이 나옵니다.
동영상이 play되지도 않고 어디 play버튼이나 stop 버튼 뭐 이런게 하나도 없습니다.
video 태그를 아래와 같이 고쳐 보세요.
< video src="song.mp4" controls > </video>


그냥 video 태그에 controls만 넣었는데 플레이버튼, 정지버튼,진행상황 bar 그리고 볼륨조절까지 다 나오네요.

video tag 안에 width와 height도 넣을 수 있습니다. 그러면 동영상 사이즈가 변할 겁니다.
이 video tag 안에 넣을 수 있는 속성들은 아래와 같은 것들이 있습니다.
다 보시면 아실 겁니다.
아래와 같이 video 태그를 바꿔보세요.
< video src="song.mp4" controls width="640" height="360" loop poster="video05.png"> </video>
너비, 높이를 지정했고 루프를 선언했고 poster에 한 이미지를 지정했습니다.
(저는 HTML5 로고를 사용했습니다.)
그러면 처음 실행될 때 poster에서 지정된 이미지가 나타나고 재생 버튼을 누르면 동영상이 시작됩니다.
여기에 autoplay를 추가하면 자동으로 동영상이 시작되겠죠?
여러분들이 필요한 속성을 사용하시면 됩니다.

List of Articles
번호 제목 날짜 조회 수
37 HTML5 Form 공부하기 -2- file 2014.09.04 6329
36 HTML5 Form 공부하기 -1- file 2014.09.04 5841
35 HTML5 Better semantic tags file 2014.09.04 5952
34 FTPClient 를이용한 데이터 업로드 하기 2014.08.28 6366
33 FTPClient 를이용하여 ftp상 서버에서 데이터 다운로드 편 2014.08.28 9853
32 Fragment에서 Toast 사용하기 2020.12.14 376
31 Fragment를 통한 하단탭 예제1 file 2020.12.14 242
30 Firebase - 푸시알림 보내기 (2) 2021.09.30 768
29 Firebase - 푸시알림 보내기 file 2021.09.30 339
28 Events - Unbind() 메서드 (이벤트 처리기 해제) file 2014.10.16 5749
27 Effects - Stop() 메서드 (애니메이션 효과 멈추기) file 2014.10.16 6225
26 Effects - SlideUp() 메서드 (슬라이드업) file 2014.10.16 6001
25 Effects - SlideToggle() 메서드 (슬라이드 업/다운) file 2014.10.16 6760
24 Effects - Show() / Hide() 메서드 (보이기 및 숨기기) file 2014.10.16 5957
23 Effects - FadeIn() / FadeOut() 메서드 (서서히 보이기 및 숨기기) file 2014.10.16 6069
22 Effects - Animate() 메서드 (여러가지 효과 동시 처리) file 2014.10.16 30635
21 EditText의 글자 수 제한 걸기 2015.07.16 13881
20 CSS3 Rounded Corner, 그림자 효과 사용하기 file 2014.09.04 6760
19 App 실행 file 2021.03.31 244
18 Apk manager 이용해 Decompile (디컴파일) 하기 file 2021.03.16 1623
Board Pagination Prev 1 ... 4 5 6 7 8 9 10 11 12 13 Next
/ 13

하단 정보를 입력할 수 있습니다

© k2s0o1d4e0s2i1g5n. All Rights Reserved