
เค้าเอาไฟล์ MP4 บน Google Drive ไปแสดงใน Video Player บนเว็บได้อย่างไร
สมมุติว่า เรามีไฟล์วิดีโอเป็น .mp4 อยู่ไฟล์หนึ่ง อยู่ใน Google Drive ต้องการเผยแพร่ เฉพาะบน Website ของเราเท่านั้น จะต้องทำอย่างไร? Javascript video player สิ่งแรกที่ต้องมีคือ ตัว Video Player บนเว็บ ลอง Google ด้วยคำว่า “javascript video player” ดู มีหลายตัวให้เลือกใช้ แต่ในที่นี้ ขอทดลองกับ video.js (เว็บไซต์ https://videojs.com ) คลิกที่ USE NOW ( https://videojs.com/getting-started/ ) จากนั้น ลองสร้างไฟล์ test.html โดยเอา Code จาก Video.js CDN ไปแปะเลย จาก Code นี้ JavaScript จาะเรียกไฟล์ .MP4 จากไฟล์ชื่อ MY_VIDEO.mp4 ซึ่ง ถ้าเอา test.html นี้ไปวางบน Web Server ก็หมายความว่า เราต้องมีไฟล์ MY_VIDEO.mp4 ด้วย ไฟล์ MP4 บน Google Drive ตัวอย่างเช่น เราอาจอัดคลิปวิดีโอการสอน อยากจะเผยแพร่บนเว็บไซต์ของหน่วยงาน ผ่าน JavaScript Video Player อย่าง video.js ข้างต้น ก็สามารถทำได้ดังนี้ แชร์ไฟล์ดังกล่าว ให้เป็น Anyone with the link can View แล้ว copy link นั้นมา หน้าตาประมาณนี้ https://drive.google.com/open?id=FILE_ID จะเห็นคำว่า id= FILE_ID ตรงนี้ให้ Copy เก็บไว้ แต่การที่เราจะเอา Link นี้ไปใช้ใน Video Player ตรง ๆ ไม่ได้ เพราะมันเป็นการเรียกใช้ Google Drive ไม่ใช่การเรียก File Content GoogleAPI วิธีการที่จะ Get Content ของไฟล์ที่ต้องการออกมากจาก Google Drive สามารถเรียกผ่าน Google API ซึ่ง หากจะทำเองก็สามารถทำได้ มีพวก node.js ให้ใช้งานอยู่ แต่พบว่า สามารถเรียกใช้ www.googleapis.com ได้ โดยอ้างอิงจาก https://googleapis.github.io/ ในที่นี้ จะเรียกผ่าน Google Drive API ใน Version 3 รูปแบบ URL จะเป็นดังนี้ ในการใช้งาน ต้องการ 2 ส่วน FILE_ID ได้จากการแชร์ไฟล์ข้างต้น API_KEY ได้มาจากการสร้าง Credential บน Google Cloud Platform วิธีการทำตามนี้ https://cloud.google.com/docs/authentication/api-keys การใช้งาน Google API นั้น มีส่วนทั้งที่ต้องจ่ายเงิน และส่วนที่ใช้ฟรี แต่ถูกจำกัด Quota ในกรณี Google Drive API สามารถใช้ได้ฟรี แต่จะมี Quota อยู่ โดยดูได้จาก https://developers.google.com/drive/api/v3/about-sdk ประกอบร่าง เมื่อได้ FILE_ID และ API_KEY มาแล้ว ก็เอาไปใส่ใน Code ข้างต้น หวังว่าจะเป็นประโยชน์ครับ Disclaimer: จุดประสงค์ของบทความนี้ เพื่อแนะนำวิธีการทำเท่านั้น โปรดนำความรู้นี้ไปใช้งานอย่างสร้างสรรค์นะครับ ผู้เขียนบทความไม่เกี่ยวข้องใด ๆ กับผู้นำไปใช้ทั้งสิ้น