Html5 +JQuery로 무한반복 영상 플레이어(화면보호기) 제작
크롬브라우저에는 새탭을 열때마다 근사한 배경 영상들을 보여주는 UseDelight라는 꽤 유명한 확장 프로그램이 있다. 영상 수준이 괜찮아서 전체화면으로 해놓으면 화면보호기로도 쓸만하고 가만히 틀어놓고 감상하기에도 괜찮다.
(웹 페이지로도 확인이 가능하다. usedelight.com)
다만, 보여지는 영상의 개수가 제한적이고 내가 원하는 영상을 선택하지 못한다는 점. 그리고 영상의 길이가 짧다는 단점이 있어서, 계속하여 틀어놓고 보기에는 다소 불편한 느낌이 든다.
특히 듀얼보니터로 작업시 한쪽 모니터에 힐링이 되는 멋진 영상을 틀어놓으면 기분전환이 되곤 하는데 UseDelight는
다소 아쉬운 점이 있다. 그래서 비슷한 걸 html과 css로 직접 만들어보았다.
(혹시 단순하게 영상 재생이 필요하다면, 유투브에서 Live Background로 검색하면 좋은 영상들이 꽤 많이 나온다.)
고품질 영상 소스 구하기
우선 재생할 동영상을 구하는게 필요한데, 좋은 영상들을 가지고 있다면 그걸 사용해도 되지만 나는 Pexels.com에서 무료로 제공되는 Stock 영상들을 활용했다. Pexels.com의 영상들의 경우 꽤 고품질인데다, 동영상 검색 및 영상 link를 직접 가져올 수 있는 API를 제공하기 때문에 화면보호기 용도로 사용하기에 적절하다.
API와 관련한 자세한 내용은 Documentation을 참조
영상 무한반복 재생 스크립트
영상을 끊임없이 반복 재생하는 건 html5와 jquery를 사용하여 제작했다. Video 태그 두개를 만들고 각 영상의 재생시간에 맞춰서 재생 중인 Video를 fadeout시키면서, 다음 Video의 url을 변경한 뒤 재생시키면서 fadein하는 방식이다.
그리고 ajax로 api로부터 영상목록을 가져오면 바로 첫번째 영상부터 재생을 시작한다.
자세한 내용은 아래 코드의 주석을 참조하면 될듯하고, 필요하다면 ajax로 api로부터 목록을 가져오지 않고 Local에 저장되어 있는 영상의 리스트를 직접 입력해도 상관없다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha512-MoRNloxbStBcD8z3M/2BmnT+rg4IsMxPkXaGh2zD6LGNNFE80W3onsAhRcMAMrSoyWL9xD7Ert0men7vR8LUZg==" crossorigin="anonymous" />
<style>
body {
padding : 0px, 0px, 0px, 0px;
margin : 0px, 0px, 0px, 0px;
overflow:hidden;
background-color: #000000;
}
video {
width : 100%;
height : 100%;
}
div.class {
width : 100vw;
height : 100vh;
}
#myVideo1 {
position: absolute;
z-index: 1;
}
#myVideo2 {
position: absolute;
z-index: 0;
}
</style>
</head>
<body>
<div class='content'>
<video id="myVideo1" autoplay muted="muted"></video>
<video id="myVideo2" autoplay muted="muted"></video>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js" integrity="sha512-bLT0Qm9VnAYZDflyKcBaQ2gg0hSYNQrJ8RilYldYQ1FxQYoCLtUjuuRuZo+fjqhx/qtq/1itJ0C2ejDxltZVFg==" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha512-M5KW3ztuIICmVIhjSqXe01oV2bpe248gOxqmlcYrEzAvws7Pw3z6BK0iGbrwvdrUQUhi3eXgtxp5I8PDo9YfjQ==" crossorigin="anonymous"></script>
<script>
// 영상목록 순서 셔플 함수
function shuffle(array) {
var currentIndex = array.length, temporaryValue, randomIndex;
while (0 !== currentIndex) {
randomIndex = Math.floor(Math.random() * currentIndex);
currentIndex -= 1;
temporaryValue = array[currentIndex];
array[currentIndex] = array[randomIndex];
array[randomIndex] = temporaryValue;
}
return array;
}
var on_video_name = ["myVideo1", "myVideo2"];
//pexels.com에서 API 발급 후 key 입력 필요
var key = "------------------API 키 입력 -------------------";
var track = 0;
//var pexel_url = "https://api.pexels.com/videos/popular?per_page=80"
var pexel_url = "https://api.pexels.com/videos/search?query=nature&min_width=1920&min_height=1080&min_duration=20&per_page=80";
var videoSource = [];
// API로부터 영상 목록 가져오기
$.ajax({
url: pexel_url,
headers: {"Authorization": key},
success: function(data) {
var videos = data.videos;
for (i=0;i<videos.length;i++) {
if (videos[i].duration > 10 & videos[i].video_files[0].width == 1920 & videos[i].video_files[0].height == 1080) {
videoSource.push([videos[i].video_files[0].link, videos[i].duration]);
}
}
videoSource = shuffle(videoSource); //영상 목록 셔플
setTimeout(videoPlay(0), 1000); //목록을 가져오고 난 후 1초뒤 재생 시작
}
});
// 실제 영상 재생 함수
function videoPlay(videoNum)
{
var num = videoNum % 2;
var on_video = document.getElementById(on_video_name[num]);
on_video.setAttribute("src",videoSource[videoNum][0]);
on_video.load();
on_video.play();
var duration = videoSource[videoNum][1];
// 현재 재생중인 영상 Fadeout
setTimeout(function(){
$("#"+on_video_name[num]).fadeOut(1000);
}, (duration-2)*1000); // 영상 종료 2초전부터 1초동안 Fadeout
// 다음 재생영상 Fadein
setTimeout(function() {
if (videoNum == videoSource.length-1) {
videoPlay(0);
} else {
videoPlay(videoNum+1);
}
$("#"+on_video_name[(num+1)%2]).fadeIn(1000);
}, (duration-3)*1000); // 영상 종료 3초전에 1초동안 Fadein
}
</script>
</body>
</html>
디지털 사이니지로 활용 가능
그리고 위의 소스를 조금만 응용하면 디지털 사이니지로도 활용이 가능하다.
Video 태그 대신 Div 태그를 사용해서 별도의 이미지나 글자 등을 입력해서 정보를 제공할 수도 있고 약간의 디자인 감각만 있으면 상용 디지털 사이니지 못지 않은 품질의 컨텐츠 제공이 가능할 것으로 본다. (실제로 이런 방식으로 디지털 사이니지를 운용한 경험이 있다.)
'코딩 > HTML,CSS,Javascipt' 카테고리의 다른 글
| 언제나 프론트엔드 개발은 귀찮고 힘들다. (0) | 2019.10.06 |
|---|
