Question

我使用SublimeVideo。我想使用播放列表（playlist）。此播放列表中的视频将来自Youtube（youtube）我将文档中的代码用于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>

此代码不显示任何内容。没有视频播放器。 Videoplayer可以完美地分别用于Youtube和播放列表，但不能一起使用。

Answer 1

假设您已经拥有自己的网站加载程序代码，并且您确实将此代码包含在您网站上将使用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中使用的完全相同。

希望它有用！

SublimeVideo Youtube和播放列表

1 个答案: