웹 브라우저마다 표시되는 video 태그의 형태가 일관되지 않으므로 웹 페이지를 디자인할 때 문제가 될 수 있습니다. 또하 인터넷 익스플로러에서는 video 태그가 잘 동작하지 않습니다. 이러한 문제를 해결할 수 있는 간단한 플러그인이 있습니다. 바로 video.js 플러그인입니다.
● video.js 플러그인 (http://videojs.com/)
플러그인을 다루는 것은 웹 클라이언트 개발에서 어려운 부분에 속하지만 video.js 플러그인은 굉장히 간편합니다
<!DOCTYPE html>
<html>
<head>
<head>
<title>Video.js | HTML5 Video Player</title>
<link href="http://vjs.zencdn.net/5.0.2/video-js.css" rel="stylesheet">
<script src="http://vjs.zencdn.net/ie8/1.1.0/videojs-ie8.min.js"></script>
<script src="http://vjs.zencdn.net/5.0.2/video.js"></script>
</head>
</head>
<body>
<video id="example_video_1" class="video-js vjs-default-skin" controls preload="none" width="640" height="264" poster="http://vjs.zencdn.net/v/oceans.png" data-setup="{}">
<source src="http://vjs.zencdn.net/v/oceans.mp4" type="video/mp4">
<source src="http://vjs.zencdn.net/v/oceans.webm" type="video/webm">
<source src="http://vjs.zencdn.net/v/oceans.ogv" type="video/ogg">
<track kind="captions" src="../shared/example-captions.vtt" srclang="en" label="English"></track>
<!-- Tracks need an ending tag thanks to IE9 -->
<track kind="subtitles" src="../shared/example-captions.vtt" srclang="en" label="English"></track>
<!-- Tracks need an ending tag thanks to IE9 -->
<p class="vjs-no-js">To view this video please enable JavaScript, and consider upgrading to a web browser that <a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a></p>
</video>
</body>
</html>
원문 : video.js 데모
'웹코딩 > HTML5 CSS3' 카테고리의 다른 글
| CSS3 변형 속성 transition-duration (0) | 2016.11.03 |
|---|---|
| HTML5 입력양식 태그 (0) | 2016.11.03 |
| HTML5 비디오 요소 (0) | 2016.10.12 |
| HTM5에 새로 추가된 주요 태그들 (0) | 2016.10.12 |
| HTML5의 시멘틱 태그 (0) | 2016.10.12 |
