홈페이지 제작에 도움이 될만한 각종 테그 정보 입니다.

HTML5 비디오 / 오디오 삽입 테그

세상이야기      조회 수 15 추천 수 0 2017.12.19 21:45:25


최근 브라우즈 들은 html 5 를 대부분 지원 합니다.

html 5 에서는 이전의 emble 테그 대신 새로운 기능이 포함되었습니다.


오디오 입력하는 테그

   <audio controls>

     <source src="ogg 파일 일때 / 파일 URL" type="audio/ogg">                   

     <source src="MP3 파일 일때 / 파일 URL" type="audio/mpeg">

       Your browser does not support the audio element. 

      (테그를 지원하지 않는다는 내용으로 페이지에는 표시 되지 않습니다.)

     </audio>


비디오 입력하는 테그

 <video src="파일위치 URL" controls autoplay>                                       

      HTML5 Video is requrred for this example.

     </video>


옵션

centrols 컨트롤 표시여부

muted  음소거 형태로 플레이하기

autoplay 로딩후 자동플레이 하기

preload 버퍼링 부분 설정

width 동영상 넓이를 지정

height 동영상 높이를 지정


사용 예1)

<video poster="http://로딩때 이미지 위치/640x360" width="640" height="360" controls="controls">

    <source src="동영상 위치" type="video/mp4" />

    <source src="웹형식 동영상 파일 위치.webm" type="video/webm" />

</video>


사용 예2)

<video width="640" height="360" controls="controls" class="video-js vjs-default-skin" data-setup="{}">

    <source src="파일명.mp4" type="video/mp4" />

    <source src="파일명.ogv" type="video/ogv" />

</video>



List of Articles
번호 제목 글쓴이 날짜 조회 수
31 CSS 배경 이미지 속성 세상이야기 2017-12-24 18
» HTML5 비디오 / 오디오 삽입 테그 세상이야기 2017-12-19 15
29 [자바스크립트] 클릭시 숨은 부분이 표시되는 메뉴 file 세상이야기. 2011-05-10 1582
28 [자바스크립트] 세로형 슬라이딩 메뉴 소스 file 세상이야기. 2011-05-10 3242
27 [자바스크립트] 세로 슬라이딩 메뉴 소스 file 세상이야기. 2011-05-10 2930
26 [자바스크립트] 가로형 메뉴 만들기 소스 세상이야기. 2011-05-10 1867
25 [자바스크립트] 움직이는 팝업 레이어 세상이야기. 2011-05-10 1741
24 [자바스크립트] 화면 우측하단에 고정버턴 만들기 세상이야기. 2011-05-10 1640
23 제로보드 게시글 열람글 아래 목록 안나오게 하는 방법 세상이야기 2011-01-20 2412
22 안드로이드 OS 어플개발을 위한 프로그램 세상이야기. 2010-10-22 3070
XE Login