1. 首页
  2. 问答
  3. SublimeVideo Youtube和播放列表

SublimeVideo Youtube和播放列表

2014-12-25 54 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