เมื่อหลายวันก่อนผมได้มีโอกาสได้รับงานมาชิ้นหนึ่ง ที่เกี่ยวของกับการอับโหลดวิดีโอเข้าไปในเว็บ picasaweb.com แต่มันก็มีเงื่อนไขว่า ต้องเล่นผ่าน tag video ของ HTML5 เพราะเค้าคิดว่ามันสามารถเล่น ผ่าน iphone,ipad หรือแม้กระทั่ง android ที่ไม่ลองรับตัวเล่นที่เป็นแบบ flash แล้ว สำหรับ mobile

     และนั่นเองก็ได้เป็นที่มาว่า ผมต้องทำการสร้างตัวอ่านไฟล์วิดีโอมาจากเว็บ picasaweb.com เพื่อจะใส่ตัวเล่นของ tag video ของ html5 ได้(แต่จริงเว็บเค้าก็มีตัวเล่นอยู่แล้ว...แต่จำเป็นต้องเข้าผ่านเว็บของเค้า ^^) แต่ก็มีคำถามต่อมาว่า เราก็เอาตัวไฟล์ที่เล่นผ่านวิดีโดของเค้ามาใส่ใน Tag Video เลยก็ได้นิ ไม่จำเป็นต้องไปเรียกมาให้ยุ่งยากเลย คำตอบคืออ่านได้เหมือนกัน แต่!!! วิดีโอที่ได้มานั่น มันมีวันหมดอายุ เท่ากับเราต้องไปก็อปไฟล์นั่นมาใส่ทุกครั้งที่วิดีโดนั่นเล่นไม่ได้ (สำหรับการดูไฟล์วิดีโอนั่นก็...ผมติดไว้ก่อนเดียวว่างๆจะทำตัวอย่างให้ดู แต่สำหรับผู้ที่ดูไฟล์นั่นออกก็คงคิดตามได้นะครับ) ซึ่งทำให้วิธีนี้จึงไม่เหมาะต่ออ่านไฟล์วิดีโอ ผมก็ได้คิดหาวิธีก็ได้ผลลัพธ์มาแบบนี้

วิธีการทำของผมคือ

1. ผมก็ได้ทำการสร้างตัวถอดรหัสวิดีโอมา 1 ไฟล์ เพื่อที่จะทำการแกะ path url (รูปแบบ http://picasaweb.google.com/0000000/ชื่อเจ้าของไฟล์) ออกมาเป็นรูปแบบที่พร้อมจะเล่นใน Tag video ซึ่งก็ทำได้หลายหลายวิธี (ถ้าสนใจวิธีการนี้ก็ยินดีให้คำปรึกษาครับ) แต่ไฟล์วิดีโอที่ได้มานั่นจะได้มาอย่างน้อยก็ 4 ไฟล์วิดีโอตัวเล่น ก็เกิดคำถามว่าทำไมได้มาอย่างน้อย 4ไฟล์ ก็ตอบได้ว่า แต่ละไฟล์นั่นก็จะแตกต่างกันที่ความละเอียดของไฟล์วิดีโอ....ถ้าผู้อัพโหลดไฟล์วิดีโอที่มีความละเอียดสุงสุดที่ 1080 p ก็จะได้ไฟล์มา 6ไฟล์ เท่ากับว่า ไฟล์ที่ 6 นั่นจะมีภาพที่มีความละเอียด 1080 p มา และลดตามลำดับไฟล์ ต่ำสุดน่าจะ 360p หรือป่าว (อันนี้ไม่แน่ใจ) แต่ผมก็ได้ทำการเลือกไฟล์วิดีโอที่มีความละเอียดสุงสุดมาแสดง (ใครเน็ตช้า...ก็มีหวังอ่านไฟล์ไม่ได้แน่ๆ ^^)

2. จากนั้นผมก็ไปหา script ที่อ่าน Tag Video สวยๆเอาไว้ (จะได้ไม่ต้องออกแบบเอง) แต่ปกติก็อ่านเข้าไปได้เลยโดยไม่ต้องตกแต่งแต่ยอ่างใด สังเกตุได้ว่า ตัวเล่นนี้สามารถอ่านชนิดของวิดีโอได้หลากหลายชนิด รวมทั้ง youtube ได้อีกด้วย (แต่อันที่เป็น youtube นี้ไม่รู้ว่าโดนบรรจุเป็นชนิดตายตัวไว้หรือป่าว แต่ script ที่ผมได้มาเค้ามีมาให้ด้วย ^^) 

3 . จากนั้นก็ง่ายละ ตัวเล่นก็มีแล้ว ไฟล์ที่ได้มาจาก picasaweb ก็มีแล้ว ก็ทำการประกอบขึ้นมาเพื่อให้เล่นได้ (ลืมบอกไป ไฟล์ที่ได้มานี้ต้องเลือกชนิด video/mp4 ถึงจะเล่นได้หรือเป็นแบบ video/youtube ไม่อย่างนั้นวิดีโอจะไม่เล่นครับ) เลือกชนิดวิดีโอให้ตรงกับวิดีโอที่ได้มาด้วยนะครับ 

     แต่แล้วก็มีปัญหาอย่างนึงที่ผมเจอ(อันนี้แหละครับที่ผมอยากจะเขียนบทความนี้ขึ้นมา) คือตัวเล่นของ Tag Video ไม่สมบูรณ์ เหมือนกับว่าผมเลือกชนิดไฟล์ผิดไป เช่น เมื่อเรากดซูมวิดีโอจะทำให้วิดีโอที่เล่นอยู่หยุดเล่น หรือไม่มีปุ่มเล่นที่ตรงกลางจอ (แต่ตัวอย่างหรือ script ที่ผมได้มานั่นเล่นได้ปกติ) ก็ทดลองหลายอย่าง เช่น ลบ script ทุดตัวให้เหลือแค่ตัวเล่นวิดีโอแล้วก็ไม่ได้ ทำใหม่ตั้งแต่ต้นอีกก็ยังไม่ได้ (ทำใจไว้แล้วละครับว่าน่าจะไม่ได้แล้วหาสาเหตุไม่เจอ) แต่แล้วเมื่อไม่กี่วันก่อน ผมได้เข้าไปเว็บนึงที่ใช้ตัวเล่นวิดีโอเหมือนตัวที่ผมไปเอามา และเล่นไฟล์แบบที่ผมได้ถอดรหัสมา เค้าเล่นได้สมบูรณ์ เอะ!!! ทำได้ไง ที่นี้ละครับเรื่องใหญ่ แสดงว่ามันต้องมีบางอย่างที่ผิดไปแน่ๆ ก็ทำการรื้อโปรเจคมาหาสาเหตุใหม่

     และก็ได้เจอสาเหตุ โดยคาดไม่ถึงว่า ไฟล์ที่ถอดรหัสมานั่น...ที่ได้มาทั้ง 6ไฟล์นั้น บางไฟล์อ่านได้ด้วย ชนิดที่เป็น video/mp4 หรือ video/youtube เท่ากับว่าต้องเลือกไฟล์ที่เล่นด้วย video/mp4 เท่านั้นถึงทำให้ตัวเล่นวิดีโอนั่นสมบูรณ์ ผมก็ทำการปรับเปลื่ยน จากที่ถอดรหัสไฟล์ แล้วเลือกไฟล์ที่มีความละเอียดสุงสุดมา ก็ลดลงมา 1 ระดับ ก็ได้เลย (แต่สำหรับคนที่รู้อยู่แล้ว ^^ ก็ไม่เป็นไร แต่ผมเพิ่มรู้) ก็เลยเขียนบทความนี้เพื่อให้คนที่คิดจะทำอยู่หรือติดปัญหานี้ได้รู้นะครับ....แต่ผมก็ไม่รู้ว่าจะเป็นวิธีที่ถูกต้องหรือป่าว ...แต่ทำออกมาแล้วได้ผลลัพธ์ตามที่ต้องการ...แค่นี้ก็เพียงพอแล้วครับ

     ไฟล์งานที่เป็นตัวถอดรหัสไฟล์นั้นผมเขียนด้วย PHP ครับ หรือจะเรียกแค่ function ก็ได้ เพราะไม่ได้ยิ่งใหญ่ขนาดนั้น ตัวอย่างเช่น ไฟล์วิดีโอ function(http://picasaweb.google.com/0000000/ชื่อเจ้าของไฟล์) ผมเรียกให้มันดูหรูๆว่า "ตัวถอดรหัสไฟล์" !!!