한개의 동영상을 확장자 mp4, webm 두가지로 준비합니다.

mp4는 익스플로러, 크롬, 사파리에서 재생 되는 동영상 확장자 입니다. (mp4 동영상 생성시 코덱을 h.264로 하시면 됩니다.)

webm은 크롬, 파이어폭스, 오페라에서 재생 되는 동영상 확장자 입니다.

모든 브라우져에서 동작하기 위해서, 두가지 확장지의 동영상이 필요합니다.

<div class=”main-banner”>

<div class=”play” id=”mainVideoPlayButton”>

<img class=”playbutton-play” alt=”playbutton” src=”/이미지경로/playbutton-play.png”>

<img class=”playbutton-stop” alt=”stopbutton” src=”/이미지경로/playbutton-stop.png”>

</div>

<video id=”mainVideo” style=”width: 1000px; height: 440px; visibility: visible;” autoplay=”autoplay” muted=”muted”>

<source src=”동영상경로/동영상.mp4″ type=”video/mp4″>

<source src=”동영상경로/동영상.webm” type=”video/webm”>

</video>

</div><!–main-banner–>

** 꼭 최상위 컨텐츠의 DIV의 클래스(class)가 main-banner 아니어도 상관 없습니다.

모든 클래스(class) 명은 변경 하셔도 됩니다. / ID 명은 수정하지 않습니다.

<div class=”play” id=”mainVideoPlayButton”>

<img class=”playbutton-play” alt=”playbutton” src=”/이미지경로/playbutton-play.png”> <!– 플레이 버튼 –>

<img class=”playbutton-stop” alt=”stopbutton” src=”/이미지경로/playbutton-stop.png”> <!– 스탑버튼 –>

</div>

** 위의 태그는 플레이 재생 정지 버튼입니다. 버튼 이미지는 스스로 준비 하셔야 합니다.

<video id=”mainVideo” style=”width: 1000px; height: 440px; visibility: visible;” autoplay=”autoplay” muted=”muted”> <!– width, height 가로,세로 조절 –>

<source src=”동영상경로/동영상.mp4″ type=”video/mp4″>

<source src=”동영상경로/동영상.webm” type=”video/webm”>

</video>

** 위의 태그는 동영상 태그이자, 동영상의 경로를 적어주는 곳 입니다.

mp4, webm 경로는 저런 식으로 적어 줍니다.

width / height(가로/세로) 값을 변경하면 동영상의 크기를 조절 할 수 있습니다.

div.main .main-banner {margin-top: 20px; max-height: 1000px;}

div.main .main-banner .fix-ie8 {display: none; margin: 0 auto; width: 1000px; height: 440px;}

div.main .main-banner .fix-ie8 a {display: block; width: 1000px; height: 440px;}

div.main .main-banner .fix-ie8 a span {display: none;}

div.main .main-banner > div {position: absolute; top: 395px; right: 20px; width: 30px; height: 30px; z-index: 1; cursor: pointer;}

div.main .main-banner > div img.playbutton-stop {display: none;}

div.main .main-banner > div.play img.playbutton-play {display: none;}

div.main .main-banner > div.play img.playbutton-stop {display: block;}

<script>

(function(){

for (i=0; i <= Math.floor(Math.random() * 3); i++)

{

$(“#mainVideo”).find(“source”).eq(0).appendTo(“#mainVideo”)

$(“#mainVideo”).find(“source”).eq(0).appendTo(“#mainVideo”)

}

$(“#mainVideo”).bind(“ended”, function(){

$(“#mainVideo”).find(“source”).eq(0).appendTo(“#mainVideo”)

$(“#mainVideo”).find(“source”).eq(0).appendTo(“#mainVideo”)

$(“#mainVideo”).get(0).load();

});

$(“#mainVideoPlayButton”).bind(“click”, function(){

if ($(“#mainVideo”).prop(“paused”)){

$(“#mainVideo”).get(0).play();

$(“#mainVideoPlayButton”).addClass(“play”);

} else {

$(“#mainVideo”).get(0).pause();

$(“#mainVideoPlayButton”).removeClass(“play”);

}

})

})();

</script>