요즘 홈페이지 메인에 역동적인 영상을 집어넣는 방식

웹디자인-TOOL

by 김일국 2018. 10. 9. 21:18

홈페이지 메인에 역동적인 영상을 집어넣는 방식이

아주 예전에는 플래시, 좀 예전에는 슬라이드 또는 jquery 무빙액션 이었는데요,

최근에는 mp4나 유투브동영상도 메인에 집어 넣더군요.

그래서, 아래 처럼 구현해 보았습니다.(참조URL1: http://jmi7313.tistory.com/21?category=554942 비디오태그를 이용한 플레이어컨트롤)

(참조URL2: http://1004lucifer.blogspot.com/2015/04/youtube-player-api.html)

살펴보는 김에, html5의 video태그로 mp4동영상 버튼제어와 유투브 API(iframe대신 div태그사용)를 사용한 버튼제어를 살펴 보았습니다.

아래는 소스 입니다. 결과 확인URL: http://time-space.kr/control_video.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
body {margin:0; padding:0; border:0;}
.video-txt {
    margin: 0 auto;
    min-height: 250px;
    padding: 30px 0 90px;
    z-index: 10
}
.video-txt h1,
.video-txt p {
    margin-left: 20px
}
.video-background {
    overflow: hidden;
    position: relative
}
.video-background .video-txt {
    position: relative
}

.video-background-container {
    left: 0;
    overflow: hidden;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 5
}
@media (min-width: 1100px){
.vid_play{position: absolute; top: 85%; left: 50%; -webkit-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); min-width: 100%; min-height: 100%; width: auto; height: auto; overflow: hidden;}
}
@media (max-width: 700px){
.video_tag{object-fit:cover;height:460px}
}
</style>
</head>
<body>

<div class="video-background" style='background-image: url(""); background-size: cover;'>
<div class="video-txt">
    <div>
      <h1 style="color:white;font-size:20px;">html5 video태그사용 mp4일때 IE와 크롬 모두 정상작동.</h1>
    </div>
</div>
<div class="video-background-container vid_play">
<video id="videoplay" class="video_tag" style="width: 100%;" autoplay="" muted="" loop="" data-playtimes="50" data-widget="videolooper"><source src="https://www.ibm.com/analytics/common/images/analytics_homepage_leadspace-bgvideo.mp4" type="video/mp4">
mp4일때, IE와 크롬 모두 정상작동.controls(옵션:컨트롤버튼보이기)
</video>
</div>
<div style="z-index:99;position: relative;text-align:center;">
   
   <input type="button" value="재생/일시정지" onclick="play();">
</div>
<script type="text/javascript">
//객체 생성
var videocontrol = document.getElementById("videoplay");
function play(){
  //미디어 파일 재생 => 재생중일때 버튼을 누르면 메세지 출력
  /*if(videocontrol.paused){
   videocontrol.play();
  }else{
   alert("현재 재생중입니다.");
  }*/
  /* '재생/일시정지' 버튼을 클릭 : paused속성을 사용하여 현재 미디어 재생상태에 따라 play()메서드나 pause()메서드를 호출하여 재생, 일시정지 동작을 하도록 한다.
  */
  if(videocontrol.paused) videocontrol.play();
  else videocontrol.pause();
}
</script>
</div>

<style>
.vimeoWrap{
position: relative;
padding-bottom: 39%; /* 16/9 ratio 56.25%; 36%*/
padding-top: 0px; /* IE6 workaround*/
height: 0;
overflow: hidden;
text-align:center;
margin: 0;
}
.vimeoWrap iframe,
.vimeoWrap object,
.vimeoWrap video,
.vimeoWrap embed {
position: absolute;
top: 0;
left: 0%;/*15%;*/
width: 100%;/*70%;*/
height:100%;
}
/* 태블릿: 1024 이하 */
@media handheld, only screen and (max-width: 1024px) {
.vimeoWrap{
  position: relative;
  padding-bottom: 56.25%; /* 16/9 ratio */
  padding-top: 30px; /* IE6 workaround*/
  height: 0;
  overflow: hidden;
  margin: 0;
   }
.vimeoWrap iframe,
.vimeoWrap object,
.vimeoWrap video,
.vimeoWrap embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
}
</style>
<div class="vimeoWrap">
<div id="gangnamStyleIframe"></div>
<div style="position:absolute;top:50px;left:50px;">
  <h1 style="color:white;font-size:30px;">유투브/비메오 일때 IE와 크롬 모두 정상작동.(신iframe Api사용)</h1>
  <button type="button" onclick="playYoutube();">재생</button>
  <button type="button" onclick="pauseYoutube();">일시정지</button>
  <button type="button" onclick="stopYoutube();">정지</button>
</div>
</div>
<script type="text/javascript">
/**
* Youtube API 로드
*/
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

/**
* onYouTubeIframeAPIReady 함수는 필수로 구현해야 한다.
* 플레이어 API에 대한 JavaScript 다운로드 완료 시 API가 이 함수 호출한다.
* 페이지 로드 시 표시할 플레이어 개체를 만들어야 한다.
*/
var player;
function onYouTubeIframeAPIReady() {
  player = new YT.Player('gangnamStyleIframe', {
   height: '720',            // <iframe> 태그 지정시 필요없음
   width: '1280',             // <iframe> 태그 지정시 필요없음
   videoId: 'YtXqScsMRdQ',   // <iframe> 태그 지정시 필요없음
   playerVars: {             // <iframe> 태그 지정시 필요없음
    controls: '0', //기본값 2
    showinfo: '0',
    wmode: 'opaque',
    rel: '0',
    loop: '1'
   },
   events: {
    'onReady': onPlayerReady,               // 플레이어 로드가 완료되고 API 호출을 받을 준비가 될 때마다 실행
    'onStateChange': onPlayerStateChange    // 플레이어의 상태가 변경될 때마다 실행
   }
  });
}
function onPlayerReady(event) {
  console.log('onPlayerReady 실행');
  // 플레이어 자동실행 (주의: 모바일에서는 자동실행되지 않음)
//            event.target.playVideo();//event.target.mute();
}
var playerState;
function onPlayerStateChange(event) {
  playerState = event.data == YT.PlayerState.ENDED ? '종료됨' :
    event.data == YT.PlayerState.PLAYING ? '재생 중' :
    event.data == YT.PlayerState.PAUSED ? '일시중지 됨' :
    event.data == YT.PlayerState.BUFFERING ? '버퍼링 중' :
    event.data == YT.PlayerState.CUED ? '재생준비 완료됨' :
    event.data == -1 ? '시작되지 않음' : '예외';

console.log('onPlayerStateChange 실행: ' + playerState);

// 재생여부를 통계로 쌓는다.
collectPlayCount(event.data);
}

<div class="vimeoWrap">
<iframe width="1280" height="720" title="YouTube video player" src="https://www.youtube.com/embed/YtXqScsMRdQ?autoplay=0&autohide=1&controls=0&showinfo=0&rel=0&wmode=opaque&loop=1&width=1280&height=720&enablejsapi=1&origin=http%3A%2F%2Fff14.game.naver.com&widgetid=1" frameborder="0" allowfullscreen="1" allow="autoplay; encrypted-media"></iframe>
<div style="position:absolute;top:30px;left:20px;">
<h1 style="color:white;font-size:30px;">유투브/비메오 일때 IE와 크롬 모두 정상작동.(구iframe사용)</h1>
</div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
<script src="mediaelement-and-player.js"></script>
<link rel="stylesheet" href="mediaelementplayer.css" />
<video class="video_tag" width="640" height="360" id="video_tag" preload="none">
    <source type="video/youtube" src="https://www.youtube.com/embed/YtXqScsMRdQ?controls=1&showinfo=0&rel=0&wmode=opaque&loop=1&width=1280&height=720&enablejsapi=1&origin=http%3A%2F%2Fff14.game.naver.com&widgetid=1">
유투브 일때 IE, 크롬 모두 정상작동 됩니다.(주의. 로컬PC테스트에서는 작동않됨)
</video>
<div style="z-index:99;position: relative;text-align:center;">
   
   <input type="button" value="재생/일시정지" onclick="play2();">
</div>
<script type="text/javascript">
//객체 생성
var videocontrol2 = document.getElementById("video_tag");
function play2(){
  if(videocontrol2.paused) videocontrol2.play();
  else videocontrol2.pause();
  alert();//디버그
}
</script>
<script>
jQuery(document).ready(function($) {
$('#video_tag').mediaelementplayer();
});
</script>
</body>
</html>

'웹디자인-TOOL' 카테고리의 다른 글

워드프레스기반 구글 다국어 플러그인(위젯) 제작 (0)	2019.08.25
최신 워드프레스 사이트 연습 (0)	2019.08.22
반응형 웹 클라우드 교육용 사이트 만들어보았습니다. (0)	2017.12.19
카페24 스마트디자인 모드로 쇼핑몰 제작 (0)	2014.12.31
카페24 HTML디자인 모드로 쇼핑몰 디자인 하기 (0)	2014.12.30