메뉴 건너뛰기

조회 수 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
번호 제목 날짜 조회 수
257 안드로이드 php 로 mysql json 파싱 하기 2014.08.28 9477
256 FTPClient 를이용하여 ftp상 서버에서 데이터 다운로드 편 2014.08.28 9916
255 XmlPullParser 를이용하여 데이터 가져와보기!! 2014.08.28 7279
254 FTPClient 를이용한 데이터 업로드 하기 2014.08.28 6426
253 클래스나눠서 xml 파싱과 FTP를이용하여 안드로이드에서 활용하기 2014.08.28 6239
252 전화 인텐트와 나의 전화 번호가져오기 2014.08.28 6371
251 사진찍기 및 앨범 에서 사진 가져오기!!! 2014.08.28 13948
250 안드로이드 웹에서 이미지 불러오기!! 2014.08.28 7374
249 맵에 오버레이 추가하여 아이템 넣어보기 2014.08.28 6538
248 실행중인 Service 확인하기 2014.08.28 6635
247 안드로이드 이미지 효율적으로 회전 해보기 2014.08.28 6069
246 WIFI 신호세기 강도 측정하기 2014.08.28 11305
245 WebView 줌 컨트롤러 가리기 2014.08.28 6359
244 ImageVeiw의 현재 리소스 비교하기 2014.08.28 6810
243 HTML5 Speech Input (음성인식) API 2014.09.04 6491
242 HTML5 시작하기 file 2014.09.04 5704
241 CSS3 Rounded Corner, 그림자 효과 사용하기 file 2014.09.04 6830
240 JavaScript 맛보기 file 2014.09.04 6636
» HTML5로 비디오 보여주기 Video Tag file 2014.09.04 7111
238 HTML5로 나만의 비디오 플레이어 스킨 만들기 -1- CSS file 2014.09.04 6520
Board Pagination Prev 1 2 3 4 5 6 7 8 9 10 ... 13 Next
/ 13

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

© k2s0o1d4e0s2i1g5n. All Rights Reserved