1. 首頁
  2. 問答
  3. SublimeVideo Youtube和播放列表

SublimeVideo Youtube和播放列表

2014-12-25 152 views
0

我使用SublimeVideo。我想使用播放列表（playlist）。此播放列表中的視頻將來自YouTube（youtube）。
我使用YouTube的代碼和播放列表從文檔一起如下：
SublimeVideo Youtube和播放列表

<div id="playlist1" class="sv_playlist"> 
<div class="video_wrap"> 
    <video id="video1" class="sublime" data-youtube-id="10uh__bY1GA" poster="posterframe1.jpg" width="640" height="360" preload="none" data-autoresize="fit"> 
    </video> 
</div> 

<ul class="thumbs"> 
    <li id="thumbnail_video1"> 
     <a href=""> 
      <img alt="Thumbnail 1" src="thumbnail1.jpg" /> 
      <span class="play" /> 
     </a> 
    </li> 
</ul>

此代碼顯示什麼。沒有錄像機。對於Youtube和播放列表，Videoplayer完全獨立工作，但不能在一起。

來源

2014-12-25 davez

回答

0

假設您已經爲自己的網站加載了自己的加載程序代碼，並且您確實將此代碼包含在您的網站上將使用SublimeVideo玩家的頁面中。該腳本強烈建議插入<head>標籤，就像下面：

<head> 
    ... 
    <script type="text/javascript" src="//cdn.sublimevideo.net/js/ipr592yl.js"></script> 
    ... 
</head>

ipr592yl是我的道理，這是工作的地方發展（127.0.0.1）和我自己的部署地點。你應該有自己的，如果沒有，請讓我知道，我會引導你完成必要的步驟。

要插入youtube視頻，您只需在對應的data-uid和data-youtube-id之間加入<video>標籤。它們都代表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中使用的相同。

希望它有用！

來源

2014-12-26 13:25:41 Academia

+0

謝謝！完美的工作。 – davez

+0

@ user2445201：我的榮幸:) – Academia

+0

有什麼方法可以讓使用Javascript的玩家得到控制嗎？ （'元數據'，函數（player）{'got Metadata'+ player.duration（））; }）;' 我得到undefined 。可能是因爲該視頻在Youtube