สิ่งแรกที่ต้องมีคือ ตัว Video Player บนเว็บ ลอง Google ด้วยคำว่า “javascript video player” ดู มีหลายตัวให้เลือกใช้ แต่ในที่นี้ ขอทดลองกับ video.js (เว็บไซต์ https://videojs.com )
<head>
<link href="https://vjs.zencdn.net/7.6.5/video-js.css" rel="stylesheet">
<!-- If you'd like to support IE8 (for Video.js versions prior to v7) -->
<script src="https://vjs.zencdn.net/ie8/1.1.2/videojs-ie8.min.js"></script>
</head>
<body>
<video id='my-video' class='video-js' controls preload='auto' width='640' height='264'
poster='MY_VIDEO_POSTER.jpg' data-setup='{}'>
<source src='MY_VIDEO.mp4' type='video/mp4'> <!-- แก้ตรงนี้ -->
<source src='MY_VIDEO.webm' type='video/webm'>
<p class='vjs-no-js'>
To view this video please enable JavaScript, and consider upgrading to a web browser that
<a href='https://videojs.com/html5-video-support/' target='_blank'>supports HTML5 video</a>
</p>
</video>
<script src='https://vjs.zencdn.net/7.6.5/video.js'></script>
</body>
จาก 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 จะเป็นดังนี้
การใช้งาน Google API นั้น มีส่วนทั้งที่ต้องจ่ายเงิน และส่วนที่ใช้ฟรี แต่ถูกจำกัด Quota ในกรณี Google Drive API สามารถใช้ได้ฟรี แต่จะมี Quota อยู่ โดยดูได้จาก https://developers.google.com/drive/api/v3/about-sdk
ซึ่ง จะเป็น Case Sensitive ซึ่งต้องพิมพ์ตัวพิมพ์ใหญ่/เล็ก ให้ถูกต้อง และบางทีอาจจะสับสนระหว่าง l (L – lower case) กับ เลข 1 หรือ I (I capital letter) ได้
บทความนี้ว่ากันด้วยเรื่องของ Extension บน Chrome กันอีกซักตัวนะคะ คราวนี้นำเสนอ Extension ที่จะช่วยในการ capture หน้าเว็บ ซึ่ง Easy to use มาก ๆ และ Free forever กันไปเลยค่า นั่นก็ คือ FireShot Version Lite นั่นเองงงงง เย่ ๆ เอ้า ปรบบบมือรัว ๆ สิคะ รออัลลลลไล
แต่เดี๋ยวก่อนค่ะ (หยุดรัวแทบไม่ทัน) สำหรับ Version Lite ที่เราจะติดตั้งใช้งานกันวันนี้นั้น อาจไม่ได้มี feature ต่าง ๆ ที่จะดำเนินการกับภาพที่เรา capture มาได้มากมาย เช่น Custom watermarks Advanced Editor: Undo/Redo, Resize, Crop and Save features หรือ Microsoft OneNote support และบลา ๆ นะคะ ซึ่งหากเราต้องการใช้ feature ที่มีอีกมากมายเหล่านี้ได้นั้น ก็ต้อง Pay ให้กับ FireShot Version Pro กันค่ะ ตอนนี้มีโปรโมชั่น 1 แถม 1 (เอ้ย ไม่ใช่ Watsons Boots หรือ TOPS น่ะจ๊ะ) โปรโมชั่นลดราคาเหลือ US$ 39.95 อยู่ค่ะ
ช้าก่อน !! อย่าเพ่งรีบสอย เพราะผู้เขียนคิดว่า Version Lite ก็เพียงพอกับการใช้งานทั่ว ๆ ไปแล้วละค่ะ อย่าง User ท่านไหนใช้งานเว็บไซต์แล้วเกิดเจอ error ครั้นจะโทรมาแจ้ง Support แล้วแจ้งรายละเอียด error ที่ยาว (มาก) นั้นว่าอย่างไร ก็คงลำบากไม่น้อย หรือเมื่อโทรมาแจ้ง Support ว่าใช้งานแล้ว error ส่วนใหญ่ Support ก็จะแนะนำให้ส่งภาพหน้าจอที่ว่า error นั้นมาเพื่อจะได้ตรวจสอบให้
ปล. ส่วนใครที่อยากทราบข้อมูลของ Version Pro กับ Lite ว่ามี Features อะไร แตกต่างกันบ้าง มากน้อยแค่ไหนนั้น ก็ลองเข้าไปดูข้อมูลเปรียบเทียบที่ลิงก์นี้ได้เลยค่ะ https://getfireshot.com/features.php
ส่วนการดำเนินการกับภาพ เป็นส่วนที่ให้เราดำเนินการต่อกับภาพเว็บไซต์ที่ capture มา โดยสามารถเลือกได้ว่าจะดำเนินการอย่างไร สำหรับ FireShot Version Lite สามารถดำเนินต่อกับภาพอย่างไรได้บ้างนั้น ก็ตามที่ผู้เขียนได้อธิบายไปแล้วตอนต้นนั่นแหละค่ะ (Save as Image, Save to PDF, Email, Copy to Clipboard และ Print)
