마스터욱 0 47 0 0

<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
<source src="movie.webm" type="video/webm">
<object data="movie.mp4" width="320" height="240">
<embed src="movie.swf" width="320" height="240">
</object>
</video> 

 

음 그러니까 설명을 하자면...

브라우저마다 지원하는 동영상 코덱이 모두 다 다르다~

그럼으로 위와같이 mp4, ogg, webm 동영상을 모두 서버에 업로드 해 둔 다음에, 모두 source 태그에 포함시켜 버리는 것이다.

비디오 태그가 자바스크립트 callback(콜백) 을 지원해 주기 때문에, 매우 저버리기 아까운 태그이다.

 

결론부터 말하자면,

사파리 -> mp4 재생

그밖에 -> webm 재생

으로 하면 다 해결된다.

webm은 사파리 이외의 모든 브라우저에서 재생이 됨을 확인했고, 사파리는 mp4만 재생이 됨을 확인했다.

Comments


제목 글쓴이
capture="camera" 마스터욱
highcharts series data push example 마스터욱
DIV 높이 100%로 주기 마스터욱
뺑글이(로딩) 이미지와 CSS 마스터욱
백그라운드만 까맣게 처리하기, 폰트는 그대로 마스터욱
스마트 에디터 모바일에 최적화 시키기 마스터욱
Jquery Mobile 샘플 마스터욱
미디어 쿼리 기준픽셀 마스터욱
크로스 브라우징 HTML5 Audio 동영상 태그 마스터욱
jquery anchor(앵카) 구현하기 마스터욱
jquery data-mask 마스터욱
자바스크립트 - ksort(키값에 의한 정렬) 마스터욱
javascript - 브라우저 뒤로가기 버튼 눌렀을 경우, 질문하기 마스터욱
부트스트랩 네비게이션 서브메뉴 마우스 오버시에 하위메뉴 펼치기 마스터욱
부트스트랩 fieldset 마스터욱
부트스트랩 모달(modal) 가로(width) 사이즈 자동 관리자
동적 height 세로 중앙정렬 관리자
CSS 로 바코드 만들기   관리자
★미디어 쿼리(media query) - 프린트 일때만 작동되게 하기★ 댓글 2 관리자
★CSS 핵★ 관리자
카테고리