웹표준,웹접근성(html, html5, css, css3, javascript, jQuery, jQueryMobile, snecha, senchaTouch, php, mobileWebApp)
HTML5 Video Player 본문
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8"/>
<title>HTML5 Video Player</title>
<!-- VideoJS 라이브러리 CSS 호출 -->
<link href="css/video-js.css" rel="stylesheet" media="screen" title="Video JS"/>
<link href="css/yamoo9.video-js.css" rel="stylesheet" media="screen"/>
<!-- VideoJS 라이브러리 사용을 위해 JS 호출 -->
<script src="js/video.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
// 문서(DOM)가 완성되면 VideoJS 실행.
// VideoJS.setupAllWhenReady();
VideoJS.setupAllWhenReady(function() {
// 컨트롤 하려하는 요소의 id 또는 tag 명을 넣어주세요.
var options = {
controlsBelow: false, // Display control bar below video instead of in front of
controlsHiding: true, // Hide controls when mouse is not over the video
defaultVolume: 0.85, // Will be overridden by user's last volume if available
flashVersion: 9, // Required flash version for fallback
linksHiding: true // Hide download links when video is supported
},
myPlayer = VideoJS.setup('yamoo9video', options);
// 하나 이상의 많은 파일의 경우는 배열에 담아 셋업합니다.
// var myManyPlayers = VideoJS.setup(['yamoo9video_1', 'yamoo9video_2']);
// 모든 비디오를 제억하고 싶을 경우는 'All' 키워드를 사용합니다.
// var myManyPlayers = VideoJS.setup('All');
myPlayer.play(); // 플레이를 시작합니다.
});
</script>
</head>
<body>
<div class="video-js-box centerbox">
<video id="yamoo9video" class="video-js" width="640" height="264" poster="../poster/oceans-clip.png" controls preload>
<source src="../media/oceans-clip.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
<source src="../media/oceans-clip.webm" type='video/webm; codecs="vp8, vorbis"' />
<source src="../media/oceans-clip.ogv" type='video/ogg; codecs="theora, vorbis"' />
<object class="vjs-flash-fallback" width="640" height="264" type="application/x-shockwave-flash"
data="../fallback/flowplayer-3.2.1.swf">
<param name="movie" value="../fallback/flowplayer-3.2.1.swf"/>
<param name="allowfullscreen" value="true"/>
<param name="flashvars" value='config={"playlist":["../poster/oceans-clip.png", {"url": "../media/oceans-clip.mp4","autoPlay":false,"autoBuffering":true}]}'/>
<img src="../poster/oceans-clip.png" width="640" height="264" alt="Poster Image"
title="비디오 호환이 되지 않아 포스터 이미지로 대체."/>
</object>
</video>
<p class="vjs-no-video">
<strong>Download Video:</strong>
<a href="../media/oceans-clip.mp4">MP4</a>,
<a href="../media/oceans-clip.webm">WebM</a>,
<a href="../media/oceans-clip.ogv">Ogg</a><br>
</p>
</div>
</body>
</html>
'html5' 카테고리의 다른 글
| audio (0) | 2011.11.10 |
|---|---|
| HTML5 - section root (0) | 2011.11.10 |
| HTML5 Section (0) | 2011.11.10 |
| html5. outline.hgroup (0) | 2011.11.10 |
| HTML5 - hgroup (0) | 2011.11.10 |