| 일 | 월 | 화 | 수 | 목 | 금 | 토 |
|---|---|---|---|---|---|---|
| 1 | 2 | 3 | ||||
| 4 | 5 | 6 | 7 | 8 | 9 | 10 |
| 11 | 12 | 13 | 14 | 15 | 16 | 17 |
| 18 | 19 | 20 | 21 | 22 | 23 | 24 |
| 25 | 26 | 27 | 28 | 29 | 30 | 31 |
- GUI
- placehoder
- 포인터
- C언어 메모리
- C언어 변수
- Vim
- java
- SQL
- URL 다운로드
- C언어 매크로
- C언어 함수
- 날짜
- gcc
- 자바
- C언어
- Oracle
- HTML5
- 구글 reCaptcha
- Naver SmartEditor
- C언어 배열
- C언어 파일입출력
- C언어 구조체
- jsp
- Spring email
- 역순
- Google reCaptcha
- 오라클
- 텍스트 파일 읽기
- Spring google
- TCP/IP 소켓
- Today
- Total
easy software
HTML5 IE8이하에서 video태그 사용이 불가능할 때 video.js 플러그인 사용방법 본문
안녕하세요. 정말 오랜만에 글을 작성합니다.
HTML5로 웹 페이지를 구축하면서 동영상을 띄우고 싶을 때 video태그를 입력합니다.
그러나 웹 브라우저마다 표시되는 video 태그의 형태가 일관되지 않으므로
웹 페이지를 디자인 할 떄 문제가 될 수 있습니다.
또한 IE8이하에서는 video태그가 동작하지 않습니다.
이럴경우에 문제를 간단히 해결할 수 있는데요, video.js 플러그인을 사용하는 것 입니다.
홈페이지는 http://videojs.com 이며, 사용 방법은 아래와 같습니다.
<!DOCTYPE html>
<html>
<head>
<title>Html Test</title>
<link href="//vjs.zencdn.net/4.9/video-js.css" rel="stylesheet">
<script src="//vjs.zencdn.net/4.9/video.js"></script>
</head>
<body>
<video controls="controls" width="640" height="360"
class="video-js vjs-default-skin" data-setup="{}">
<source src="Test.mp4" type="video/mp4" />
<source src="Test.webm" type="video/webm" />
</video>
</body>
</html>
위의 코드에서 보이듯이, head 태그에 link 태그와 script 태그를 입력합니다.
이어서 video 태그를 생성하고 class 속성과 data-setup 속성을 입력하면 됩니다.
위와 같이 할 경우, IE8에서는 자동으로 플래시에 동영상이 담겨서 재생됩니다.