ShakeJ
MNWorld
ShakeJ
전체 방문자
4,215,101
오늘
0
어제
98
  • 카테고리
    • Contact
    • 🤔그냥이야기
    • 📷사진이야기
    • 옛글
      • 👇Blog
      • 공지사항
      • 이슈
      • 생각들
      • 👇취미
      • 건프라
      • 👇Review
      • 노래리뷰
      • 영화리뷰
      • 👇Travel Story
      • 2011 도쿄여행기
      • 2013 Google IO
      • 2013 Jeju
      • 2014 HONGKONG
      • 2014 Jeju
      • 2014 Sanfransisco
      • 2015 Lombok
      • 2016 HONGKONG
      • 2017 Saigon
      • 국내여행기
      • Photo Story
      • Growth
      • 👇Server
      • Ruby on the Rails
      • Frontend
      • FullStack (MEAN)
      • Ubuntu
      • 👇Android
      • 안드로이드 프로..
      • 번역본
      • 내어플이야기
      • 코드창고
      • 👇iOS
      • 아이폰 프로그래밍
      • 맥북 이야기
      • 👇Microsoft
      • ASP.NET
      • Silverlight
      • 윈도우 이야기
      • 👇IT Story
      • 모바일 이야기
      • 하드웨어 이야기
      • 네트워크 이야기
      • 프로그래밍이야기
      • Database이야기
      • 클라우드이야기
      • 프론트 이야기
      • 마케팅이야기
      • 그래픽 작업
      • 블로그 팁

블로그 메뉴

  • GuestBook

공지사항

인기 글

  • [서울 출사지] 남양주 폐공장과⋯
    2017.03.20
    [서울 출사지] 남양주 폐공장과⋯
  • 소니 노이즈캔슬링 이어폰 MDR-⋯
    2017.03.14
    소니 노이즈캔슬링 이어폰 MDR-⋯
  • [Ruby on rails] ElasticSearch⋯
    2017.04.14
    [Ruby on rails] ElasticSearch⋯
  • 로지텍 M331 무소음 빨간 무선⋯
    2017.04.07
    로지텍 M331 무소음 빨간 무선⋯
  • Rails 구글 크롬 노티피케이션(⋯
    2017.10.13
    Rails 구글 크롬 노티피케이션(⋯

태그

  • shakej
  • 블로그 운영하기
  • 배너제작
  • 블로그 운영하면서
  • 블로그 운영
  • 안드로이드 어플 추천
  • 티스토리 초대장
  • 티스토리
  • 블로그 초보
  • 서울 출사지
  • 초대장
  • 블로그 잡담
  • 블로그 관련
  • 블로그 처음
  • 블로그 시작하기
  • D40 사진
  • iOS 프로그래밍
  • asp.net
  • 랩
  • 블로그 팁
  • 블로그 만들기
  • 풍경사진
  • 윈도우폰7
  • 무료배너제작
  • 배너무료제작
  • 배너교환
  • 블로그 꾸미기
  • MNWorld
  • 티스토리 팁
  • 블로그 이야기

최근 댓글

  • 감사합니다~!
    ShakeJ
  • 포스팅 잘봤습니다 공감 누르고⋯
    hellorly
  • 감사합니다 😄
    ShakeJ
  • 포스팅 잘봐서 좋아요 눌렀어요⋯
    D
  • 앗 옛날에 쓴 그 게임 디스크⋯
    ShakeJ

최근 글

  • [📷사진이야기] 붉은 호치민의⋯
    2022.02.10
    [📷사진이야기] 붉은 호치민의⋯
  • 13년간의 블로그, 오랫만의 글⋯
    2022.02.09
    13년간의 블로그, 오랫만의 글⋯
  • DB의 index와 rails가 기억하는⋯
    2020.10.22
  • 건프라 삼국창걸전 SD를 세울⋯
    2020.09.29
    건프라 삼국창걸전 SD를 세울⋯
  • 건프라 아크릴 붓도색 - 영원히⋯
    2020.09.09
    건프라 아크릴 붓도색 - 영원히⋯

티스토리

hELLO · Designed By 정상우.
ShakeJ

MNWorld

[HTML5이야기] Video & Audio 태그 집중 분석
옛글/프론트 이야기

[HTML5이야기] Video & Audio 태그 집중 분석

2011. 1. 3. 17:03

[http://mnworld.co.kr 의 shakej 가 직접 작성한 글입니다]
[본글은 http://www.htmlfive.co.kr/ 의 코리님의 강좌를 듣고 공부해서 다시 쓴 내용입니다]

방금 전 시간에서 가장 획기적인 기능 중 하나가 뭐라고 했었죠!?

네 바로 Video와 Audio를 별도의 플러그인 없이 재생할 수 있는 태그, 바로 이것이 html5 의 최고장점으로 손꼽히고 있는 기술입니다.

일단 기본적으로 브라우저에서 비디오/오디오를 재생하려면(물론 HTML5가 지원이 되는 브라우져에서) 딱 한줄만 추가해주시면되요

<video src="http://비디오주소"> </video>
<audio src="http://오디오주소"> </audio>

물론 각 브라우저마다 지원되는 비디오 포맷형식 (.avi, .mkv, .wmv)와 같은 이 다릅니다.
바로 http://html5test.com/<~ 이곳에서 확인이 가능한데요


위와 같이 지원이 되네요.

기능에서 조금 더 속성에 대해 알아보자면

<video width="320" height="250"
           controls src="비디오주소"
           poster="iamge/xx.jpg" loop="loop" autoplay="autoplay">

음 width , height 는 재생될 동영상의 가로 길이
controls 를 넣으면 브라우져 고유의 컨트롤 바가 표시되게 됩니다.
loop 은 반복될 수이고, 숫자를 넣게 되면 반복될 횟수, 혹은 안에 loop이나 아무것도 넣지 않으면 무한재생이 되게 됩니다.
autoplay 는 브라우져가 켜지자 마자 재생이 될테고,
poster는 재생이 준비 될때까지 보여줄 이미지 URL 이 되겠습니다.

* video 태그를 지원하지 않는 브라우저의 경우

  경고를 표시하고 싶을 때,


 <video src="http://동영상주소">

  경고 : 이 브라우저는 video 재생을 지원하지 않습니다.

 </video> 


 이런 식으로 넣어주시면 video 태그를 못 읽는 경우 경고문구만 나오게 됩니다.

 ( 구버전 IE를 대비해서 사용하시면 됩니다. ) 




* 자바스크립트를 이용한 video 요소 제어


 <video id="cory" src="http://동영상주소"></video>

 

 이렇게 설정하고 스크립트 부분에서


 var cory = document.getElementById("cory");

 이렇게 설정합니다.

  

   동영상 재생을 원하는 경우   cory.play();

   동영상 일시정지 원하는 경우  cory.pause();


   동영상 주소 변경 후 다시 로딩 하는 것을 원하는 경우

   cory.src = 새로운 주소;

   cory.load();


* networkState 를 이용하여 다운로드 로딩화면과 로딩완료 표시하기


 <video id="cory" src="http://동영상주소"></video>

 var cory = document.getElementById("cory");


 // video 태그에 이벤트 리스너를 등록 

 cory.addEventListener("progress", function(e) {

     var networkStateDisplay = document.getElementById("networkState");

      

     if(cory.networkState == 2) { //.networkState == 2 :: 로딩 중

        networkStateDisplay.innerHTML = 

           "다운로드 중... ["+e.loaded+"/"+e.total+"byte]"; 

     } else if (cory.networkState == 3) {   //.networkState == 3 :: 로딩완료

        networkStateDisplay.innerHTML = "다운로드 완료";

     }

 }, false);


  --== 실행 시 ==--

  1) 로딩 중일 때,

     --> "다운로드 중... [ 현재 다운로드받은 크기 / 총 사이즈 byte ]"

  2) 로딩 완료 시,

     --> "다운로드 완료"




그럼 어쨌거나 한번 만들어보죠 다들 노트패드를 여시고!

실제로 제일 위에 있는 기본소스로 만들어서 html 파일로 저장하시고,
익스플로워 IE8 버전은 아무 ~ 것도 뜨질 않네요.

두번째로 사파리.

로딩되는 그림까지는 성공적으로 떴으니 .avi 확장자를 읽진 못하네요.. 하!

여러분도 실제로 한번 해보시길 바랍니다^^
+ 참고로 audio는 video 와 다르게 audio라고 적어주시면 됩니다.




저작자표시비영리
  • 카카오스토리
  • 트위터
  • 페이스북

'옛글 > 프론트 이야기' 카테고리의 다른 글

[쉬운제로보드]간단한 자기홈페이지 만들기  (0) 2011.01.19
[HTML5이야기] 시맨틱 엘리먼트!?  (0) 2011.01.04
[HTML5이야기] Video & Audio 태그 집중 분석  (4) 2011.01.03
[HTML5이야기] HTML5 지원여부 감지  (0) 2011.01.03
[쉬운HTML] 두번째 시간 - 티스토리 블로그 HTML/CSS를 파헤쳐보자  (3) 2011.01.03
[쉬운HTML] 첫번째 시간 - HTML 맛보기  (2) 2011.01.03
    추천글👇
    • [📷사진이야기] 붉은 호치민의 노을
    HTML5 HTML4 차이점, HTML5 강의, HTML5 강좌, html5 개념, HTML5 추가태그, HTML5 특징
    ShakeJ
    ShakeJ
    댓글쓰기
    1. Favicon of http://gagworld.tistory.com BlogIcon gagworld
      2011.01.04 00:12
      역시 이런건 보기만 해보는것 보다는 직접 해보는게 좋죠~
      그런데 벌써12시가 넘었네요..자고 일어나서 따라해 볼께요^^
      수정/삭제댓글쓰기댓글보기
      1. Favicon of https://mnworld.co.kr BlogIcon ShakeJ
        2011.01.04 00:30 신고
        감사드려요^-^헤헷ㅋㅋ개그월드님도 좋은하루되시길!!
        수정/삭제
    2. Favicon of http://hslifestory.tistory.com BlogIcon HS다비드
      2011.01.04 11:53
      아아... 점점 더 어려워지는 이 느낌... 끄응.. 이네요^^
      수정/삭제댓글쓰기댓글보기
      1. Favicon of https://mnworld.co.kr BlogIcon ShakeJ
        2011.01.04 17:27 신고
        끄응 ㅜㅜ 최대한 쉽게하려구했는데+_+ 같이해요 다비드님ㅋㅋㅋㅋ
        수정/삭제
    다음 글
    [HTML5이야기] 시맨틱 엘리먼트!?
    이전 글
    [HTML5이야기] HTML5 지원여부 감지
    • 이전
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • ···
    • 24
    • 다음

    티스토리툴바