Lazada

[How-to] วิธีนำวีดีโอจาก Instagram มาติดที่เว็บไซต์หรือบล็อก

05-07-56 11-33-06 PM
หลังจากที่ Instagram เปิดตัวฟีเจอร์ใหม่ล่าสุดด้านการถ่ายวีดีโอ ที่เปิดให้สามารถถ่ายวีดีโอได้สูงสุด 15 วินาที แถมยังเลือกฟิลเตอร์ได้เหมือนภาพอีกด้วย โดยทำสถิติภายในเวลาแค่ 24 ชั่วโมง มีจำนวนการอัพโหลดวีดีโอเข้ามาในระบบถึงกว่า 5 ล้านครั้ง

สำหรับใครที่อยากจะนำเอาวีดีโอจาก Instagram ไปติดที่เว็บไซต์หรือบล็อกของตัวเอง ผมมีวิธีการนำวีดีโอจาก Instagram  มาติดครับผม วิธีการไม่ยาก แต่ก็ไม่ง่าย

วิธีการนี้ต้องทำผ่านเครื่องคอมพิวเตอร์ และต้องอาศัยเบราว์เซอร์ แล้วแต่ใครจะถนัดครับ ถ้าให้แนะนำก็เป็น Chrome หรือ Firefox ที่ติดตั้ง Add-on ชื่อ Firebug


ซึ่งผลได้ที่จะเป็นแบบตัวอย่างวีดีโอด้านบนครับผม สำหรับวิธีการก็มีอยู่ไม่กี่ขั้นตอน มาทำตามกันเลย

เปิดวีดีโอจาก Instagram บน เว็บเบราว์เซอร์ของท่าน ในที่นี้ผมเลือกใช้วีดีโอนี้ http://instagram.com/p/bXqIjTAchF/

ส่วนวิธีการที่จะได้มาซึ่ง URL หรือ ลิงค์ของวีดีโอ Instagram ที่เราต้องการ หากดูในคอมอยู่แล้ว จะง่ายหน่อย แค่คลิกที่ URL ของวีดีโอที่เพื่อนแชร์มา จาก Facebook หรือ Twitter ก็จะเข้าไปยังหน้าของวีดีโอได้แล้ว ส่วนใครที่ใช้มือถือก็มีดังนี้

สำหรับ Android

Screenshot_2013-07-06-16-00-37

เปิดแอพ Instagram หาวีดีโอที่เราต้องการ จากนั้นกดที่ปุ่มเมนู (ถ้าไม่มีปุ่มเมนู ให้กดที่ปุ่มที่เป็น จุด 3 จุด ล่างวีดีโอ) จะมีเมนูปรากฏขึ้นมา

  1. เลือกเมนูแชร์ (Share)
  2. ตามด้วยเลือกที่ Copy to clipboard (หรือจะเลือกแชร์ไปยังเบราว์เซอร์ หรือแอพอื่นๆ ก็ได้ที่สามารถมองเห็น URL ของวีดีโอนั้นๆ ได้ เช่น แชร์ไปยังอีเมล แล้วเปิดเมลในคอมเพื่อเปิด URL, แชร์ไปยัง Facebook จากนั้นเปิด Facebook บนคอม เพื่อคลิกเข้าไปยังวีดีโอที่ต้องการ)
  3. เปิด URL ของวีดีโอในเบราว์เซอร์บนคอม

สำหรับ iOS

Photo Jul 06, 16 02 41

เปิดแอพ Instagram หาวีดีโอที่เราต้องการ กดที่ปุ่มที่เป็น จุด 3 จุด ล่างวีดีโอ จะมีเมนูปรากฏขึ้นมา

  1. เลือกเมนู Copy Share URL
  2. ไปยังเบราว์เซอร์ หรือแอพอื่นๆ ก็ได้ที่สามารถมองเห็น URL ของวีดีโอนั้นๆ ได้ เช่น ส่งเป็นอีเมลหาตัวเอง แล้วเปิดเมลในคอมเพื่อเปิด URL, เอา URL ที่ได้ไปแชร์ในง Facebook จากนั้นเปิด Facebook บนคอม เพื่อคลิกเข้าไปยังวีดีโอที่ต้องการ
  3. เปิด URL ของวีดีโอในเบราว์เซอร์บนคอม

05-07-56 11-54-32 PM

เมื่อเปิด URL ของวีดีโอจาก Instagram บนคอมเรียบร้อย ขั้นตอนนี้เป้นขั้นตอนที่เราจะหาลิงค์ของวีดีโอ Instagram เพื่อนำไปใช้งานโดยการ View ดู HTML code

  • สำหรับ Chrome คลิกขวาที่วีดีโอ เลือก Inspect Element
  • สำหรับ Firefox ตั้งติดตั้ง Add-on ชื่อ Firebug จากนั้น คลิกขวาที่วีดีโอ เลือก Inspect Element with Firebug
  • สำหรับ Safari ต้องเปิดโหมดสำหรับนักพัฒนาการ โดยไปที่ Preferences > Advanced ติ๊กถูกที่ Show Develop menu in menu bar จากนั้นคลิกขวาที่วีดีโอ เลือก Inspect Element
  • สำหรับ IE กด F12

05-07-56 11-56-52 PM

2 . ค้นหา div ที่ Class ชื่อ Video วิธีการไม่ต้องหาทีละบรรทัดครับเบราว์เซอร์มีฟังก์ชั่น Find ให้ค้นหา ในตัวอย่างของผมเป็น Chrome ผมกด Ctrl+F จากนั้นผมพิมพ์คำว่า “Video” กดค้นหาไปเรื่อยจนกว่าจะเจอบรรทัดแบบในภาพด้านบน ถ้าเจอข้อความแบบในภาพบรรทัดที่ไฮท์ไลท์สี่น้ำเงินแสดงว่าถูก

3 ทีนี้ให้หา src ตัวแรกที่เจอ ต่อจากคำว่า Video vStatesHide ซึ่งใน src จะเป็นลิงค์ของไฟล์วีดีโอ ซึ่งในตัวอย่างด้านบนคือ http://distilleryvesper1-1.ak.instagram.com/51c5b508e52511e28b8322000a1f92ef_101.mp4

4. ให้ Copy เอาทั้งหมดแบบนี้ [highlight]http://distilleryvesper1-1.ak.instagram.com/51c5b508e52511e28b8322000a1f92ef_101.mp4[/highlight] นำไปวางในข้อ 6.

06-07-56 12-06-14 AM

5. หาคำว่า poster ในบรรทัดเดียวกัน ซึ่งจะอยู่ถัดจาก ข้อ 4.  จากนั้นให้ copy เอาเฉพาะ URL เช่น http://mobiledista.com/media/2013/07/51c5b508e52511e28b8322000a1f92ef_7.jpg ไปวางในข้อ 8.

05-07-56 11-49-06 PM

6. ไปที่เว็บไซต์ sandbox.thewikies.com/vfe-generator จากนั้นนำ URL ที่ได้จาก ข้อ 4. มาวาง

7. ลบข้อความในช่อง Ogg Video และ WebM Video ออก

8. นำ URL ที่ได้จาก ข้อ 5. มาวาง

9. ปรับขนาดความกว้าง ความสุงของวีดีโอที่เราต้องการ

06-07-56 4-55-36 PM

10. กดที่ปุ่มตรงลูกศร เพื่อ Copy เอา code ไปใช้

จากนั้นก็นำเอา Code ที่ได้ไปวางในเว็บไซต์หรือบล็อกของเรา เพียงเท่านั้นก็จะได้วีดีโอจาก Instagram ไปใช้งานได้ สำหรับวิธีการ ใครงง หรือไม่เข้าใจตรงไหน สอบถามได้นะครับ

ที่มา redmondpie