[Day 29] JS 实作练习 - YouTube API

前言

在练习 Ajax 串接实作时，馒头计画中就推荐就找了几个实作作业，找有开放资源的网站(如：YouTube、Github、气象局)，制作搜寻引擎取得资料。而在串接其他平台的资料，很重要的一点就是要练习看该平台所提供的官方文件，从提供的资料可以知道要怎麽取得所需要的资料、参数要如何放。必须说，一开始真的花满多的时间在看文件，不段尝试串接的参数，反覆查看取得的资料是否合乎需求。

成品

观察功能需求

• 搜寻框，输入搜寻关键字，下方会列出5笔列表
  • 有图片缩图、影片标题、影片描述
• 按下next page 会取得下5笔资料
• 按下prev page，会取得上5笔资料

youtube API(application programming interface)资料查看

YouTube 资料 API 参考手册

取得授权：凭证

项目拆解说明

1.尝试串接Youtube API

• 首先需考量，我们所需要的资料参数有哪些
• 在抓取成功的部分，要设置抓取5笔搜寻到的5笔资料，并将其呈现於页面
  • 除了5笔资料外，还需要跳转上、下页的按钮

function getVideo() {
  let value = $('#search-field').val();
  let youtubeURL = "https://www.googleapis.com/youtube/v3/search";
  $.ajax({
    type: "GET",
    url: youtubeURL,
    data: {//将要放入网址的参数放在这
      part:
        'id,snippet',// 必填，把需要的资讯列出来
      q: value,// 查询文字
      maxResults: 5,// 预设为五笔资料，可以设定1~50
      type: "video",
      key: '放入申请的金钥'// 使用 API 只能取得公开的播放清单

    },
    dataType: "json",
    success: function (data) {
      //console.log(data);
      let nextPageToken = data.nextPageToken;
      let prevPageToken = data.prevPageToken;

      //试着将收到的资料传入，并呈现於画面中
      insertItems(data);

      getBtn(data, prevPageToken, nextPageToken)


    }, error: function (err) {
      console.log('oh no');
    }
  });
}

网址放入参数
[JS] 使用 JavaScript 解析网址与处理网址中的参数（URL Parameters）

2.将资料呈现於页面(insertItems())

• 透过回圈方式将要抓取的资料依序填入
• 观察原本画面结构，并依据去找寻资料中符合的资料
  • videoId、videoTitle、description、channelTitle...

function insertItems(item) {
  let output = '';
  $.each(item.items, function (index, value) {
    let videoId = item.items[index].id.videoId;
    let videoTitle = item.items[index].snippet.title;
    let description = item.items[index].snippet.description;
    let thumbnailURL = item.items[index].snippet.thumbnails.high.url;//高解析度影片缩图
    let channelTitle = item.items[index].snippet.channelTitle;
    let publishedDate = item.items[index].snippet.publishedAt;
    // 按钮

    output += `<li><div class="list-left">
    <img src=" ${thumbnailURL}"></div>
    <div class="list-right">
    <h3>
    <a data-fancybox data-type="iframe" data-src="https://www.youtube.com/embed/${videoId}" "href="javascript:;"> ${videoTitle} </a></h3> <small>By <span class="cTitle"> ${channelTitle}</span> on ${publishedDate}</small>
    <p> ${description} <p></div></li> <div classs="clearfix"></div> 
    `

    $('#results').html(output);
  });
};

3.制作上、下页的按钮键

• 注意该函式要带入的参数有哪些
• 我们要判断为，在第一页时，只有下一页的按钮
  • 判断方式为，(!prevPageToken)没有上一页的token
  • （截图）
• 在判断之中，我们需要将要插入的标签与内容，放入，并append到画面要呈现的位置
• 注意：在插入的button之中，加入data-token="${nextPageToken}" data-query="${value}"，用於後续抓取属性内容。

function getBtn(value, prevPageToken, nextPageToken) {
  console.log(nextPageToken)
  if (!prevPageToken) {
    var btnOutput = $(`<div class="button-container">
    <button id="next-button" class="paging-button" data-token="${nextPageToken}" data-query="${value}" onclick="pressNext();"> Next Page</button></div>`
    )
    $("#buttons").append(btnOutput);
  } else {
    var btnOutput = $(`<div class="button-container"><button id="prev-button" class="paging-button" data-token="${prevPageToken}" data-query="${value}" onclick="pressPrev();"> Prev Page</button>  
    <button id="next-button" class="paging-button"  data-token="${nextPageToken}" data-query="${value}" onclick="pressNext();">Next Page</button></div>`)
    $("#buttons").append(btnOutput);
  }

}

Youtube:Implementation: Pagination

4.下一页点下後，下五笔的资料

• 同样以ajax的方式来抓取
  • 在参数的地方我们要抓取的是，按取下一页的token
• success之中所应用的函示，同样为插入5笔的资料，以及上下页的按钮

//取得下一页的资料
function pressNext() {

  let youtubeURL = "https://www.googleapis.com/youtube/v3/search";
  let token = $('#next-button').data('token');
  let value = $('#search-field').val();
  $.ajax({
    type: "GET",
    url: youtubeURL,
    data: {//将要放入网址的参数放在这
      part:
        'id,snippet',// 必填，把需要的资讯列出来
      q: value,// 查询文字
      pageToken: token,
      maxResults: 5,// 预设为五笔资料，可以设定1~50
      type: "video",

      key: '放入申请的金钥'// 使用 API 只能取得公开的播放清单

    },
    dataType: "json",
    success: function (data) {
      console.log(data);
      let nextPageToken = data.nextPageToken;
      let prevPageToken = data.prevPageToken;

      // 清空内容
      $('#results').html('');
      $('#buttons').html('');
      //试着将收到的资料传入，并呈现於画面中
      insertItems(data);

      getBtn(data, prevPageToken, nextPageToken)


    }, error: function (err) {
      console.log('oh no');
    }
  });

}

5.上一页

• 同样的抓取方式，只有要带入的资料有些差异
• token = $('#prev-button').data('token');

//前一页
function pressPrev() {
  // 清空内容
  $('#results').html('');
  $('#buttons').html('');
  let youtubeURL = new URL(`https://www.googleapis.com/youtube/v3/search?`);
  let token = $('#prev-button').data('token');
  let value = $('#search-field').val();
  $.ajax({
    type: "GET",
    url: youtubeURL,
    data: {//将要放入网址的参数放在这
      part:
        'id,snippet',// 必填，把需要的资讯列出来
      q: value,// 查询文字
      pageToken: token,
      maxResults: 5,// 预设为五笔资料，可以设定1~50
      type: "video",

      key: '放入申请的金钥'// 使用 API 只能取得公开的播放清单

    },
    dataType: "json",
    success: function (data) {
      console.log(data);
      let nextPageToken = data.nextPageToken;
      let prevPageToken = data.prevPageToken;

      // 清空内容
      $('#results').html('');
      $('#buttons').html('');
      //试着将收到的资料传入，并呈现於画面中
      insertItems(data);

      getBtn(data, prevPageToken, nextPageToken)


    }, error: function (err) {
      console.log('oh no');
    }
  });

}

HTML5 自定义属性 data-* 和 jQuery.data 详解
2018.06.20
[技术分享] 什麽是 HTML 5 中的资料属性（data-* attribute）

6.运用fancybox的方式弹出

• 使用fancyBox展示影片

  • fancybox Documention
  • fancybox-CDN

• 使用iframe连结欲嵌入的外部影片连结

  • iframe 是框架的一种，也称为内置框架或内联框架，用来在网页内嵌入另外一个网页
    

• 透过CDN方式连结fancybox套件

<!-- fancyBox -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/fancyapps/[email protected]/dist/jquery.fancybox.min.css" />
  <script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.js"></script>

• 在我们点选该影片名称区，插入影片id

<h3><a data-fancybox data-type="iframe" data-src="https://www.youtube.com/embed/${videoId}" "href="javascript:;"> ${videoTitle} 
</a></h3>

$('[data-fancybox]').fancybox({
  toolbar  : false,
  smallBtn : true,
  iframe : {
    preload : false
  }
})

今天文章的练习来源： [jQuery] - 练习-Youtube Search Engine