오픈소스 활용 방법 문의 드리겠습니다.
본문
안녕하세요 선배님들 질문좀 드리겠습니다.
3일내내 붙잡고 해도 어떤게 문제인지 파악이 안되서 문의글 올립니다..
http://vodkabears.github.io/vide/
이 해당소스가 꼭필요 한데
경로도 다 맞춰보고 다해봤는데도 화면이 안나옵니다.
어떻게 해야지만 사용이 가능한걸까요?
답변 3
<style>
html, body { margin: 0; width: 100%; height: 100%; }
</style>
<body data-vide-bg="mp4:ocean, webm:ocean, ogv:ocean">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vide/0.5.1/jquery.vide.min.js"></script>
</body>
http://exam.dothome.co.kr/temp/vide.html
해당 github에서 mp4, webm, ogv 파일 다운로드 받아서 위 파일과 같은 경로에 올리고 하니 작동 잘 되는 것 같습니다.
영상파일을 어 어디에 둬야 할까요 ㅠ?
경로를 못 잡으실 것 같으면 해당 html 파일 위치에 넣으시는 게 제일 편하지 않을까요?
저 같은 경우는 /temp 디렉토리 밑에 vide.html 파일이 있으니 저 위치에 mp4, webm, ogv 파일 다 같이 넣었습니다.
다 맞게 한거 같은데 왜안되는지 모르겠네요 ㅠ
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vide Test Suite</title>
<!-- Load local jQuery. This can be overridden with a ?jquery=___ param. -->
<script src="/libs/jquery-loader.js"></script>
<!-- Load local QUnit. -->
<link rel="stylesheet" href="/libs/qunit/qunit/qunit.css" media="screen">
<script src="/libs/qunit/qunit/qunit.js"></script>
<!-- Load local lib and tests. -->
<script src="/src/jquery.vide.js"></script>
<script src="/vide_test.js"></script>
<script>window._$ = jQuery.noConflict(true);</script>
</head>
<body>
<div id="qunit"></div>
<div id="block1" data-vide-bg="http://vodkabears.github.io:80/vide/video/ocean" data-vide-options="loop: false, volume:0.3,playbackRate:,position: 60% bottom, className:vide-wrapper"></div>
<div id="block2"></div>
<div id="block3" data-vide-bg="mp4: http://vodkabears.github.io/vide/video/ocean, webm: video/ocean.webm, ogv: http://vodkabears.github.io:80/vide/video/ocean, poster: video/ocean.jpg" data-vide-options="posterType: none"></div>
<div id="block4" data-vide-bg='{"mp4": "http://vodkabears.github.io/vide/video/ocean", "webm": "video/ocean.webm", "ogv": "http://vodkabears.github.io:80/vide/video/ocean.ogv", "poster": "video/ocean.jpg"}' data-vide-options='{"loop": false, "volume":0.3}'></div>
<div id="block5"></div>
<div id="block6" data-vide-bg="http://vodkabears.github.io:80/vide/video/ocean"></div>
</div>
</body>
</html>
http://exam.dothome.co.kr/temp/aaa.html
각각의 div에 width, height를 주면 됩니다.
적용된 사이트는 어딘가요?
https://vnwm6850.cafe24.com/
여기입니다.
https://vnwm6850.cafe24.com/libs/qunit/qunit/qunit.js
https://vnwm6850.cafe24.com/libs/qunit/qunit/qunit.css
파일 경로를 맞춰보세요