html - 从播放列表中的视频中提取 YouTube 缩略图并显示在网页上-6ren

html - 从播放列表中的视频中提取 YouTube 缩略图并显示在网页上

转载作者：行者123 更新时间：2023-11-28 05:40:12

我的网页播放一个 YouTube 播放列表并在底部显示轨道名称(一天中的大部分时间都花在了上面)，我认为接下来在底部显示播放列表中播放的特定视频的缩略图会很棒到轨道标题。我了解如何针对特定视频执行此操作，但我将如何针对视频播放列表执行此操作？为播放的每首新歌曲刷新图像很重要。

这是我当前工作的一个 jsfiddle:https://jsfiddle.net/ruumL5s7/

此外，我在垂直对齐顶部和底部栏之间的视频和聊天 div 时遇到问题。当屏幕调整大小时(不同的 div 都分开)，我也遇到了底部栏不保持“完整”栏的问题，我已经尝试了几个想法来防止这种情况，但无济于事。因此，非常感谢任何帮助!

谢谢!

HTML:

<!DOCTYPE html>
            <html>
              <head>
                <title>Chat</title>
                <link rel="stylesheet" href="main.css">
              </head>

            <div class="all-content">

              <body>

                <div class="header-bar">
                  <div class="bar">

                      <img src="C:\Users\jlewa\Desktop\assets\affinity_fm_only_letters.png" class="top-logo" style="float: left;">

                      <ul class="standard-nav" style="float: left;">

                      <li>Home</li>
                      <li>Lyrics Hub</li>
                      <li>Affinity LIVE</li>
                      <li>Merchandise</li>

                      </ul>

                  </div>
                  <div class="dropshadow"></div>
                </div>

                <div class="container-middle-third">
                  <div class="youtube-video" style="float: left;">
                    <div class="DJ-text">Affinity FM DJ Room</div>
                    <div class="DJ-underline"></div>
                    <div id="player" style="width: 1280px; height: 720px;"></div></div>
                  </div>

                  <div class="chat" style="float: left;">
                    <div class="Chat-text">Chat</div>
                    <div class="Chat-underline"></div>
                    <input type="text" class="chat-name" placeholder="Chat">
                    <div class="info-rect">Info</div>
                    <div class="chat-messages"></div>
                    <textarea placeholder="Join the conversation..."></textarea>
                    <div class="chat-status">Status: <span>Idle</span></div>
                  </div>

                <div class="bottom-bar">

                  <div class="thumbnail" id="thumbnail" style="float: left"></div>

                  <div class="title-bar" style="float: left;">

                    <div class="title" id="title"></div>
                    <div class="dj-playing">Affinity FM is playing</div>

                    <div class="progress-background">
                      <div id="progress-bar" class="progress-bar"></div>
                    </div>

                  </div>
                  <div class="subscribe" style="float: left;">

                    <div class="g-ytsubscribe" data-channel="SAMusicPlaylist" data-layout="full" data-theme="dark" data-count="default"></div> 

                  </div>

                </div>

                <script src="http://127.0.0.1:8080/socket.io/socket.io.js"></script>

                <script src="https://apis.google.com/js/platform.js"></script>

                <script>
                  (function() {
                    var getNode = function(s) {
                      return document.querySelector(s);
                    },

                        // Get required nodes
                        status = getNode('.chat-status span'),
                        messages = getNode('.chat-messages'), 
                        textarea = getNode('.chat textarea'),
                        chatName = getNode('.chat-name'),

                        statusDefault = status.textContent,    

                        setStatus = function(s){
                          status.textContent = s;

                          if(s !== statusDefault){
                            var delay = setTimeout(function(){
                              setStatus(statusDefault);
                              clearInterval(delay);
                            }, 3000);
                          }
                        };

                    //try connection
                    try{
                      var socket = io.connect('http://127.0.0.1:8080');
                    } catch(e){
                      //Set status to warn user
                    }

                    if(socket !== undefined){

                      //Listen for output
                      socket.on('output', function(data){
                        if(data.length){
                          //Loop through results
                          for(var x = 0; x < data.length; x = x + 1){
                            var message = document.createElement('div');
                            message.setAttribute('class', 'chat-message');
                            message.textContent = ': ' + data[x].message;
                            var name=document.createElement('span');
                            name.setAttribute('class', 'userName');
                            name.textContent = data[x].name;

                            message.insertBefore(name, message.firstChild);

                            //Append
                            messages.appendChild(message);
                            messages.insertBefore(message, messages.firstChild);
                          }
                        }
                      });

                      //Listen for a status
                      socket.on('status', function(data){
                        setStatus((typeof data === 'object') ? data.message : data);

                        if(data.clear === true){
                          textarea.value = '';
                        }
                      });

                      //Listen for keydown
                      textarea.addEventListener('keydown', function(event){
                        var self = this,
                            name = chatName.value;

                        if(event.which === 13 && event.shiftKey === false){
                          socket.emit('input', {
                            name: name,
                            message: self.value
                          });
                        }
                      });
                    }

                  })();
                </script>
                <script>
                  var time_total;
                  var timeout_setter;
                  var player;
                  var tag = document.createElement("script");//This code loads the IFrame Player API code asynchronously

                  tag.src = "https://www.youtube.com/iframe_api";
                  var firstScriptTag = document.getElementsByTagName("script")[0];
                  firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

                  //This function creates an <iframe> (and YouTube player) OR uses the iframe if it exists at the "player" element after the API code downloads
                  function onYouTubeIframeAPIReady()
                  {
                    player = new YT.Player("player",
                                           {
                      height: "853",
                      width: "480",
                      /* videoId: "GGmxVDXM5X2UxaP9PvWQ4Z171DXyGcq", */
                      playerVars: {
                        listType:'playlist',
                        list: 'PL_GGmxVDXM5X2UxaP9PvWQ4Z171DXyGcq',
                        controls: '0',
                        html5: '1',
                        cc_load_policy: '0',
                        disablekb: '1',
                        iv_load_policy: '3',
                        modestbranding: '1',
                        showinfo: '0',
                        rel: '0',


                      },
                      events:
                      {
                        "onReady": onPlayerReady,
                        "onStateChange": onPlayerStateChange
                      }

                    });
                  }


                var num = (1 + Math.floor(Math.random() * 10));


                  //The API will call this function when the video player is ready
                  function onPlayerReady(event)
                  {
                    event.target.playVideo();
                    time_total  = convert_to_mins_and_secs(player.getDuration(), 1);
                    loopy();


                    player.addEventListener('onStateChange', 'onPlayerStateChange');


                    player.setShuffle( {
                    'shufflePlaylist': 1
                    } );    
                  }

                  function loopy()
                  {
                    var current_time = convert_to_mins_and_secs(player.getCurrentTime(), 0);
                    document.getElementById("progress-bar").style.width = (player.getCurrentTime()/player.getDuration())*100+"%";
                    console.log( current_time + " / " + time_total);
                    timeout_setter = setTimeout(loopy, 300);
                  }

                  function convert_to_mins_and_secs(seconds, minus1)
                  {
                    var mins    = (seconds>=60) ?Math.round(seconds/60):0;
                    var secs    = (seconds%60!=0) ?Math.round(seconds%60):0;
                    var secs    = (minus1==true) ?(secs-1):secs; //Youtube always displays 1 sec less than its duration time!!! Then we have to set minus1 flag to true for converting player.getDuration()
                    var time    = mins + ":" + ((secs<10)?"0"+secs:secs);
                    return time;
                  }

                  // 5. The API calls this function when the player's state changes
                  function onPlayerStateChange(event)
                  {
                    if (event.data == YT.PlayerState.ENDED)
                    {
                      console.log("END!");
                      clearTimeout(timeout_setter);
                      document.getElementById("progress-bar").style.cssText = "transition: none;";


                    }
                    else if (event.data == YT.PlayerState.PLAYING)
                    {
                      console.log("PLAYING");
                      loopy();
                      document.getElementById("progress-bar").style.cssText = "transition: all 300ms linear 0s;";
                      console.log(player.getPlayerState());
                      if (player.getPlayerState() == 1) {
                      document.getElementById( "title" ).innerText = player.getVideoData().title;
                        }
                    }
                    else if (event.data == YT.PlayerState.PAUSED)
                    {
                        event.target.playVideo();
                        console.log("PLAUSED");
                    }
                    else
                    {
                      console.log(event.data);
                    }
                  }
                </script>

              </body>
            </div>
           </html>

CSS:

 body {
          background-color: #0f0f17;
          margin: 0px;
          width: 100%;
        }

        .container-middle-third{
          margin-top: 20px;
          margin-left: 70px;
        }

        body,
        textarea,
        input {
          font: 13px "Raleway", sans-serif;
          color: #ffffff;

        }

        .all-content{
            width: 1920px;
            display: block;
            margin-left: auto;
            margin-right: auto;
        }

        .bar{
          height: 90px;
          width: 1920px;
          background-color: #15151d;   
        }

        .top-logo{
            max-height: 100%;
            max-width: 100%;
            margin-left: 4%
        }

        /*li{
            display: inline;
            padding-right: 20px;
        }

        .standard-nav {
            list-style: none;
            padding: 0;
            text-transform: uppercase;
            line-height: 13px;
            font-weight: 700;
            margin-left: 63%;
            max-height: 100%;
        } */

        .DJ-text{
          font-weight: 700;
          /*position:relative;*/
          text-transform: uppercase;
        }

        .Chat-text{
          font-weight: 700;
          text-transform: uppercase;
        }

        .DJ-underline{
          width: 1280px;
          height: 1px;
          position:relative;top:10px;
          background-color: #3f3f45;
          margin: 0px 0px 40px;
        }

        .Chat-underline{
          width: 100%;
          position:relative;
          /*left:-140px;*/
          float:right;
          height: 1px;
          position:relative;top:10px;
          background-color: #3f3f45;
          margin: 0px 0px 40px;
        }

        .youtube-video{
        position: relative;
        }
        .transparent-layer{
          width: 850px;
          height: 477px;
          pointer-events: none;
          background-color: #ffffff;
        }

        .ad{
          width: 728px;
          height: 90px;
          border: 1px solid #000000;
          margin-left: 11px;
          margin-top: 20px;
        }

        .chat {
          position: relative;
          min-width: 400px;
          margin: 0px 0px 0px 112px;
        }
        .chat-messages,
        .chat-textarea,
        .chat-name {
          border: 1px solid #1a1a23;
          background-color: #1a1a23;
        }

        .userName{
          font-weight: 700;
          color: #079ce0;
        }

        .chat-messages {
          width:380px;
          height:586px;
          overflow-y:scroll;
          padding:10px;
        }

        .chat-message {
          margin-bottom:10px;
        }

        .info-rect{
          height: 40px;
          width: 180px;
          padding:10px;
          max-width: 100%;
          margin:0;
          border:0;
          display: flex; 
          align-items: center;
          justify-content: center;  
          font-weight: 700;
          text-transform: uppercase;
          background-color: #15151d
        }

        .chat-name{
          height: 40px;
          max-width: 100%;
          width: 180px;
          padding:10px;
          border:0;
          margin:0;
          font-weight: 700;
          text-transform: uppercase;
          float:left;
          text-align: center;
        }

        .chat textarea {
          width:380px;
          padding:10px;
          margin:0;
          border-top:0;
          max-width:100%;
          border-top: 1px solid #0f0f17;
          border-bottom: 1px solid #1a1a23;
          border-right: 1px solid #1a1a23;
          border-left: 1px solid #1a1a23;
          background-color: #1a1a23;

        }

        .chat-status {
          color: #bbb;
          opacity: 0;
          background-color: #0f0f17;
        }

        .info-rect,
        .chat textarea,
        .chat-name { 
          max-width: 100%; 
        }


        .bottom-bar{
          position: absolute;
          bottom: 0;  
            display:table;

        }

        .thumbnail{
          width: 90px;
          height: 80px;
          opacity: 0.2;
          background-color: #ffffff;
        }   

        .title-bar{
          width:1372px;
          height: 80px;
          background-color: #1a1a23;
        }
        .title{
          font-weight: 700;
          text-transform: uppercase;
          margin-left: 30px;
          margin-top: 25px;
        }
        .dj-playing{
          margin-left: 30px;
        }
        .progress-background{
          width: 1372px;
          height: 3px;
          background-color: #313139;
          position: fixed;
          bottom: 0;
        }
        .progress-bar{
          height: 3px;
          width: 0px;
          transition: all 300ms linear;
          background-color: #fa1d57;
          bottom: 0;
        }
        .subscribe{
          width: 458px;
          height: 80px;
          background-color: #15151d;
            display:table-cell;
        }
        .g-ytsubscribe{
            width: 450px;
            display: block;
            margin-left: auto;
            margin-right: auto;
        }

最佳答案

这次您必须将 key 与 Youtube API 3 一起使用。

您可以使用 js 或 Php 来做到这一点。

PHP

<?
    $api_key        = "AIzaSyDRfgPj9a2vnckVkSGoKktNfrozbMvjkdw";
    $play_list_id   = "PLcV3JzAz3r32-on4upkyAv0VtvYXAl-Nz";
    $url            = "https://www.googleapis.com/youtube/v3/playlists?part=snippet&id=" . $play_list_id;

    $ch         = curl_init();

    curl_setopt($ch, CURLOPT_URL, $url);
    curl_setopt($ch, CURLOPT_TIMEOUT, 30);
    curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
    curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, 0);

    $response_raw = curl_exec($ch);
    $response = json_decode($response_raw);

    echo "default image :" . $response->items[0]->snippet->thumbnails->default->url;
    echo "<br />\n<br />\n";
    echo "medium image :" . $response->items[0]->snippet->thumbnails->medium->url;
    echo "<br />\n<br />\n";
    echo "maxres image :" . $response->items[0]->snippet->thumbnails->maxres->url;
    echo "<br />\n<br />\n";
    echo print_r($response, 1);
?>

脚本中最重要的是带有查询参数的url。请记住将 $api_key 和 $play_list_id 替换为您自己的。

现在有了 javascript，几乎是一回事。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script>
function make_request()
{
    var response        = "";
    var response1       = "";
    var api_key         = "AIzaSyBaS4_vwohJW7Ndb9EkjSqsoD75O4f4jXI";
    var play_list_id    = "PLcV3JzAz3r32-on4upkyAv0VtvYXAl-Nz";
    var url             = "https://www.googleapis.com/youtube/v3/playlists?part=snippet&id=" + play_list_id + "&key=" + api_key;

    $.ajax
    ({
        url: url,
        dataType: "json",
        type: "get",
        async: false,
        success: function(data)
        {
            response = JSON.stringify(data);
            response1 = data;
        }
    });
    alert(response1.items[0].snippet.thumbnails.default.url);
    console.log(response1.items[0].snippet.thumbnails.default.url);
    console.log(response);
}

function init()
{
    gapi.client.setApiKey("AIzaSyBaS4_vwohJW7Ndb9EkjSqsoD75O4f4jXI");
    gapi.client.load('youtube', 'v3').then(make_request);
}
</script>
<script src="https://apis.google.com/js/client.js?onload=init"></script>

看看那些在行动的人:

但请记住:当您使用 Php 执行此操作时，您必须创建一个 Google 服务器 key 。当你用 js 做的时候，你猜怎么着？您可以使用浏览器 key 来完成。但最重要的是，请记住在开发人员控制台中启用 Youtube data api 3!

获取KEY的引用: https://developers.google.com/api-client-library/javascript/start/start-js#choose-google-services

关于html - 从播放列表中的视频中提取 YouTube 缩略图并显示在网页上，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37936474/

文章推荐： javascript - 移动子导航不会在一半时间内展开

文章推荐： javascript - 使用 AJAX 传递变量并在其他页面上使用它

java - JFrame 中的 JPanel 中的 JScrollPane 中的 JTextPane
我想做的是让 JTextPane 在 JPanel 中占用尽可能多的空间。对于我使用的 UpdateInfoPanel: public class UpdateInfoPanel extends JP
java - JFrame 中的 JPanel 中的 JTextArea 中的 JScrollPane 出现问题
我在 JPanel 中有一个 JTextArea，我想将其与 JScrollPane 一起使用。我正在使用 GridBagLayout。当我运行它时，框架似乎为 JScrollPane 腾出了空间，但
ios - iOs Xcode 中的 UIViewController 中的 UIView 中的 UITableView
我想在 xcode 中实现以下功能。我有一个 View Controller 。在这个 UIViewController 中，我有一个 UITabBar。它们下面是一个 UIView。将 UITab
sql - 与 SQL 中的 STUFF 等效的函数(MySQL 中的 GROUP_CONCAT/Oracle 中的 LISTAGG)
有谁知道Firebird 2.5有没有类似于SQL中“STUFF”函数的功能？我有一个包含父用户记录的表，另一个表包含与父相关的子用户记录。我希望能够提取用户拥有的“ROLES”的逗号分隔字符串，而
Mirth 中的 Json 解析或 Mirth 中的 Json 或 Mirth 中的 HL7 到 JSON
我想使用 JSON 作为 mirth channel 的输入和输出，例如详细信息保存在数据库中或创建 HL7 消息。简而言之，输入为 JSON 解析它并输出为任何格式。最佳答案 var objec
python - 如果文件 1 中的 A 列 = 文件 2 中的 A 列，则替换为文件 2 中的 B 列
通常我会使用 R 并执行 merge.by，但这个文件似乎太大了，部门中的任何一台计算机都无法处理它! (任何从事遗传学工作的人的附加信息)本质上，插补似乎删除了 snp ID 的 rs 数字，我只剩
Javascript 中的 HAML 中的 Javascript
我有一个以前可能被问过的问题，但我很难找到正确的描述。我希望有人能帮助我。在下面的代码中，我设置了varprice，我想添加javascript变量accu_id以通过rails在我的数据库中查找记
HTML 中的 SVG 中的 HTML
我有一个简单的 SVG 文件，在 Firefox 中可以正常查看 - 它的一些包装文本使用 foreignObject 包含一些 HTML - 文本包装在 div 中:
ruby - Ruby 中的 If block 中的 "Or"
所以我正在为学校编写一个 Ruby 程序，如果某个值是 1 或 3，则将 bool 值更改为 true，如果是 0 或 2，则更改为 false。由于我有 Java 背景，所以我认为这段代码应该有效:
amazon-web-services - 如何从账户 A 中的 Lambda(VPC 中的 Lambda)调用账户 B(VPC 中的此 Lambda)中的 AWS Lambda 函数
我做了什么: 我在这些账户之间创建了 VPC 对等连接互联网网关也连接到每个 VPC 还配置了路由表(以允许来自双方的流量) 情况1: 当这两个 VPC 在同一个账户中时，我成功测试了从另一个 La
php - 如何获取 column1 中的 value1 和 column2 中的 value2 但 column1 中的 value2 在 column2 中没有 value1 的行？
我有一个名为 contacts 的表: user_id contact_id 10294 10295 10294 10293 10293 10294 102
php - Magento 中的 foreach 中的 getChildHtml
我正在使用 Magento 中的新模板。为避免重复代码，我想为每个产品预览使用相同的子模板。特别是我做了这样一个展示: $products = Mage::getModel('catalog/pro
protocols - Elixir 中的 "for"中的 "defimpl"实际上检查了什么？
“for”是否总是检查协议(protocol)中定义的每个函数中第一个参数的类型？编辑(改写): 当协议(protocol)方法只有一个参数时，根据该单个参数的类型(直接或任意)找到实现。当协议(p
javascript - PHP 中的 JavaScript 中的 PHP
我想从我的 PHP 代码中调用 JavaScript 函数。我通过使用以下方法实现了这一点: echo ' drawChart($id); '; 这工作正常，但我想从我的 PHP 代码中获取数据，我使
javascript - html 中的 html 中的 JavaScript
这个问题已经有答案了: Event binding on dynamically created elements? (23 个回答) 已关闭 5 年前。我有一个动态表单，我想在其中附加一些其他 h
javascript - componentDidMount() 中的 .map 中的 setState
我正在尝试找到一种解决方案，以在 componentDidMount 中的映射项上使用 setState。我正在使用 GraphQL连同 Gatsby返回许多 data 项目，但要求在特定的 pat
android - ScrollView 中的 View 中的 OnTouchListener
我在 ScrollView 中有一个 View 。只要用户按住该 View ，我想每 80 毫秒调用一次方法。这是我已经实现的: final Runnable vibrate = new Runnab
android - GetStringUTFChars 中的 dvmDecodeIndirectRef 中的 dvmAbort
我用 jni 开发了一个 android 应用程序。我在 GetStringUTFChars 的 dvmDecodeIndirectRef 中得到了一个 dvmabort。我只中止了一次。为什么会这
android - Activity 中的 FragmentPagerAdapter 中的 RecyclerView
当我到达我的 Activity 时，我调用 FragmentPagerAdapter 来处理我的不同选项卡。在我的一个选项卡中，我想显示一个 RecyclerView，但他从未出现过，有了断点，我看到
android - Activity 中的 DialogFragment 中的 RecyclerView
当我按下 Activity 中的按钮时，会弹出一个 DialogFragment。在对话框 fragment 中，有一个看起来像普通 ListView 的 RecyclerView。我想要的行为是当

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

html - 从播放列表中的视频中提取 YouTube 缩略图并显示在网页上