Umieszczanie wtyczki YouTube Playlist z widoczną listą paska bocznego

Wiem, że interfejs API YouTube nie zapewnia funkcji wyświetlania paska bocznego listy odtwarzania podobnego do natywnej playlisty YouTube w tym momencie.Umieszczanie wtyczki YouTube Playlist z widoczną listą paska bocznego

Poszukując znalazłem obiecującą wtyczkę do naśladowania tego zachowania. https://github.com/jakiestfu/Youtube-TV

Niestety, ta wtyczka nie działa już z interfejsem API serwisu YouTube w wersji 3, jednak Giorgio003 utworzył widelec z obsługą interfejsu API w wersji 3. https://github.com/Giorgio003/Youtube-TV

Podążyłem za wszystkimi instrukcjami instalacji, ale nie mogę sprawić, żeby działało.

To jest moja strona:

<!DOCTYPE html> 
<html> 
<head> 
    <link href="src/ytv.css" type="text/css" rel="stylesheet" /> 
    <script src="src/ytv.js" type="text/javascript"></script> 
</head> 
<body> 

<div> 
    Testing YouTube Playlist 
</div> 

<div id="YourPlayerID"></div> 

<script> 
document.addEventListener("DOMContentLoaded", function(event) { 
    var controller = new YTV('YourPlayerID', { 
     channelId: 'UCBSvZIJlXJR7SE_KNvOiiGg' 
    }); 
}); 
</script> 
</body> 
</html>

W ytv.js włączyłem mój klucz API

(function(win, doc) { 
    'use strict'; 
    var apiKey = 'ThisIsARealKeyForMyChannel'; 
    var YTV = YTV || function(id, opts){...

ytv.js scenariusz wydaje się być uruchomiony grzywny. Poprawnie znajduje mój kanał i dwa przykładowe filmy, które przesłałem. Renderowany HTML #YourPlayerID wygląda następująco:

<div id="YourPlayerID" class="ytv-canvas"> 
    <div class="ytv-relative"> 
     <div class="ytv-video"> 
      <iframe id="ytv-video-playerYourPlayerID0" class="ytv-video-playerContainer" frameborder="0" allowfullscreen="1" title="YouTube video player" width="640" height="360" src="https://www.youtube.com/embed/VqWWn-NrebU?enablejsapi=1&amp;origin=http%3A%2F%2Fdevcf9.acm.org&amp;controls=1&amp;rel=0&amp;showinfo=0&amp;iv_load_policy=3&amp;autoplay=0&amp;theme=dark&amp;wmode=opaque&amp;widgetid=1"></iframe> 
     </div> 
     <div class="ytv-list"> 
      <div class="ytv-list-header"> 
       <a href="//youtube.com/channel/UCBSvZIJlXJR7SE_KNvOiiGg" target="_blank"> 
        <img src="https://yt3.ggpht.com/-IGpxPi95eQQ/AAAAAAAAAAI/AAAAAAAAAAA/z-D0JYX_Wog/s88-c-k-no-mo-rj-c0xffffff/photo.jpg"> 
        <span><i class="ytv-arrow down"></i>My Name</span> 
       </a> 
      </div> 
      <div class="ytv-list-inner"> 
       <ul> 
        <li class="ytv-active"> 
         <a href="#" data-ytv="VqWWn-NrebU" class="ytv-clear"> 
          <div class="ytv-thumb"> 
           <div class="ytv-thumb-stroke"></div> 
           <span>00:42</span> 
           <img src="https://i.ytimg.com/vi/VqWWn-NrebU/mqdefault.jpg"> 
          </div> 
          <div class="ytv-content"> 
           <b>Skin 4144</b> 
           <span class="ytv-views">1 Views</span> 
          </div> 
         </a> 
        </li> 
        <li> 
         <a href="#" data-ytv="bAWFo5ur9fc" class="ytv-clear"> 
          <div class="ytv-thumb"> 
           <div class="ytv-thumb-stroke"></div> 
           <span>00:16</span> 
           <img src="https://i.ytimg.com/vi/bAWFo5ur9fc/mqdefault.jpg"> 
          </div> 
          <div class="ytv-content"><b>Nebula 6044</b> 
           <span class="ytv-views">0 Views</span> 
          </div> 
         </a> 
        </li> 
       </ul> 
      </div> 
     </div> 
    </div> 
</div>

Ale na stronie nie pojawi się wideo lub playlist. Czy ktoś może zobaczyć, czego mi brakuje?

Źródło

2016-10-28 mhatch

Należy również zauważyć, że uruchamiam to na serwerze programowania. Czasami zauważyłem, że osadzanie youtube nie działa poprawnie podczas lokalnego uruchamiania strony. – mhatch

Udało mi się rozwiązać problem. Wszystkie elementy utworzone z wtyczki ustawiają wysokość na 100%. Element <div id="YourPlayerID"></div> miał wysokość 0, dlatego wszystkie jego dzieci miały wysokość 0. Po dodaniu elementu o wysokości #YourPlayerID pojawiła się lista odtwarzania.

Źródło

2016-10-31 18:45:07 mhatch

Umieszczanie wtyczki YouTube Playlist z widoczną listą paska bocznego

Odpowiedz

Powiązane problemy