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&origin=http%3A%2F%2Fdevcf9.acm.org&controls=1&rel=0&showinfo=0&iv_load_policy=3&autoplay=0&theme=dark&wmode=opaque&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?
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