当前位置: 首页 > 知识库问答 >
问题:

YouTube API以5 x 3网格列出播放列表图标,而不是单列列表

宋宇
2023-03-14

下面是我的代码...Javascript和JQuery位于头部,但CSS是一个外部文档。

有一个带有cookie的额外代码段存储了一个名称...忽略它...

它的YouTube API拉我最近的上传。所有的工作都很好,除了我最后有一个15的视频播放列表在一个单一的列,我还没能弄清楚如何让它排序成任何一种网格排列(5x3或什么)。播放列表中加载的视频数量可以调整为5x3,4x3,无论x什么都可以工作。

看到此页面直播在此:98.255.116.178

有什么想法或指导将这些视频纳入网格排列吗?

<!DOCTYPE HTML>
<html>
    <head>
        <title>My Sandbox</title>
        <link rel="stylesheet" type="text/css" href="CSS/Style.CSS">
        <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.10.2.min.js">
        </script>   
        <script>
            jQuery(function($){
              $("#video-container").on('click', '.video_select', function(e){
                console.log(e);
                var buttonSource = $(this).data('video');
                var embededVideo = $('#youTube_video');
                    embededVideo.attr('src', buttonSource);
                    return false;
              });
            });


            function getCookie(c_name)
                {
                var c_value = document.cookie;
                var c_start = c_value.indexOf(" " + c_name + "=");
                    if (c_start == -1){
                        c_start = c_value.indexOf(c_name + "=");
                    }
                    if (c_start == -1){
                        c_value = null;
                    }
                    else{
                        c_start = c_value.indexOf("=", c_start) + 1;
                var c_end = c_value.indexOf(";", c_start);
                    if (c_end == -1){
                        c_end = c_value.length;
                    }
                        c_value = unescape(c_value.substring(c_start,c_end));
                    }
                    return c_value;
                    }

            function setCookie(c_name,value,exdays){
                var exdate=new Date();
                    exdate.setDate(exdate.getDate() + exdays);
                var c_value=escape(value) + ((exdays==null) ? "" : "; expires="+exdate.toUTCString());
                    document.cookie=c_name + "=" + c_value;
                    }

            function checkCookie(){
                var username=getCookie("username");
                    if (username!=null && username!=""){
                        alert("Welcome back " + username);
                        document.getElementById("title_script").innerHTML="Welcome "+username+" to my sandbox";
                        }
                    else{
                        username=prompt("Please enter your name:","");
                        if (username!=null && username!=""){
                        setCookie("username",username,365);
                        document.getElementById("title_script").innerHTML="Welcome "+username+" to my sandbox";
                        }
                    }
            }





                </script>



                  <script>
        //This is the Authorization by Client ID http://d.pr/i/mEmY
        // The client id is obtained from the Google APIs Console at https://code.google.com/apis/console
        // If you run access this code from a server other than http://localhost, you need to register
        // your own client id.
        var OAUTH2_CLIENT_ID = '367567738093.apps.googleusercontent.com';
        var OAUTH2_SCOPES = [
          'https://www.googleapis.com/auth/youtube'
        ];

        // This callback is invoked by the Google APIs JS client automatically when it is loaded.
        googleApiClientReady = function() {
          gapi.auth.init(function() {
            window.setTimeout(checkAuth, 1);
          });
        }

        // Attempt the immediate OAuth 2 client flow as soon as the page is loaded.
        // If the currently logged in Google Account has previously authorized OAUTH2_CLIENT_ID, then
        // it will succeed with no user intervention. Otherwise, it will fail and the user interface
        // to prompt for authorization needs to be displayed.
        function checkAuth() {
          gapi.auth.authorize({
            client_id: OAUTH2_CLIENT_ID,
            scope: OAUTH2_SCOPES,
            immediate: true
          }, handleAuthResult);
        }

        // Handles the result of a gapi.auth.authorize() call.
        function handleAuthResult(authResult) {
          if (authResult) {
            // Auth was successful; hide the things related to prompting for auth and show the things
            // that should be visible after auth succeeds.
            $('.pre-auth').hide();
            loadAPIClientInterfaces();
          } else {
            // Make the #login-link clickable, and attempt a non-immediate OAuth 2 client flow.
            // The current function will be called when that flow is complete.
            $('#login-link').click(function() {
              gapi.auth.authorize({
                client_id: OAUTH2_CLIENT_ID,
                scope: OAUTH2_SCOPES,
                immediate: false
                }, handleAuthResult);
            });
          }
        }

        // Loads the client interface for the YouTube Analytics and Data APIs.
        // This is required before using the Google APIs JS client; more info is available at
        // http://code.google.com/p/google-api-javascript-client/wiki/GettingStarted#Loading_the_Client
        function loadAPIClientInterfaces() {
          gapi.client.load('youtube', 'v3', function() {
            handleAPILoaded();
          });
        }



      //This is the uploads script
      // Some variables to remember state.
      var playlistId, nextPageToken, prevPageToken;

      // Once the api loads call a function to get the uploads playlist id.
      function handleAPILoaded() {
        requestUserUploadsPlaylistId();
      }

      //Retrieve the uploads playlist id.
      function requestUserUploadsPlaylistId() {
        // https://developers.google.com/youtube/v3/docs/channels/list
        var request = gapi.client.youtube.channels.list({
          // mine: '' indicates that we want to retrieve the channel for the authenticated user.
          // mine: false,
          id: 'UCziks4y-RixDhWljY_es-tA',
          part: 'contentDetails'
        });
        request.execute(function(response) {
          console.log(response);
          playlistId = response.result.items[0].contentDetails.relatedPlaylists.uploads;
          requestVideoPlaylist(playlistId);
        });
      }

      // Retrieve a playist of videos.
      function requestVideoPlaylist(playlistId, pageToken) {
        $('#video-container').html('');
        var requestOptions = {
          playlistId: playlistId,
          part: 'snippet',
          maxResults: 15
        };
        if (pageToken) {
          requestOptions.pageToken = pageToken;
        }
        var request = gapi.client.youtube.playlistItems.list(requestOptions);
        request.execute(function(response) {
          // Only show the page buttons if there's a next or previous page.
          console.log (response);
          nextPageToken = response.result.nextPageToken;
          var nextVis = nextPageToken ? 'visible' : 'hidden';
          $('#next-button').css('visibility', nextVis);
          prevPageToken = response.result.prevPageToken
          var prevVis = prevPageToken ? 'visible' : 'hidden';
          $('#prev-button').css('visibility', prevVis);

          var playlistItems = response.result.items;
          if (playlistItems) {
            // For each result lets show a thumbnail.
            jQuery.each(playlistItems, function(index, item) {
              createDisplayThumbnail(item.snippet);
            });
          } else {
            $('#video-container').html('Sorry you have no uploaded videos');
          }
        });
      }


      // Create a thumbnail for a video snippet.
      function createDisplayThumbnail(videoSnippet) {
        console.log(videoSnippet);
        var titleEl = $('<h3>');
        titleEl.addClass('video-title');
        $(titleEl).html(videoSnippet.title);
        var thumbnailUrl = videoSnippet.thumbnails.medium.url;
        var videoLink=$('<a>');
        videoLink.attr('data-video','http://www.youtube.com/embed/'+videoSnippet.resourceId.videoId+'?autoplay=1');
        videoLink.append(div)
        videoLink.addClass('video_select')

        var div = $('<div>');
        div.addClass('video-content');
        div.css('backgroundImage', 'url("' + thumbnailUrl + '")');
        div.append(titleEl);
        videoLink.append(div)
        $('#video-container').append(videoLink);

      }

      // Retrieve the next page of videos.
      function nextPage() {
        requestVideoPlaylist(playlistId, nextPageToken);
      }

      // Retrieve the previous page of videos.
      function previousPage() {
        requestVideoPlaylist(playlistId, prevPageToken);
      }
    </script>
















































    </head>
<body onload="checkCookie()" class="background_color">
<div class="wrap">
  <h1 id="title_script">Welcome to my Sandbox</h1>
</div>
<div class="wrap">
    <iframe id='youTube_video' width="853" height="480" src="//www.youtube.com/embed/io78hmjAWHw?autoplay=1" frameborder="0" allowfullscreen></iframe>
</div>

<div id="login-container" class="pre-auth">Please click <a href="#" id="login-link">authorize</a> to continue.
</div>
<div id="video-container">
</div>
<div class="button-container">
  <button id="prev-button" class="paging-button" onclick="previousPage();">Previous Page</button>
  <button id="next-button" class="paging-button" onclick="nextPage();">Next Page</button>
</div>
<script src="https://apis.google.com/js/client.js?onload=googleApiClientReady"></script>














</body>
</html>

当然还有CSS:

.wrap{
    width: 1000px;
    margin: auto;
    text-align: center;
    }
.background_color{
    background-color: #AABF94;
    }   
h1{
    }





.paging-button {
visibility: hidden;
}

.video-content {
width: 200px;
height: 200px;
background-position: center;
background-repeat: no-repeat;
float: left;
position: relative;
margin: 5px;
}

.video-title {
width: 100%;
text-align: center;
background-color: rgba(0, 0, 0, .5);
color: white;
top: 50%;
left: 50%;
position: absolute;
-moz-transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}

.video-content:nth-child(3n+1) {
clear: both;
}

.button-container {
clear: both;
}

共有2个答案

邵文乐
2023-03-14

这不是修复相关的,但我对HTML进行了一些清理:

<div class="wrap">
  <h1 id="title_script">Welcome to my Sandbox</h1>
  <div class="wrap">
     <iframe id='youTube_video' width="853" height="480" src="//www.youtube.com/embed/io78hmjAWHw?autoplay=1" frameborder="0" allowfullscreen></iframe>
  </div>
  <div id="login-container" class="pre-auth">Please click <a href="#" id="login-link">authorize</a> to continue.
  </div>
  <div id="video-container">
  </div>
  <div class="button-container">
  <button id="prev-button" class="paging-button" onclick="previousPage();">Previous Page</button>
  <button id="next-button" class="paging-button" onclick="nextPage();">Next Page</button>
  </div>
</div>
<script src="https://apis.google.com/js/client.js?onload=googleApiClientReady"></script>

并且在CSS中,将换行宽度从1000更改为1060,并添加了以下两行:

#video-container a {
    float: left;
}
#video-container{
    width: 100%;
}

像魅力一样工作:屏幕快照

梁丘洲
2023-03-14

这似乎对我管用。

您的代码更改为:

(如果不是您的,不要忘记更改代码行:var OAUTH2_CLIENT_ID='your-id';)

<!DOCTYPE HTML>
<html>
    <head>
        <title>My Sandbox</title>
        <link rel="stylesheet" type="text/css" href="CSS/Style.CSS">
        <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.10.2.min.js">
        </script>   
        <script>
            jQuery(function($){
              $("#video-container").on('click', '.video_select', function(e){
                console.log(e);
                var buttonSource = $(this).data('video');
                var embededVideo = $('#youTube_video');
                    embededVideo.attr('src', buttonSource);
                    return false;
              });
            });


            function getCookie(c_name)
                {
                var c_value = document.cookie;
                var c_start = c_value.indexOf(" " + c_name + "=");
                    if (c_start == -1){
                        c_start = c_value.indexOf(c_name + "=");
                    }
                    if (c_start == -1){
                        c_value = null;
                    }
                    else{
                        c_start = c_value.indexOf("=", c_start) + 1;
                var c_end = c_value.indexOf(";", c_start);
                    if (c_end == -1){
                        c_end = c_value.length;
                    }
                        c_value = unescape(c_value.substring(c_start,c_end));
                    }
                    return c_value;
                    }

            function setCookie(c_name,value,exdays){
                var exdate=new Date();
                    exdate.setDate(exdate.getDate() + exdays);
                var c_value=escape(value) + ((exdays==null) ? "" : "; expires="+exdate.toUTCString());
                    document.cookie=c_name + "=" + c_value;
                    }

            function checkCookie(){
                var username=getCookie("username");
                    if (username!=null && username!=""){
                        alert("Welcome back " + username);
                        document.getElementById("title_script").innerHTML="Welcome "+username+" to my sandbox";
                        }
                    else{
                        username=prompt("Please enter your name:","");
                        if (username!=null && username!=""){
                        setCookie("username",username,365);
                        document.getElementById("title_script").innerHTML="Welcome "+username+" to my sandbox";
                        }
                    }
            }

                </script>



                  <script>
        //This is the Authorization by Client ID http://d.pr/i/mEmY
        // The client id is obtained from the Google APIs Console at https://code.google.com/apis/console
        // If you run access this code from a server other than http://localhost, you need to register
        // your own client id.
        var OAUTH2_CLIENT_ID = '367567738093.apps.googleusercontent.com';
        var OAUTH2_SCOPES = [
          'https://www.googleapis.com/auth/youtube'
        ];

        // This callback is invoked by the Google APIs JS client automatically when it is loaded.
        googleApiClientReady = function() {
          gapi.auth.init(function() {
            window.setTimeout(checkAuth, 1);
          });
        }

        // Attempt the immediate OAuth 2 client flow as soon as the page is loaded.
        // If the currently logged in Google Account has previously authorized OAUTH2_CLIENT_ID, then
        // it will succeed with no user intervention. Otherwise, it will fail and the user interface
        // to prompt for authorization needs to be displayed.
        function checkAuth() {
          gapi.auth.authorize({
            client_id: OAUTH2_CLIENT_ID,
            scope: OAUTH2_SCOPES,
            immediate: true
          }, handleAuthResult);
        }

        // Handles the result of a gapi.auth.authorize() call.
        function handleAuthResult(authResult) {
          if (authResult) {
            // Auth was successful; hide the things related to prompting for auth and show the things
            // that should be visible after auth succeeds.
            $('.pre-auth').hide();
            loadAPIClientInterfaces();
          } else {
            // Make the #login-link clickable, and attempt a non-immediate OAuth 2 client flow.
            // The current function will be called when that flow is complete.
            $('#login-link').click(function() {
              gapi.auth.authorize({
                client_id: OAUTH2_CLIENT_ID,
                scope: OAUTH2_SCOPES,
                immediate: false
                }, handleAuthResult);
            });
          }
        }

        // Loads the client interface for the YouTube Analytics and Data APIs.
        // This is required before using the Google APIs JS client; more info is available at
        // http://code.google.com/p/google-api-javascript-client/wiki/GettingStarted#Loading_the_Client
        function loadAPIClientInterfaces() {
          gapi.client.load('youtube', 'v3', function() {
            handleAPILoaded();
          });
        }



      //This is the uploads script
      // Some variables to remember state.
      var playlistId, nextPageToken, prevPageToken;

      // Once the api loads call a function to get the uploads playlist id.
      function handleAPILoaded() {
        requestUserUploadsPlaylistId();
      }

      //Retrieve the uploads playlist id.
      function requestUserUploadsPlaylistId() {
        // https://developers.google.com/youtube/v3/docs/channels/list
        var request = gapi.client.youtube.channels.list({
          // mine: '' indicates that we want to retrieve the channel for the authenticated user.
          // mine: false,
          id: 'UCziks4y-RixDhWljY_es-tA',
          part: 'contentDetails'
        });
        request.execute(function(response) {
          console.log(response);
          playlistId = response.result.items[0].contentDetails.relatedPlaylists.uploads;
          requestVideoPlaylist(playlistId);
        });
      }

      // Retrieve a playist of videos.
      function requestVideoPlaylist(playlistId, pageToken) {
        $('#video-container').html('');
        var requestOptions = {
          playlistId: playlistId,
          part: 'snippet',
          maxResults: 15
        };
        if (pageToken) {
          requestOptions.pageToken = pageToken;
        }
        var request = gapi.client.youtube.playlistItems.list(requestOptions);
        request.execute(function(response) {
          // Only show the page buttons if there's a next or previous page.
          console.log (response);
          nextPageToken = response.result.nextPageToken;
          var nextVis = nextPageToken ? 'visible' : 'hidden';
          $('#next-button').css('visibility', nextVis);
          prevPageToken = response.result.prevPageToken
          var prevVis = prevPageToken ? 'visible' : 'hidden';
          $('#prev-button').css('visibility', prevVis);

          var playlistItems = response.result.items;
          if (playlistItems) {
            // For each result lets show a thumbnail.
            jQuery.each(playlistItems, function(index, item) {
              createDisplayThumbnail(item.snippet);
            });
          } else {
            $('#video-container').html('Sorry you have no uploaded videos');
          }
        });
      }


      // Create a thumbnail for a video snippet.
      function createDisplayThumbnail(videoSnippet) {
        console.log(videoSnippet);
        var titleEl = $('<h3>');
        titleEl.addClass('video-title');
        $(titleEl).html(videoSnippet.title);
        var thumbnailUrl = videoSnippet.thumbnails.medium.url;
        var videoLink=$('<a>');
        videoLink.attr('data-video','http://www.youtube.com/embed/'+videoSnippet.resourceId.videoId+'?autoplay=1');
        videoLink.append(div)
        videoLink.addClass('video_select')

        var div = $('<div>');
        div.addClass('video-content');
        div.css('backgroundImage', 'url("' + thumbnailUrl + '")');
        div.append(titleEl);
        videoLink.append(div)
        $('#video-container').append(videoLink);

      }

      // Retrieve the next page of videos.
      function nextPage() {
        requestVideoPlaylist(playlistId, nextPageToken);
      }

      // Retrieve the previous page of videos.
      function previousPage() {
        requestVideoPlaylist(playlistId, prevPageToken);
      }
    </script>


    </head>
<body onload="checkCookie()" class="background_color">
<div class="wrap">
  <h1 id="title_script">Welcome to my Sandbox</h1>
</div>
<div class="wrap">
    <iframe id='youTube_video' width="853" height="480" src="//www.youtube.com/embed/io78hmjAWHw?autoplay=1" frameborder="0" allowfullscreen></iframe>
</div>

<div id="login-container" class="pre-auth">Please click <a href="#" id="login-link">authorize</a> to continue.
</div>
<div id="video-container" class="box_wrapper">
</div>
<div class="button-container">
  <button id="prev-button" class="paging-button" onclick="previousPage();">Previous Page</button>
  <button id="next-button" class="paging-button" onclick="nextPage();">Next Page</button>
</div>
<script src="https://apis.google.com/js/client.js?onload=googleApiClientReady"></script>

</body>
</html>

并且您的CSS更改为:

.wrap{
    width: 1000px;
    margin: auto;
    text-align: center;
    }
.background_color{
    background-color: #AABF94;
    }   
h1{
    }

.paging-button {
visibility: hidden;
}

.box_wrapper {
    margin: 0;
    height: 100%;
    width: 1000px;
    overflow: hidden;
}

.video_select {
float: left;
display: table-cell;
}

.video-content {
width: 200px;
height: 200px;
background-position: center;
background-repeat: no-repeat;
float: left;
position: relative;
margin: 5px;
display: table-cell;
}

.video-title {
width: 100%;
text-align: center;
background-color: rgba(0, 0, 0, .5);
color: white;
top: 50%;
left: 50%;
position: absolute;
-moz-transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}

.video-content:nth-child(3n+1) {
clear: both;
}

.button-container {
clear: both;
}
 类似资料:
  • 我是YouTube频道的内容所有者。当我从YouTube网页生成视频报告时,我得到的是304k总视频的结果。但是当我使用YouTube数据API使用此处讨论的方法查询如何使用API v3列出YouTube频道的所有上传视频(URL)时?,我得到的计数较少(~270k)。当我手动查找时,其中一些丢失的视频是从YouTube中删除的视频。 当我查询API时,其他视频丢失的原因可能是什么?是因为它们可能

  • 我试图访问MyModelClass上的getter方法,但我的代码返回

  • 我如何在play store上获得我的应用程序,就像在红框中的所有这些东西上面一样? 但我的应用程序是这样的,所以我该如何管理它。 有谁能帮我弄清楚这玩意的工作原理吗? 谢谢.

  • 进入具体播放器编辑页面,点击播放列表标签,设置播放列表样式。 设置播放列表的样式:选择视频封面缩略图、文本框和文字列表; 设置播放列表的位置:上、下、左、右,文字列表形式只有左右两种位置。

  • 创建播放列表,可以按照设定的顺序自动连续播放多个视频。 创建播放列表 进入播放列表页面,点击添加列表按钮,在弹出的添加播放列表页面,按照提示进行填写,点击保存按钮保存即可。 播放列表管理页面: 添加播放列表页面: 为播放列表添加视频 1) 进入播放列表页面,选择要添加视频的播放列表,点击管理,进入播放列表管理页面; 2) 点击添加视频按钮,在弹出的窗口中,通过搜索视频标题或视频ID进行添加操作;

  • 我有一个像这样的xsd- 当我使用XJC生成类绑定时,我看到教师是List类型的 如何生成字符串列表而不是对象?任何帮助都很感激。 更新:使用“vamsilp”提供的解决方案——在删除“教师”元素上的“minOccurs”后,它工作得很好!XSD是由泽西从以下代码自动生成的: 我不知道如何删除“minOccurs”属性。我是否需要修改代码以忽略它?