หลายท่านคงจะเคยได้ดูภาพยนต์โฆษณาที่ตามห้างสรรพสินค้าหรือ modern trade ที่เขาจะมีภาพเคลื่อนไหวแสดงอยู่บนภาพนิ่งที่เป็นภาพพื้นหลังกันมาแล้วนะครับ การนำเอาภาพเคลื่อนไหวกับภาพนิ่งมาประกอบกันในการนำเสนอเนั้นมีผลดีอย่างมาก ภาพเคลื่อนไหวหรือภาพยนต์หรือวิดีโอสามารถเรียกร้องความสนใจจากคนที่ผ่านไปมาได้ดี ส่วนภาพนิ่งนั้นสามารถให้ข้อมูลประกอบการตัดสินใจได้ดี
ก่อนหน้านี้ผมมองว่าการทำภาพยนต์โฆษณาในลักษณะดังกล่าวคงต้องเป็นเรื่องที่มืออาชีพทำเท่านั้น หลังจากที่มาศึกษา HTML5 Media ก็มองเห็นทางว่าอย่างเรา ๆ ก็ทำได้ ไม่ยาก ถึงแม้ไม่สวยงามเหมือนของเขาก็ตาม ในตัวอย่างต่อไปนี้ผมจะยกตัวอย่างงานแบบง่าย ๆ ให้ดูพอเป็นแนวทางในการทำงานต่อไป
ขั้นตอนมีดังนี้
1. เตรียมวิดีโอที่สามารถใช้กับ HTML5 player ซึ่งได้แก่วิดีโอที่มีนามสกุลเป็น .webm , .mp4, .ogv หากท่านไม่มีเลย ก็สามารถใช้ software แปลงวิดีโอได้ครับ ผมใช้ Miro video converter ครับ เป็นซอฟต์แวร์ขนาดกำลังดี ไม่มีอะไรเยอะแยะเต็มหน้าจอ และยังเป็น open source ด้วย ข้อดีของ Miro คือสามารถทำ optimization ให้เหมาะกับ Android หรือ iOS ได้ด้วย
2. เตรียมภาพนิ่ง ซึ่งเราจะนำมาใช้เป็นภาพพื้นหลังกัน หาสวย ๆ นะครับ ถ่ายกันเองก็ได้
3. แล้วเราก็นำทั้งภาพและวิดีโอมาผสมผสานกันแบบง่าย ๆ ตรงไปตรงมาเหมือนเขียน HTML แบบทั่วไปเลยครับ ดูตัวอย่างประกอบ หรือ คลิ๊กขวาเพื่อดู code
ก่อนหน้านี้ผมมองว่าการทำภาพยนต์โฆษณาในลักษณะดังกล่าวคงต้องเป็นเรื่องที่มืออาชีพทำเท่านั้น หลังจากที่มาศึกษา HTML5 Media ก็มองเห็นทางว่าอย่างเรา ๆ ก็ทำได้ ไม่ยาก ถึงแม้ไม่สวยงามเหมือนของเขาก็ตาม ในตัวอย่างต่อไปนี้ผมจะยกตัวอย่างงานแบบง่าย ๆ ให้ดูพอเป็นแนวทางในการทำงานต่อไป
ขั้นตอนมีดังนี้
1. เตรียมวิดีโอที่สามารถใช้กับ HTML5 player ซึ่งได้แก่วิดีโอที่มีนามสกุลเป็น .webm , .mp4, .ogv หากท่านไม่มีเลย ก็สามารถใช้ software แปลงวิดีโอได้ครับ ผมใช้ Miro video converter ครับ เป็นซอฟต์แวร์ขนาดกำลังดี ไม่มีอะไรเยอะแยะเต็มหน้าจอ และยังเป็น open source ด้วย ข้อดีของ Miro คือสามารถทำ optimization ให้เหมาะกับ Android หรือ iOS ได้ด้วย
2. เตรียมภาพนิ่ง ซึ่งเราจะนำมาใช้เป็นภาพพื้นหลังกัน หาสวย ๆ นะครับ ถ่ายกันเองก็ได้
3. แล้วเราก็นำทั้งภาพและวิดีโอมาผสมผสานกันแบบง่าย ๆ ตรงไปตรงมาเหมือนเขียน HTML แบบทั่วไปเลยครับ ดูตัวอย่างประกอบ หรือ คลิ๊กขวาเพื่อดู code
ความคิดเห็น
แสดงความคิดเห็น