메뉴 건너뛰기

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

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

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

    Date2015.07.16 Views7407
    Read More
  4. prepend(),append(),before(),after() 메서드

    Date2014.10.20 Views7361
    Read More
  5. 폰갭(PhoneGap) 플러그인 사용하기

    Date2015.06.29 Views7359
    Read More
  6. [안드로이드] 콘텍스트 메뉴 사용예제

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

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

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

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

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

    Date2015.07.02 Views7160
    Read More
  12. [안드로이드] 뷰(View)의 너비와 높이 지정하기

    Date2015.07.17 Views7140
    Read More
  13. 네트워크 연결 상태 및 3G/WIFI 연결상태 체크하기

    Date2016.03.18 Views7131
    Read More
  14. Invalid project description 문제

    Date2015.07.01 Views7118
    Read More
  15. 이미지 버튼(ImageButton) 만들기

    Date2015.07.16 Views7114
    Read More
  16. 안드로이드 스튜디오 자동 임포트 하기

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

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

    Date2015.07.16 Views7061
    Read More
  19. HTML5로 비디오 보여주기 Video Tag

    Date2014.09.04 Views7061
    Read More
  20. 안드로이드 웹에서 이미지 불러오기!!

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

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

© k2s0o1d4e0s2i1g5n. All Rights Reserved