오픈소스 활용 방법 문의 드리겠습니다.

minsin

프로필 보기 작성한 질문 작성한 답변 전체 작성글 보기 전체 댓글 보기

2021-09-08 (수) 14:58:09 2,009

안녕하세요 선배님들 질문좀 드리겠습니다.

3일내내 붙잡고 해도 어떤게 문제인지 파악이 안되서 문의글 올립니다..

http://vodkabears.github.io/vide/

이 해당소스가 꼭필요 한데

경로도 다 맞춰보고 다해봤는데도 화면이 안나옵니다.

어떻게 해야지만 사용이 가능한걸까요?

그누보드5 영카트5

답변 3개 / 댓글 5개

채택된 답변

+20 포인트

쟁반짜장

프로필 보기 작성한 질문 작성한 답변 전체 작성글 보기 전체 댓글 보기

2021-09-08 (수) 15:44:20

Copy

<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 파일 다운로드 받아서 위 파일과 같은 경로에 올리고 하니 작동 잘 되는 것 같습니다.

답변에 대한 댓글 4개

minsin

프로필 보기 작성한 질문 작성한 답변 전체 작성글 보기 전체 댓글 보기

2021-09-08 (수) 16:37:09

영상파일을 어 어디에 둬야 할까요 ㅠ?

쟁반짜장

프로필 보기 작성한 질문 작성한 답변 전체 작성글 보기 전체 댓글 보기

2021-09-08 (수) 16:47:15

경로를 못 잡으실 것 같으면 해당 html 파일 위치에 넣으시는 게 제일 편하지 않을까요?
저 같은 경우는 /temp 디렉토리 밑에 vide.html 파일이 있으니 저 위치에 mp4, webm, ogv 파일 다 같이 넣었습니다.

minsin

프로필 보기 작성한 질문 작성한 답변 전체 작성글 보기 전체 댓글 보기

2021-09-08 (수) 16:54:16

다 맞게 한거 같은데 왜안되는지 모르겠네요 ㅠ

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vide Test Suite</title>

<script src="/libs/jquery-loader.js"></script>

<link rel="stylesheet" href="/libs/qunit/qunit/qunit.css" media="screen">
<script src="/libs/qunit/qunit/qunit.js"></script>

<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>