메뉴 건너뛰기

조회 수 7064 추천 수 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)

    Date2016.05.26 Views7479
    Read More
  2. 알아놓으면 좋은 내용정리

    Date2016.06.07 Views7466
    Read More
  3. URL을 이용해서 이미지 다운로드 하기

    Date2015.07.16 Views7416
    Read More
  4. 폰갭(PhoneGap) 플러그인 사용하기

    Date2015.06.29 Views7385
    Read More
  5. prepend(),append(),before(),after() 메서드

    Date2014.10.20 Views7362
    Read More
  6. [안드로이드] 콘텍스트 메뉴 사용예제

    Date2015.09.03 Views7350
    Read More
  7. 안드로이드 ( Android ) APK 파일 생성하기

    Date2015.07.17 Views7313
    Read More
  8. 푸쉬 알림 기능. GCM (Google Cloud Messaging) 사용하기 (2)

    Date2015.07.16 Views7297
    Read More
  9. [안드로이드] 뷰(View)에 여백넣기

    Date2015.07.17 Views7236
    Read More
  10. XmlPullParser 를이용하여 데이터 가져와보기!!

    Date2014.08.28 Views7227
    Read More
  11. [안드로이드스튜디오] 단축키

    Date2015.07.02 Views7164
    Read More
  12. 네트워크 연결 상태 및 3G/WIFI 연결상태 체크하기

    Date2016.03.18 Views7143
    Read More
  13. [안드로이드] 뷰(View)의 너비와 높이 지정하기

    Date2015.07.17 Views7143
    Read More
  14. Invalid project description 문제

    Date2015.07.01 Views7125
    Read More
  15. 안드로이드 스튜디오 자동 임포트 하기

    Date2015.07.09 Views7121
    Read More
  16. 이미지 버튼(ImageButton) 만들기

    Date2015.07.16 Views7116
    Read More
  17. [안드로이드] 레이아웃의 기본2

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

    Date2015.07.16 Views7067
    Read More
  19. [Android 2.3] SharePreference

    Date2015.07.01 Views7066
    Read More
  20. HTML5로 비디오 보여주기 Video Tag

    Date2014.09.04 Views7064
    Read More
Board Pagination Prev 1 2 3 4 5 6 7 8 9 10 ... 13 Next
/ 13

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

© k2s0o1d4e0s2i1g5n. All Rights Reserved