AdvanceDeveloperFeaturedGoogle DevelopersHTML5JavaScriptNewbieProgramming LanguageSocial MediaSocial Media MarketingTechnologyWeb Service TechnologyYouTube Developer

เทคนิคเบาๆ ของผู้เริ่มต้นดึงข้อมูล Video ผ่าน YouTube API ด้วย Javascript

คราวนี้จะพาไปดูวิธีการดึงข้อมูล Web Service เพื่อเอาข้อมูลของ Video บน YouTube ผ่าน YouTube API เวอร์ชัน 2.1 ด้วย Javascript แบบง่ายๆ

แน่นอนว่า API ที่ทางปล่อยให้เราเอาไปใช้ฟรีๆ ในรูปแบบ JSON Web Service และ XML นั้น เราสามารถดึงมาใช้ได้สบายๆ อยู่แล้ว เช่นผมมี URL ของ Video ที่ต้องการจะไป แอบเก็บข้อมูลมาทำ Script พวก Auto Content ไว้ปั๊มเว็บไซต์ วีดีโอคลิป นั้นมาเก็บลง Database ไม่ได้ยากเลย

ก่อนอื่น เลือก คลิปที่ต้องการ ผมขอเลือกคลิปนี้

http://www.youtube.com/watch?v=cO3rsfE7GM0

Video ที่เราเลือก
Video ที่เราเลือก

ทีนี้รูปแบบการ ดึง API ผ่าน URL ไม่ยากมามีแค่ 2 รูปแบบเท่านั้น ให้จำแค่ Parameter ของ ?v= ซึ่งตัวอย่างคือ cO3rsfE7GM0 ทำการคัดลอกมาใช้ครับ

  1. http://gdata.youtube.com/feeds/api/videos/cO3rsfE7GM0?v=2&prettyprint=true
  2. http://gdata.youtube.com/feeds/api/videos/cO3rsfE7GM0?v=2&prettyprint=true&alt=json
  3. http://gdata.youtube.com/feeds/api/videos/cO3rsfE7GM0?v=2&prettyprint=true&alt=jsonc

จะมีทั้ง XML, JSON และ JSONC ตัวอย่างนี้ผมใช้ JSONC ครับ รูปแบบจะปรากฏออกมาง่ายๆ แบบนี้

URL: http://gdata.youtube.com/feeds/api/videos/cO3rsfE7GM0?v=2&prettyprint=true&alt=jsonc
URL: http://gdata.youtube.com/feeds/api/videos/cO3rsfE7GM0?v=2&prettyprint=true&alt=jsonc

ต่อมาลองสร้าง Website ตัวอย่างมาง่ายๆ ครับ แล้วเรียก Javascript ตามนี้



จะเห็นว่า การดึง Title ก็ใช้แค่

document.write('

Title:' + json.data.title + '

');

ส่วน ไฟล์ Thumbnail เราสามารถเลือกใช้ได้ 2 แบบคือ

document.write('');

และ

document.write('');

เลือกขนาดไฟล์ได้หมดครับ

ลองทดสอบ ผ่านหน้าเว็บไซต์ตัวอย่างดู จะได้แบบนี้

ลองทดสอบ ผ่านหน้าเว็บไซต์ตัวอย่างดู จะได้แบบนี้
ลองทดสอบ ผ่านหน้าเว็บไซต์ตัวอย่างดู จะได้แบบนี้

ลองเอาไป ทำเล่นกันดูนะครับ ส่วนใครที่อยากจะลองใช้ jQuery นั้นก็ อาจจะใช้ ตามนี้

$.getJSON("http://gdata.youtube.com/feeds/api/videos/cO3rsfE7GM0?v=2&alt=jsonc&callback=?", function(json){
    $("").attr("src", json.data.thumbnail.sqDefault).appendTo("body");
});

เป็นไงครับ ง่ายสุดๆ ไปเลย ทำเองก็ได้ครับ

Asst. Prof. Banyapon Poolsawas

อาจารย์ประจำสาขาวิชาการออกแบบเชิงโต้ตอบ และการพัฒนาเกม วิทยาลัยครีเอทีฟดีไซน์ & เอ็นเตอร์เทนเมนต์เทคโนโลยี มหาวิทยาลัยธุรกิจบัณฑิตย์ ผู้ก่อตั้ง บริษัท Daydev Co., Ltd, (เดย์เดฟ จำกัด)

Related Articles

Back to top button

Adblock Detected

เราตรวจพบว่าคุณใช้ Adblock บนบราวเซอร์ของคุณ,กรุณาปิดระบบ Adblock ก่อนเข้าอ่าน Content ของเรานะครับ, ถือว่าช่วยเหลือกัน