SublimeVideo Youtube и плейлист

Я использую SublimeVideo. Я хочу использовать плейлист (плейлист). Видео в этом плейлисте будут с 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>

This code show nothing. There is no videoplayer. Videoplayer works perfectly separately for Youtube and playlist, but not together.


jquery youtube playlist video-player
person davez    schedule 25.12.2014    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Предположим, что у вас уже есть собственный код загрузчика для вашего сайта, и вы включили этот код на страницы своего сайта, где будет использоваться проигрыватель 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) точно такие же, как и в примере плейлиста.

Надеюсь, это полезно!

person Academia    schedule 26.12.2014
comment
Спасибо! Работает отлично. - person davez; 26.12.2014
comment
@user2445201: С удовольствием :) - person Academia; 26.12.2014
comment
Есть ли способ получить управление плеером с помощью Javascript? Когда я делаю sublime.player('video1').on('metadata', function(player) { console.log('Got Metadata' + player.duration()); });, я получаю неопределенность. Наверное, потому что видео находится в Youtube ‹iframe›. - person davez; 27.12.2014