사이트에 대한 자신의 로더 코드가 이미 있다고 가정하고이 코드를 SublimeVideo 플레이어가 사용되는 사이트의 페이지에 포함 시켰다고 가정합니다. 이 스크립트는 매우 다음처럼 <head> 태그에 삽입 할 것을 권장한다 :
<head>
...
<script type="text/javascript" src="//cdn.sublimevideo.net/js/ipr592yl.js"></script>
...
</head>
ipr592yl
지역 개발 (127.0.0.1)에 대한 내 자신의 배포 사이트를 위해 노력하고 나의 토큰이다. 당신은 자신의 것을 가지고 있어야합니다. 그렇지 않다면 저에게 알려주십시오. 나는 필요한 단계들을 안내 할 것입니다.
YouTube 동영상을 삽입하려면 <video> 태그와 함께 data-uid 및 data-youtube-id 태그를 포함시켜야합니다. 둘 모두 YouTube video ID을 나타냅니다.
<div class='video_wrap'>
<video id="video1" width="640" height="360"
data-uid="UNg9gQsck1c" data-youtube-id="UNg9gQsck1c" preload="none">
</video>
</div>
DEMO을 살펴보십시오.
HTML : 여기에 코드입니다
<!DOCTYPE html>
<html>
<head>
<title>SublimeVideo: Responsive Playlist</title>
<meta content='text/html;charset=UTF-8' http-equiv='Content-Type' />
<link rel="stylesheet" type="text/css" href="./css/playlist-autoresize.css" media="screen" />
<script type="text/javascript" src='https://code.jquery.com/jquery-2.1.3.min.js'></script>
<script type="text/javascript" src="http://cdn.sublimevideo.net/js/ipr592yl.js"></script>
<script type="text/javascript" src="./js/playlist-autoresize.js"></script>
</head>
<body>
<div id="global" style="width:640px; margin:20px auto; padding:0 20px;">
<h1>SublimeVideo</h1>
<h3 id='feature-description'>Responsive Playlist with youtube videos</h3>
<div id="demo">
<div id="playlist1" class="sv_playlist">
<div class='video_wrap'>
<video id="video1" width="640" height="360" data-uid="UNg9gQsck1c" data-youtube-id="UNg9gQsck1c" preload="none">
</video>
</div>
<div class='video_wrap'>
<video id="video2" class="sublime" width="640" height="360" data-uid="CQeS9Q_oOnY" data-youtube-id="CQeS9Q_oOnY" preload="none">
</video>
</div>
<div class='video_wrap'>
<video id="video3" class="sublime" width="640" height="360" data-uid="DVwHCGAr_OE" data-youtube-id="DVwHCGAr_OE" preload="none">
</video>
</div>
<ul class='thumbs'>
<li id='thumbnail_video1'>
<a href=''>
<img alt='' src='./images/thumbnail1.png' />
<span class='play' />
</a>
</li>
<li id='thumbnail_video2'>
<a href=''>
<img alt='' src='./images/thumbnail2.png' />
<span class='play' />
</a>
</li>
<li id='thumbnail_video3'>
<a href=''>
<img alt='' src='./images/thumbnail3.png' />
<span class='play' />
</a>
</li>
</ul>
</div>
</div>
</body>
</html>
JQuery와 (playlist-autoresize.js)과 CSS (playlist-autoresize.css가) 정확히 playlist sample에 사용 된 동일합니다.
희망이 있습니다. 유용합니다.
감사합니다. 작품 pefectly. – davez
@ user2445201 : 내 기쁨 :) – Academia
Javascript를 사용하여 플레이어를 제어 할 수있는 방법이 있습니까? 'console.log ('메타 데이터를 얻었습니다 + player.duration()); });'나는 정의되지 않습니다. . 아마 비디오가 Youtube