ถอดรหัสไฟล์ที่ได้มาจากเว็บ picasaweb.com (ฉบับดัดแปลงส่วนตัว)

12ส.ค. 2556
ถอดรหัสไฟล์ที่ได้มาจากเว็บ picasaweb.com (ฉบับดัดแปลงส่วนตัว)

    เมื่อหลายวันก่อนผมได้มีโอกาสได้รับงานมาชิ้นหนึ่ง ที่เกี่ยวของกับการอับโหลดวิดีโอเข้าไปในเว็บ 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/ชื่อเจ้าของไฟล์) ผมเรียกให้มันดูหรูๆว่า "ตัวถอดรหัสไฟล์" !!!

, picasaweb.com , tag video , HTML5

....