메뉴 건너뛰기

조회 수 7111 추천 수 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 Effects - SlideUp() 메서드 (슬라이드업) file 2014.10.16 6075
36 Effects - SlideToggle() 메서드 (슬라이드 업/다운) file 2014.10.16 6801
35 Effects - Animate() 메서드 (여러가지 효과 동시 처리) file 2014.10.16 31037
34 Effects - Stop() 메서드 (애니메이션 효과 멈추기) file 2014.10.16 6272
33 트리뷰(TreeView) 컨트롤 file 2014.10.16 6776
32 jQuery Ajax - jQuery.load() 메서드 (동적으로 원격 페이지 로드) file 2014.10.16 6477
31 JSON(JavaScript Object Notation) - jQuery Ajax - jQuery.getJSON() 메서드 (비동기적으로 JSON파일 로드) file 2014.10.16 6617
30 jQuery ajax post 요청 text 응답 2014.10.16 6775
29 HTML5 Geolocation (구글 지도에 현위치 표시하기) file 2014.09.04 6877
28 HTML5 Better semantic tags file 2014.09.04 6019
27 HTML5로 게임 만들기 워밍업 file 2014.09.04 6097
26 HTML5 Form 공부하기 -2- file 2014.09.04 6386
25 HTML5 Form 공부하기 -1- file 2014.09.04 5910
24 HTML5 Web Storage -01- file 2014.09.04 5637
23 HTML5 드래그 앤 드롭 하기 Drag and Drop file 2014.09.04 7807
22 HTML5로 나만의 비디오 플레이어 스킨 만들기 -3- JavaScript file 2014.09.04 6349
21 HTML5로 나만의 비디오 플레이어 스킨 만들기 -2- JavaScript file 2014.09.04 6359
20 HTML5로 나만의 비디오 플레이어 스킨 만들기 -1- CSS file 2014.09.04 6520
» HTML5로 비디오 보여주기 Video Tag file 2014.09.04 7111
18 JavaScript 맛보기 file 2014.09.04 6636
Board Pagination Prev 1 ... 4 5 6 7 8 9 10 11 12 13 Next
/ 13

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

© k2s0o1d4e0s2i1g5n. All Rights Reserved