메뉴 건너뛰기

조회 수 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를 추가하면 자동으로 동영상이 시작되겠죠?
여러분들이 필요한 속성을 사용하시면 됩니다.

  1. Android 와 JSP 간 파라미터 암복호화 (1)

  2. No Image 07Jun
    by
    2016/06/07 Views 7458 

    알아놓으면 좋은 내용정리

  3. No Image 16Jul
    by
    2015/07/16 Views 7407 

    URL을 이용해서 이미지 다운로드 하기

  4. No Image 20Oct
    by
    2014/10/20 Views 7361 

    prepend(),append(),before(),after() 메서드

  5. No Image 29Jun
    by
    2015/06/29 Views 7359 

    폰갭(PhoneGap) 플러그인 사용하기

  6. [안드로이드] 콘텍스트 메뉴 사용예제

  7. 안드로이드 ( Android ) APK 파일 생성하기

  8. 푸쉬 알림 기능. GCM (Google Cloud Messaging) 사용하기 (2)

  9. No Image 17Jul
    by
    2015/07/17 Views 7225 

    [안드로이드] 뷰(View)에 여백넣기

  10. No Image 28Aug
    by
    2014/08/28 Views 7221 

    XmlPullParser 를이용하여 데이터 가져와보기!!

  11. No Image 02Jul
    by
    2015/07/02 Views 7160 

    [안드로이드스튜디오] 단축키

  12. No Image 17Jul
    by
    2015/07/17 Views 7140 

    [안드로이드] 뷰(View)의 너비와 높이 지정하기

  13. No Image 18Mar
    by
    2016/03/18 Views 7131 

    네트워크 연결 상태 및 3G/WIFI 연결상태 체크하기

  14. Invalid project description 문제

  15. No Image 16Jul
    by
    2015/07/16 Views 7114 

    이미지 버튼(ImageButton) 만들기

  16. 안드로이드 스튜디오 자동 임포트 하기

  17. No Image 16Jul
    by
    2015/07/16 Views 7071 

    [안드로이드] 레이아웃의 기본2

  18. 인텐트를 이용한 Activity간 데이터 전달 (사용자 정의 클래스)

  19. HTML5로 비디오 보여주기 Video Tag

  20. No Image 28Aug
    by
    2014/08/28 Views 7053 

    안드로이드 웹에서 이미지 불러오기!!

Board Pagination Prev 1 2 3 4 5 6 7 8 9 10 ... 13 Next
/ 13

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

© k2s0o1d4e0s2i1g5n. All Rights Reserved